拿这个简单的HTML:
#parent {
background: pink;
}
#child {
width: 5000px;
}
Hello
该#parent元素的粉红色的背景并不在整个坚持#child元素.为什么是这样？
在body元素上设置背景确实适用于整个#child,即使#parent并且body共享相同的宽度,即视口宽度.
奇怪的是,设置#parent元素的显示来inline-block 修复这个问题,虽然我不明白为什么!
这里的任何帮助将不胜感激:)
在
#parent那粉红的背景并不在整个坚持#child.为什么是这样？
这是因为块级元素的默认宽度为100%.在这种情况下,它具有的宽度100%的的body元素,这是相同的视口.
换句话说,即使元素的子元素的宽度为5000px,但它仍然具有100%视口的宽度,这意味着背景将不会延伸以覆盖子元素.这不适用于body元素的原因是因为body元素是一种特殊情况,并且值被视为在根元素上指定它们.看到:
3.11.2.画布背景和HTML
元素该
body元素的背景属性的已使用值是它们的初始值,并且传播的值被视为在根元素上指定它们.
奇怪的是,设置
#parent显示以inline-block解决这个问题,虽然我不明白为什么!
那是因为它不再是宽度为的块级元素100%.此外,inline-block元素具有"缩小到适合"的宽度,这意味着它们将采用子元素的宽度.类似地,添加display: table会有类似的结果.
京公网安备 11010802040832号 | 京ICP备19059560号-6 