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;},其中第二种方法更好.