1.
对于背景的样式来说,背景图片的样式是重点,
background-repeat控制背景图片是否重复
background-size控制大小,contain不会失帧但是可能会不完全覆盖
cover会导致图片的缺失
百分之百可能会让图片失帧
背景图片定位用background-position
2.
使用列表样式注意删除列表原始样式
文本垂直居中要是行高等于容器高度
伪类 hover 能改变其鼠标停留时的样式
3.
在没有改变盒子模型时,改变padding和border会撑大模型导致布局错乱
div中包裹一个div要改变内部div的margin时要给父元素添加
overflow:hidden元素
box-shadow
:
10
px
10
px
5
px
0
px
#cccccc
;
/*x
轴方向
y
轴方向 模糊距离 模糊范围 颜色
*/
4浮动
消除浮动bug有三个法
1.在会产生错误的div下方加一个块级元素。并且消除浮动,以消除错误。但是会多一个无关元素,影响页面加载速度
2.在大容器中添加overflow:hidden,但是一旦包含非浮动元素,页面会显示不正常
3.添加一个伪类after 让content:‘’;
display:block;
clear:both;
浮动元素一定要定义width
box-sizing
:
border-box
;
/*
变态盒模型
*/
变态盒模型能让border和padding对页面布局不影响
运用浮动时首先分好区会事半功倍