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

阅读全文 »

flight