CSS Resets
消除不同浏览器之间的差异
传统的css resets
Normalize.css
A modern, HTML5-ready alternative to CSS resets
px，em，rem
-
px（1个px相当于1个像素）
-
em（相对的长度单位）
em相对参照物为父元素的font-size
em具有继承的特点
一直到顶级父元素没有设置font-size时，会有一个默认的em设置，一般为：1em = 16px
缺点：依赖父元素，容易造成混乱 -
rem
rem相对参照物为根元素html，相对参照物固定不变，好计算
其它特性和em相同
清除浮动
-
添加新标签
<div class="container"> <h1 style="float:left;"></h1> <p style="float:left;"></p> # 清除浮动 <div style="clear:both;"></div> </div>缺点：添加无意义的空标签，违背了结构和表现分离的web标准的精髓，如果太多，维护困难。
-
overflow
.container{ overflow:auto/hidden; } -
浮动容器本身也浮动
.container{ float:left; }缺点：容器外部有嵌套时，也需要浮动，整个页面建立在浮动布局的基础上。
不推荐使用 -
使用after伪元素
.clearfix:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; } /*兼容 ie6/7 */ .clearfix{zoom:1;} <div class="container clearfix"></div> -
更优雅的写法
.clearfix:before, /*before设置可以防止上下元素的外边距合并等。*/ .clearfix:after{ content:" "; display:table; } .clearfix:after{clear:both;}
