为什么我的 CSS 宽度不能产生正确的结果？

Question

我有一个网页如下（见图）。

某个 div 的宽度为 100%，填充了整个视口。

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

这是为什么？

Answer 1

许多现代可视化技术，例如视差，需要比实际视口尺寸更大的元素，并巧妙地使用

transform

属性，以创建特定的视觉效果和/或错觉。

您的图片实际上显示了父元素的一部分，显示了此类技术特有的属性，清楚地显示：

-webkit-logical-width:800px

和

perspective-origin: 400px 300px

。

对于具有除

position

之外的

fixed

值的任何元素，

width:100%

通常会导致子元素与父元素（而不是视口）具有相等的

width

。不过，这条规则也有明显的例外。

如果您需要更深入的解释为什么父级的宽度与视口不同（以及它的父级父级，等等...... - 一直到视口），您需要发布 最小、完整且可验证的示例，我将列出影响其元素的每个祖先

width

。

相反，如果您真的不需要知道父级发生了什么，而是正在寻找一种方法使当前元素与视口一样宽，那么您可能需要为其指定宽度值

 100vw

。