事实：

Question

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

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

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

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

帮助我理解，发生了什么？

Answer 1

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

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

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

Answer 2

默认情况下，width和height值设置为auto。如果您想使用父级中应用的高度，那么您需要显式继承它们：

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

事实：

从w3c width和height定义继承到否。

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

方位角，边框折叠，边框间距，字幕边，颜色，光标，方向，高程，空单元格，字体系列，字体大小，字体样式，字体变体，字体粗细，字体，letter-spacing，line-height，list-style-image，list-style-position，list-style-type，list-style，orphans，pitch-range，pitch，quotes，richness，speak-header，speak-numeral ，说话 - 标点符号，说话，语速，压力，文本对齐，文本缩进，文本转换能见度语音系列体积空白寡妇字间距

为什么CSS中没有继承

2 个答案:

事实：