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> 

它看起来像这样在网页浏览器：

我questio n是：子div标签如何获得宽度的大小？是因为从父div标记继承还是仅仅通过默认行为，如果不指定宽度，它会扩展到父div容器？

Answer 1

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

See the specs on block level elements

“每个块级元素生成包含子代框和生成的内容，并且还涉及任何定位方案的盒的主要块级框。” - 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默认是一个块元素。而且因为你没有指定宽度，所以它的值是“auto”。这意味着浏览器计算宽度，通常是父元素宽度的100％。