css - 如果来自父级的 "100%"或 "inherit"，子级的宽度如何不同？

Question

包含在父元素中的子元素如何可能与父元素的宽度不同，如果1) Child's Width 为100%2) Child's Width 是 'inherit' ?

这两个都发生在我身上。当我处理一个巨大的页面时，很难快速组合一个 fiddle 。

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 的 block 父 block 有一个width:inherit 的内联 block 子 block ，则子 block 的宽度将为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>