css背景样式 列表样式 盒子模型 浮动

1.

对于背景的样式来说，背景图片的样式是重点，

background-repeat控制背景图片是否重复

background-size控制大小，contain不会失帧但是可能会不完全覆盖

cover会导致图片的缺失

百分之百可能会让图片失帧

背景图片定位用background-position

2.

使用列表样式注意删除列表原始样式

文本垂直居中要是行高等于容器高度

伪类 hover 能改变其鼠标停留时的样式

3.

在没有改变盒子模型时，改变padding和border会撑大模型导致布局错乱

div中包裹一个div要改变内部div的margin时要给父元素添加

overflow：hidden元素

box-shadow:10px10px5px0px#cccccc;

/*x轴方向 y轴方向 模糊距离 模糊范围 颜色*/

4浮动

消除浮动bug有三个法

1.在会产生错误的div下方加一个块级元素。并且消除浮动，以消除错误。但是会多一个无关元素，影响页面加载速度

2.在大容器中添加overflow：hidden，但是一旦包含非浮动元素，页面会显示不正常

3.添加一个伪类after 让content：‘’；

display：block；

clear：both；

浮动元素一定要定义width

box-sizing:border-box;

/*变态盒模型*/

变态盒模型能让border和padding对页面布局不影响

运用浮动时首先分好区会事半功倍