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

我读的CS埃里克迈耶权威指南。在页162上，它表示以下内容：CSS - “块级元素框的水平分量之和总是等于父级的宽度？”

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

我发现在W3C规范类似通道：

的水平位置和尺寸的非浮动，块级元素是由七个属性确定：“利润率左”，'左边界“，”左侧填充“，”宽度“，”填充右侧“，”边界右侧“和”边距右侧“。这七个和总是等于父元素的'宽度'。

但是，我可以想到一个非常简单的情况，其中上述规则不适用。

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

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

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

来源

2013-12-22 Romed7442

你不应该阅读CSS1的老规格，除了好奇，因为你可以在你的链接页面上冲箱读取。 CSS2.1定义好这样的情况：在paragraph 10.3.3你可以阅读，这样的配置被称为过度约束，为了使真正平等的一个水平边距被忽略，并设置为一个值。如果写作模式是从左到右，则选择正确的一个，否则将是左侧。

来源

2013-12-22 10:35:25

我认为你是正确的，右边距被设置为负利润率，使真正的平等。我只是感到困惑，因为在Chrome检查员，它并没有这样说。不知道为什么。 – Romed7442

@ctcworks这是因为Chrome和我知道的其他每个开发工具都会显示*计算值*，但如果您阅读[第10.3节]（http://www.w3.org/TR/CSS21/visudet.html#Computing_widths_and_margins）你会注意到它没有改变，它的*使用值*发生了变化，而且目前还没有浏览器实现[允许获取它的API]（http://dev.w3.org/csswg/cssom/）＃DOM-getstyleutils-usedstyle）。 –

谢谢！你节省了我很多时间！ – Romed7442

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

来源

2013-12-22 10:36:41 Mackan

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

回答

相关问题