如果孩子從父母身上「100％」或「繼承」，孩子的寬度如何？

Question

如果一個父元素中包含的子元素的父元素的寬度不同，它如何可能如此：1）子元素的寬度爲100％ 2）子元素的寬度是「繼承」？

這些都發生在我身上。當我處理一個巨大的頁面時，很難拼湊出一個快速的小提琴。

Answer 1

inherit不一定會繼承父級的實際寬度（以像素爲單位）。
使用width:100%時，父級擁有填充時，子級的寬度可能看起來小於父級的寬度。

div.parent { 
 
    background:yellow; color:brown; 
 
    padding:0 1em; 
 
    width:20em; 
 
} 
 

 
div.child { 
 
    background:brown; color:yellow; 
 
    width:100%; 
 
}

<div class="parent"> 
 
    This is the parent 
 
    <div class="child"> 
 
    This is the child 
 
    </div> 
 
</div>

如果有width:auto塊家長有一個inline-block的孩子width:inherit，孩子的寬度爲auto，仍然使其成爲廣爲它的內容，而不是寬度的父母。

div.parent { 
 
    background:yellow; color:brown; 
 
} 
 

 
div.child { 
 
    background:brown; color:yellow; 
 
    width:inherit; 
 
    display:inline-block; 
 
}

<div class="parent"> 
 
    The parent (full width of the window)<br> 
 
    <div class="child"> 
 
    The child (only as wide as its contents) 
 
    </div> 
 
</div>