Chrome Inspector 显示的页面宽度与监视器不同

【问题标题】：Chrome Inspector shows different width of page than is monitorChrome Inspector 显示的页面宽度与监视器不同
【发布时间】：2017-05-09 17:58:19
【问题描述】：

为什么 Chrome 中的 Dev Inspector 显示 100% 宽度页面的宽度与我在显示器上显示的宽度不同？我有 1920x1080 显示器，在全屏模式下我没有得到 1920，但只有 1519 像素。该数字随缩放而变化。这背后的原因是什么？当我没有关于宽度的正确信息时，很难对样式进行编码。

【问题讨论】：

你能链接到我可以复制的页面吗？

标签： html google-chrome google-chrome-devtools

【解决方案1】：

当您在 CSS 中为元素指定 100% 的宽度时，您基本上是在说“使该元素的内容区域与其父元素的显式宽度完全相等——但前提是其父元素具有显式宽度。”因此，如果您有一个 400 像素宽的父容器，那么一个宽度为 100% 的子元素也将是 400 像素宽，并且仍然会受到边距、填充和边框的影响——在 100% 宽度设置之上。

【讨论】：