调整字号

CSS 继承的一些细节

关于 CSS 的继承很多人都知道,比如 colorfont-size 都是可以继承的,W3C 规范里写有“Inherited: yes”的属性都可以从父元素继承。今天发现了一些以前不了解的东西,做个笔记。

一般来说子元素从父元素继承来的都是计算值,比如:

<div style="font-size:20px">
  <p style="font-size:2em">some <span>text</span></p>
</div>

<p> 的 font-size: 2em,计算值为 40px,所以 <span> 继承到的 font-size 也是 40px 而非 2em。如果是百分比也同样如此,也就是说相对单位先计算成绝对长度后,再继承。

line-height 有一点特殊的地方,可以接受一个不带单位的数字作属性值,这个值乘以 font-size 是最终的应用值,跟倍数一样,也有点相对单位的意思,但是继承的时候并不需要计算。所以下面例子的 <em> 也是 line-height: 2。如果你给它一个 font-size: 30px,那行高就是 60px。

<span style="font-size:20px;line-height:2;">some <em>text</em></span>

line-height 的百分比继承跟其他属性一样。

但有时候百分比也是可以继承的。text-indent 可以接受一个百分比值,用来乘以包含块宽度。子元素从父元素继承时,得到的也是百分比值。text-indent 是默认继承,其他还有一系列属性默认不继承,但如果设为 inherit,它遇到百分比也会继承百分比:

  • background-position
  • left, right, top, bottom
  • height, width
  • margin-left, margin-right, margin-top, margin-bottom
  • min-height, min-width
  • padding-left, padding-right, padding-top, padding-bottom

顺便扯一扯 CSS 解析过程中的四个值:指定值、计算值、应用值和实际值。

一个 CSS 属性从样式表开始解析到得到最终渲染的值要经过四步计算:

  1. 从样式表中得到指定值(specified value);
  2. 把一部分相对单位(em、百分比等)计算成绝对长度,把相对 URI 计算为绝对 URI,得到计算值(computed value),计算值就是用来继承给子元素的。有些值(比如 widthtop 的百分比,或者一些 auto 值)不能直接计算,要先得到包含块宽度,也就是需要布局完成才能计算的,它们的计算值与指定值相同;
  3. 这一步把上面没计算的值进行布局计算,得到应用值(used value);
  4. 有一些属性值在特定环境下可能无法渲染,比如你给 font-sizeborder-width 设置了小数点值 14.2px,浏览器也许只能渲染整数像素 ,那么会对这些值重新估算,得出实际值(actual value)。

有时候不同浏览器中使用 window.getComputedStyle 返回的值可能不一样,就是因为有的返回了计算值,有的返回应用值。在 Firefox 中,把 window.getComputedStyle 返回的值叫做 resolved value(不知道怎么翻译了,解决值?……),这个值有时是计算值有时是应用值,因属性而异。Chrome 也类似,但有时就会遇到跟 Firefox 返回值不一样的情况。比如给一个元素 line-height: normal,然后用 window.getComputedStyle 获取它的行高,Chrome 返回计算值 normal,Firefox 返回的是具体的应用值比如 16px。(根据规范,line-height: normal 的计算值还是 normal,应用值在 1.0-1.2 之间。)

貌似 CSS3 中改为了三步计算,没有了应用值这一说了。上面的四步计算是 CSS 2.1 标准。

参考资料:

还没有评论,沙发空缺中……
flight