为什么具有背景的父元素不会覆盖宽度大于视口的子元素？

Question

#parent {
  background: pink;
}

#child {
  width: 5000px;
}

<div id="parent">
  <div id="child">Hello</div>
</div>

该#parent元素的粉红色的背景并不在整个坚持#child元素.为什么是这样？

在body元素上设置背景确实适用于整个#child,即使#parent并且body共享相同的宽度,即视口宽度.

奇怪的是,设置#parent元素的显示来inline-block 修复这个问题,虽然我不明白为什么!

这里的任何帮助将不胜感激:)

Answer 1

在#parent那粉红的背景并不在整个坚持#child.为什么是这样？

这是因为块级元素的默认宽度为100%.在这种情况下,它具有的宽度100%的的body元素,这是相同的视口.

换句话说,即使元素的子元素的宽度为5000px,但它仍然具有100%视口的宽度,这意味着背景将不会延伸以覆盖子元素.这不适用于body元素的原因是因为body元素是一种特殊情况,并且值被视为在根元素上指定它们.看到:

3.11.2.画布背景和HTML <body>元素

该body元素的背景属性的已使用值是它们的初始值,并且传播的值被视为在根元素上指定它们.

奇怪的是,设置#parent显示以inline-block解决这个问题,虽然我不明白为什么!

那是因为它不再是宽度为的块级元素100%.此外,inline-block元素具有"缩小到适合"的宽度,这意味着它们将采用子元素的宽度.类似地,添加display: table会有类似的结果.