如果孩子从父母身上“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>