1.字体复合属性
body{ font:font-style font-weight font-size / line-height font-family ; }
div{font:12px/1.5 '微软雅黑'；} // 行高 可以是像素 20px 也可以是倍数 表示当前字体大小的1.5 倍
使用 font 属性时，必须按上面语法格式中的顺序书写，不能更改顺序，并且各属性之间用 空格 隔开
不需要设置的属性可以省略（取默认值），必须保留 font-size 和 font-family 属性，否则 font 不起作用。
2.文本缩进（text-indent）
进行段落首行缩进 单位 px 代表像素
em 相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小。
3.复合选择器
后代选择器（子孙后代） 用法： .nav a 空格隔开
子代选择器（亲儿子） 用法：.nav > a 大于号连接
并集选择器（相同样式的元素） 用法：.nav,.header 逗号隔开
链接伪类选择器（不同状态的链接） 用法：常用 a{ } 和 a:hover{ }
a:link 未访问的状态
a:visited 已访问过的状态
a:hover 经过时的状态
a:active 点击时的状态
：focus 选择器 （获得光标的表单） input：focus
4. 背景图片位置 background-position
1. 方位名词
如果两个值都是方位名字，则前后顺序无所谓，比如 left，top 和 top，left
2. 参数是精确单位
第一个肯定是 x坐标，第二个一定是 y 坐标
如果只指定一个数值 ，那么该数值一定是 x 坐标 ，另一个默认垂直居中
3. 参数是混合单位
精确单位 和 方位名字 混合使用，第一个值是 x 坐标，第二个值是 y 坐标
5. 背景图像固定 background-attachment
background-attachment 属性设置背景图像是否固定 或者 随着页面的其余部分滚动
scroll：背景图像是随对象内容滚动
fixed：背景图像固定
6. 背景复合写法（没有顺序）
background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置；
7. CSS 优先级
!impormpt > style > id > class > div > *
8. CSS 权重叠加
.nav .pink {
color: pink;
font-size: 24px;
}
.nav li {
color: red;
}
<ul class="nav">
<li class="pink">人生四大悲</li> // 颜色是pink 因为.nav .pink 的权重更高
<li>人生四大悲</li>
<li>人生四大悲</li>
</ul>
9. 表格细线边框
border-collapse:collapse; 相邻边框 合并在一起
10.盒子模型（border）
①.内边距 padding
padding 会影响盒子大小，如果不设置 width 宽度，就不影响 盒子大小。
②.外边距 margin
外边距可以让 块级盒子 水平居中 ，必须满足两个条件：
1.盒子必须指定宽度
2.盒子左右的外边距都设置为 auto
注意：margin：auto；是让块元素水平居中，行内元素 或者 行内块元素水平居中 给其父元素 添加 text-align:center 即可
③. 外边距合并问题
1.相邻块元素垂直外边距的合并
两个相邻 div 的垂直间距，不是 上外边距+下外边距的和 而是取两个值中的最大者
解决方案：尽量只给一个盒子添加 margin 值
2.嵌套块元素垂直外边距的塌陷
对于两个父子关系的块元素，父元素有上外边距 同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
解决方案：
1.为父元素定义上边框（把父子两个块元素隔开）
2.为父元素定义上内边距（把父子两个块元素隔开）
3.为父元素添加 overflow：hidden；属性
11.浮动布局注意点
1.浮动和标准流的父盒子搭配使用。
先用标准流的父元素位置，再把内部子元素采取浮动排列左右位置
2.一个元素浮动了，理论上其余的兄弟元素也要浮动
浮动盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。
12.为什么要清除浮动
1.父级没高度
2.子盒子浮动
3.影响下面布局，应该清除浮动
13.清除浮动方法
1. 额外标签法，也称为隔墙法，是W3C推荐做法 缺点：代码结构不严谨
例如：<div style='clear:both;'></div>
2. 父级添加 overflow 属性 缺点：无法显示内容多余的部分
例如：父元素{ overflow:hidden;}
3. 父级添加 after 伪元素
例如：
父元素 : after {
display: block;
content: "";
clear: both;
}
4. 父级添加双伪元素
例如：
父元素：after ，
父元素：before{
display: block;
content: "";
clear: both;
}
5. IE6,7不支持 添加伪元素的方式
父元素{ *zoom：1；}
14.定位（position：static / relative / absolute / fixed ;）
1. static：静态定位 很少使用
2. relative：相对定位 元素在移动位置时，是相对于它原来的位置来说的（自恋型）
特点：
1. 移动位置的时候是参照自己原来的位置移动的
2. 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来位置）
3. 典型应用是给绝对定位当爹
3. absolute：绝对定位 元素在移动时，是相对于它的祖先元素来说的（拼爹型）
特点：
1. 没有祖先元素 或者 祖先元素没有定位，则以浏览器为定位（Document 文档）
2. 祖先元素有定位（相对，绝对，固定定位），则以最近一级的有定位的祖先元素为参考点移动位置
3. 绝对定位 不再占有原先的位置（脱标）
4. fixed：固定定位 元素固定在浏览器可视区的位置，主要使用场景，可以在浏览器页面滚动时，元素的位置不会改变。
特点：
1. 以浏览器的可视窗口为参照点移动元素
2. 跟父元素没有任何关系
3. 不随滚动条滚动
4. 固定定位不占有原先的位置（固定定位也是脱标的，固定定位也可以看做是一种特殊的绝对定位）。
5. sticky：粘性定位 被认为是相对定位和固定定位的混合
特点：
1. 以浏览器的可视窗口为参照点移动元素（固定定位特点）
2. 粘性定位 占有原先的位置 （相对定位特点）
3. 必须添加 top ，left，right，bottom 其中一个才有效
4. 跟页面滚动搭配使用，兼容性差，IE不支持。
15. 定位拓展
绝对定位（固定定位）会完全压住盒子（标准流所有的内容）
浮动（float），只会压住它下面的标准流的盒子，但是不会压住下面标准流盒子中的文字（图片）
浮动之所以不会压住文字，因为浮动产生的目的最初就是为了做文字环绕效果的，文字会围绕浮动元素
16.网页布局总结
通过盒子模型，知道大部分 html 标签是一个盒子，通过 CSS浮动、定位 可以让每个盒子排列成网页。
一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。
1.标准流
可以让盒子上下排列 或者 左右排列，垂直的块级盒子显示就用标准流布局
2.浮动
可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。
3.定位
定位最大的特点就是有层叠的概念，可以让多个盒子前后叠压来显示，如果元素自由在某个盒子内移动就用定位布局。
17.元素的显示和隐藏
1. display：显示隐藏元素，不保留位置
2. visibility：显示隐藏元素，保留原来的位置
3. overflow：溢出显示隐藏 只是对溢出的部分处理
案例：当鼠标经过 layer时，显示遮罩层（完整说法：当鼠标经过 layer 时，让 layer 里面的 box 显示出来）
<div class="layer">
<div class="box"></div> // 遮罩层
<img src="img/banner.png" alt="" />
</div>
layer:hover .box{
display:block;
}
