CSS为什么宽度错误？

Question

我有一个如下的网页（请参见img）

某个div的宽度为100％，它会填充整个视口。

在Chrome上进行检查时，视口大小为500px，而CSS大小为536。

有人知道为什么它与众不同吗？

谢谢。 干杯，

Answer 1

许多现代可视化技术（例如，视差）需要比实际视口大小更大的元素以及对transform属性的巧妙使用才能创建特定的视觉效果和/或幻觉。

您的图片实际上是显示父元素的一部分，该元素显示了此类技术特有的属性，清楚地显示了-webkit-logical-width:800px和perspective-origin: 400px 300px。

对于具有position值而不是fixed的任何元素，width:100%通常会导致子元素与父元素（而不是视口）的width相等。但是，此规则有一些例外。

如果您需要更深入的说明，为什么父级的宽度不同于视口（宽度是父级的父级，依此类推……一直到视口），则需要发布Minimal, complete and verifiable example，我将放下影响其width的元素的每个祖先。

如果相反，如果您真的不需要知道父级发生了什么，但是正在寻找一种方法来使当前元素与视口一样宽，则可能要给它一个width值的100vw。