CSS魔法

作者：
链接：http://www.zhihu.com/question/20350041/answer/15564935
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

浏览器在给 hx 标题元素设定默认样式时，使用的是 h1 {font-size: 200%;} h2 {font-size: 150%;} 等等这样的规则来设定字体大小。浏览器通过这些样式来确保各级标题文本可以与普通文本呈现字体大小的固定比例关系。

那么浏览器为什么要通过百分比来固定这个比例，而不是用固定的 px 值来确定相对的比例关系呢（比如这样：h1 {font-size: 32px;} h2 {font-size: 24px;} p {font-size: 16px;} 等等）？

一方面，百分比显然更适合用来设置比例，另一方面，是因为几乎所有浏览器通常都提供了文本缩放功能（注意：非整页缩放），这是浏览器对网页可访问性提供的最基础的支持。而浏览器（尤其是 IE）的文本缩放功能在原理上，通常是通过重设 body 元素的字体大小来实现的——当 body 的字体大小变化时，其后代元素通过 CSS 的层层继承和百分比的换算来呈现字体大小的比例关系。

所以，浏览器自身的默认样式中是不会使用 px 这样的绝对单位的，否则文本缩放特性无法实现。（我们一定都有过这样的经验，一旦某个元素的字体大小使用了固定的 px 值，它就再也不受 IE 缩放设置的影响了。）

罗嗦完了，回到问题本身：

写 CSS Reset 的目的，就是把浏览器的默认样式覆盖掉。我最早看到的 CSS Reset，确实就是这么写的：

h1,h2,h3,h4,h5,h6 {font-size:100%; font-weight:normal;}

甚至可能第一个写 CSS Reset 的人（Eric Meyer？）就是这么写的。这样写的“好处”在于，可以非常直观地把浏览器的默认样式（h1 {font-size: 200%;} 等）清零，用百分比干掉百分比，再合适不过。而后来人也一直沿用，可能是懒得去作改变，也可能是向前辈致敬。

当然除此以外，还有其它方法也可以实现 hx 字体大小清零的目的：

• {font-size: inherit;} 可是 IE 6,7 不支持。
• {font-size: 1em;} 这个貌似完美，且字节数更少。

转载于:https://my.oschina.net/u/2558718/blog/711925