CSS - “块级元素框的水平分量之和总是等于父元素的宽度？”答案

【问题标题】：CSS - "The sum of the horizontal components of a block-level element box always equals the width of the parent?"CSS - “块级元素框的水平分量之和总是等于父元素的宽度？”
【发布时间】：2013-12-22 18:36:41
【问题描述】：

我正在阅读 Eric Meyer 的 CSS The Definitive Guide。在第 162 页，它说：

几乎同样简单的规则是，正常流中块级元素框的水平分量之和始终等于父元素的宽度。

我在W3C规范中找到了类似的段落：

非浮动块级元素的水平位置和大小由七个属性决定：'margin-left'、'border-left'、'padding-left'、'width'、'padding-right '、'border-right' 和 'margin-right'。这七个之和总是等于父元素的“宽度”。

但是，我可以想到一个非常简单的情况，上面的规则不成立。

# HTML
<div><p>This is a paragraph.</p></div>

# CSS
div { width: 200px; }
p { width: 300px; }

显然我可以设置overflow 来包含p 元素。但是我只想知道我是否错误地解释了规则？

【问题讨论】：

标签： css w3c specifications

【解决方案1】：

您不应该阅读 CSS1 的旧规范，除非出于好奇，因为您可以在您链接的页面上的红色框中阅读。 CSS2.1 很好地定义了这种情况：在paragraph 10.3.3 中，您可以读到这种配置称为过度约束，一个水平边距被忽略并设置为一个值以使相等为真。如果书写方式是从左到右，则选择右边的，否则为左边的。

【讨论】：

我认为右边距设置为负边距以使相等是正确的。我只是感到困惑，因为在 Chrome 检查器中并没有这么说。不知道为什么。
@ctcworks 那是因为 Chrome 和我知道的所有其他开发工具都向您展示了 计算值，但是如果您阅读 paragraph 10.3，您会注意到它并没有改变，它是 used value 发生变化，目前没有浏览器实现API that allows to get it。
谢谢！你为我节省了大量时间！

【解决方案2】：

我认为这意味着“100% 的子元素始终等于父元素的宽度”。显然，如果您将宽度设置为更小/更大的值，它会有所不同。但除非特别设置，否则它会继承相同的宽度。

【讨论】：