1.什么是 CSS reset
CSS reset
的就是让各个浏览器的 CSS 样式有一个统一的基准,而这个基准更多的就是“清零”!
2.如何写出简洁优美的CSS reset
我们的 reset
应该根据自己的要求来书写。然而,目前的状态是(尤其一些中小型网站), reset
代码直接拷贝过去,不做任何的思考。
3. 你所不知的 reset
- 1. `div`、`li`、还有像 `form`,`img`, `input`, `button`, `textarea` 这样子的表单元素标签是没有 `margin` 值和 `padding` 值的。
- dt
标签默认的 margin
和 padding
值就是 0
。
- code
标签是个属于 inline
水平的元素,不存在 margin
值和 padding
值。
- input
元素有 padding
值 没有 margin
值
- fieldset
, legend
这两个90年代的标签使用概率不足1%,不需要拿来重置。
简洁的 reset 可以这样书写:
body, dl, dd, h1, h2, h3, h4, h5, h6, p, form{margin:0;} ol,ul{margin:0; padding:0;}
4.reset 存在的问题
1.css文件的大小
显然,reset
平白无故的增加了 CSS 文件的大小,虽然,增加的大小可能有限,但是,要知道,即使 0.1 秒的载入时间差异也会影响互联网企业的收入的。
2.样式的重置
许多的 CSS 样式要重写与重新覆盖,典型的多此一举。
3.CSS的渲染
这可以说是最大的问题,样式无缘无故增加了很多的渲染,想想看,一个项目或是一个页面中有多少个 div
标签,居然使用div{margin:0; padding:0;}
当然,*{margin:0; padding:0;}
更是无法容忍的。
5.少既是多
最少的 CSS 代码,最少的渲染,最少的重置就是最好的 CSS 样式代码,这反应了您的 CSS 层次。
注:参考文献