一.初始化css
建议使用normalize.css实现css初始化
https://github.com/necolas/normalize.css/
二.px em rem
1.px表示像素
1px=1像素
2.em相对的长度单位
继承:em是相对的必然有一个参考物,这个参考物就是父类font-size,em具有继承的特点,如果它的父级没有font-size,它会继续向上找父级的父级,以此类推!
默认:当没有设置font-size时,默认em是1em=16px
缺点:容易混乱,父元素的像素不一定一致,这会造成布局的不确定性
3.rem
基本和em一样,只是rem的参照物是html的font-size,这样固定的参照物比较好计算
ont-size:62.5% 1rem=10px (10/16*100%)
三.初始化注意点
1. ::selection
伪类选择器用于突出显示的页面用户选择的任何部分,包括可编辑文本字段中的文本
2. display:none和visibility:hidden隐藏元素的区别
display:none 隐藏元素并且挤占次元素空间
visibility:hidden 隐藏元素,但是不会挤占元素空间,位置依旧在
四.清除浮动
1.创建一个空元素并给予clear:both
2.给最外层元素添加overflow:auto或者hidden
3.给外层元素也添加浮动
4.使用:after伪元素
div:after{
content:'.';
display:block;
height:0;
clear:both;
visibility: hidden;
}
最优方案
div:before,
div:after{
content:'';
display:table;
}
div:after{
clear:both;
}