CSS

CSS

---

样式三种书写方式：行间样式、内部样式表、外部样式表

<link rel="stylesheet" type="text/css" href="css/index.css"/><!--外部样式写法-->

基本样式：

文本颜色：设置文本颜色、只针对文字，三种表示法：英文(red)、十六进制(#666)、rgb三元色( rgb(255,0,0) )

color：red;

行高：文本行 与 文本行 之间的距离，想要文本上下居中可以设置为父级的高度或者自身的高，但不能大于父级的高度

line-height:20px;

字体大小：浏览器默认16px，最小10px

font-size:12px;

字体加粗：bold 加粗、normal不加粗

font-weight:bold;

字形：谷歌浏览器默认微软雅黑、IE默认宋体

font-family:'宋体';

字体倾斜：italic;

font-style:italic;

文本下划线underline，上划线overline，删除线line-through，取消下划线none

text-decoration:line-through;

边框border：边框是占像素的，大小、颜色、线型(solid实线、dashed虚线)

 border：10px blue solid;

边框可以单边设置(right 右、left 左、top 上、bottom 下)：border-left：右边框

 border-left：10px blue solid

首行缩进：（可以用2em,也可以用像素）

text-indent：2em;

文本左右对齐：text-align：right；(right 右、center 中、left 左)

text-align：right;

字符间距：字符左右的间隙

letter-spacing:2px;

有文字和图片的时候，设置文本和图片上下对齐方式 （默认baseline 基线对齐、top 上、bottom 中间）

vertical-align:baseline;

选择器：通配符 * < 标签 < 类class < ID < 行间

后代选择器 用空格隔开

.box p{
    
}

子代选择器 >  

.box>p>span{
    
}    

交集选择器

 div.box2{
    
}

并集选择器

.box3,box4{
    
}

继承性color、text-系列 ： 比如text-decoration:underline；、font-系列：  比如font-size:30px;

浮动：float(right 右、left 左 )，浮动会使元素脱离标准文档流

float:left;

外边距：margin 可设置单独一边（1个值表示四边，2个值(第一个表示上下，第二个表示左右)，3个值(第一个上，第二个左右，第三个下)，4个值表示(上右下左) ）

margin:10px;//四边
margin：10px,20px;//上下10px,左右20px
margin:10px,20px,30px;//上下10px,左右20px,下30px
margin:10px,20px,30px,40px;//上下10px,右20px,下30px,左40px

内边距：padding 用法跟外边距一样，自身加大(一般会回过去减去宽高)，背景不收影响，内容受影响     也可设置单独一边  top  left   right   bottom   

外边距应用：居中margin:0px auto;            auto会拿到父级的宽度-自己的宽度，再平均左右设置

脱标三种方法：浮动、绝对定位、固定定位

设置平铺方式：background-repeat:no-repeat;   不平铺    repeat-x 横向平铺
设置图片位置：background-position:  xpx ypx;       x方向   y向方    left左   right右   center中    bottom下             top上
背景图片大小：background-size：contain   碰到第一条边停止
背景图片固定：background-attachment:fixed;
background复合写法：url(相对路径) no-repeat center center

元素转换：
块转行内：display:inline;
行内转块：display:block;
转行内块：display:inline-block;
常用：行内转块，为了设置宽高

显示隐藏：
display:none;

定位：相对定位、绝对定位、固定定位
脱标：浮动、绝对定位、固定定位
定位4个方向：left  top  bottom  right
相对定位：position:relative;
　　脱标：没有脱标　　参照：以自己的00点参照绝对
绝对定位：position: absolute;
　　脱标：脱标　　      参照：以最近一个有定位属性(只要定位就行)的父级作参照，如果父级没有定位就一层一层往上找，直到找到有定位的父级的父级...如果          都没有就会以body做为参数!
固定定位：position:fixed;
　　脱标：脱标　　      参照：以浏览器窗口作为参照
定位属性的层级：默认后面的大于前面的!可以手动自己设置层级大小
　　手动设置： z-index: 10; z-index: 9; z-index: 8;......必须设置任意定位，否则无效

溢出隐藏：overflow:hidden;内容超出范围则隐藏；overflow:scroll;加滚动条

圆角属性：border-radius:50%;

鼠标形状：cursor:pointer;               pointer手势   wait等待   hele问号

浮动的元素不能撑高父级元素，解决办法：用伪元素 
父级元素{
    content:'';
    display:block;
    clear:both;
}