【问题标题】：Why there is no inheritance in CSS为什么CSS中没有继承
【发布时间】：2016-06-16 07:23:58
【问题描述】：

在 Chrome DevTools 中，我注意到一件事，我无法理解。如果我在 CSS 中只为 body 设置宽度和高度 - 那么 div 不会继承任何属性。

body {
  width: 100%;
  height: 100%;
}

<body>
  <div>
    text
  </div>
</body>

在这种情况下，我们可以在 DevTools 中看到 - div 没有任何从 body 继承的属性。但是如果我将 font-size 添加到 body - div 继承了 font-size、width 和 height 属性。

帮我理解一下，这是怎么回事？

【问题讨论】：

CSS 使用盒子模型，您可能需要阅读它
它是继承的。尝试更改 width:100px 而不是 100% 并检查 div 现在只有 100px
@SatejS 这与盒子模型无关。
对不起，我的错，弄糊涂了。

标签： css

【解决方案1】：

CSS 属性要么是继承的，要么不是。 width 没有被继承。 font-size 是。有关继承的信息，请参阅this MDN page。

每个 CSS 属性的 MDN 页面，例如 this one for font-size，会告诉您该属性是否被继承。

因此，将font-size 应用于body 将导致（默认情况下）子元素具有相同的大小。相比之下，将 width 应用于 body 不会将该宽度应用于子级（这没有任何意义）。

【讨论】：

【解决方案2】：

默认情况下，宽度和高度值设置为自动。如果您想将父级中应用的高度应用于子级，则需要显式继承它们：

body{
  height: 100%;
}
body > div{/*otherwise, it was auto height*/
  height: 100%; /*Or, inherit*/
}

事实：

从w3c 到width 和height 被定义为继承到NO。

可以看到csshere和here in other SO answer中继承的属性列表。

方位角、边框折叠、边框间距、标题侧、颜色、光标、方向、高度、空单元格、字体系列、字体大小、字体样式、字体变体、字体粗细、字体, 字母间距, 行高, 列表样式图像, 列表样式位置, 列表样式类型, 列表样式, 孤儿, 音高范围, 音高, 引号, 丰富度, 说话标题, 说话数字, 说话标点符号, 说话, 语速, 重音, 文本对齐, 文本缩进, 文本转换能见度声音家族体积空白寡妇字间距

【讨论】：