zr20170117-css

1.精灵图

主要是通过多个小图标放在一张大的图片上面，在用到的时候通过nth-child(3)来调整所需的图片位置。例如background: url(img/sprite_01.jpg) no-repeat 0 -80px中的-80就是调位置的。

2.行级，块级和行内块级元素（display）

块级：具有宽高并且换行如display:block;行内块级：具有宽高但不会换行例如display:inline-block;行级：不吸收宽高又不会换行例如display:inline。

3.内边距padding(紫色代表内边距)

盒子真正的宽度=本身宽度+左边距+右边距+左边框+右边框;盒子真正的高度=本身高度+上边距+下边距+上边框+下边框
padding和margin的区别:当盒子没有宽高的时候,padding可以叠加到盒子的宽高中,而margin不行,除非有内容；
box-sizing:border-box;会把盒子的大小给固定好,就不会受到padding的影响。

4.边框border

border的正确写法是：border:1px solid red;(类似background连写法一样)

5.导航条设置（ul li由竖排变横排的方法）

方法一：在ul li里面设置cursor:pointer；方法二：在ul li a设置{display:block;}

6.清除浮动的方法（重点）

两个相近的盒子都设置了浮动，容易导致错位；所以有两个方法：一是在离有浮动的盒子的另一个最近盒子里面设置clear:both;
二是在受影响盒子的后面设置.box:after{content:""; display: block; clear: both;},其中第二种方法更好.

7.ul li的使用

一般通过设置ul li的左浮动float:left;由竖排变行排；通过设置ul li：hover a{}来设置鼠标经过效果。