css - CSS 属性中的继承

Question

在这里，在此示例中，我有两个分区，其中一个嵌套在另一个分区中。我称外部分区为父级，嵌套的分区为子级。

CSS

/* for parent div tag*/
#parent{
        width: 500px;
        height: 300px;
        z-index: 1;
        background-color: #CCC;
        border:thin solid black;
        margin:25px;
        padding:20px;
}

/* for child div tag */
#child{
        border:thin solid #F00;
        height:50px;
        background-color:#FFC;
}

HTML

<!-- Start of parent tag -->
<div id="parent">
<p> This is parent div tag. </p>

<!-- Child div tag -->
<div id="child">
<p> This is child div tag. </p>
</div>

<!-- End of parent tag. -->
</div>

在网络浏览器中看起来像这样：

我的问题是：子 div 标签如何获得其宽度的大小？是因为从父 div 标签继承，还是只是默认行为，如果您不指定宽度，它将扩展到父 div 容器？

Answer 1

宽度不能被继承。您看到的是默认行为。

查看块级元素的规范

“每个块级元素生成一个主要块级框，其中包含后代框和生成的内容，也是任何定位方案中涉及的框。” -- W3C

默认情况下，块元素的宽度为100%. 这意味着如果没有指定宽度，它将是100%父级的。

在这种情况下，父母的宽度是542px。

计算基于width:500px;+ padding-left:20px;+ padding-right:20px;+border 2px;

孩子的宽度正好是500px。（100%父母的宽度 - 减padding/ border）。

jsFiddle here您可以使用它并检查元素。

Answer 2

是的，块级元素将扩展到父级允许它们的宽度（宽度减去填充）。

编辑：如果您希望孩子的宽度与其内容一样，请添加display: inline-block到它（也检查here）。

Answer 3

是的，div 默认是块元素。而且因为您没有指定宽度，所以它的值是“自动”。这意味着浏览器计算宽度，通常是父元素宽度的 100%。