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％。