CSS 边距计算答案

【问题标题】：CSS Margin calculationCSS 边距计算
【发布时间】：2011-08-27 13:42:32
【问题描述】：

虽然我在理论上理解整个 CSS 框模型，如填充、边框、边距，但我的理解仅限于这些单独的部分。

我经常对浏览器实际呈现的方式感到困惑。例如。就像填充在边界内一样，但是边距是如何计算的？它是框边框还是相对于屏幕？如果我们同时给出左右边距，什么优先级更高？如果有宽度和左右边距，实际渲染是如何发生的，首先是盒子的宽度，然后是填充还是它是什么样的？

在这个有边距的盒子上添加浮动属性有什么不同？

【问题讨论】：

我认为您应该在 W3C 网站上详细阅读此内容（我假设您只关心 W3C 标准）。如果有人回答了这些问题，你会有更多的问题，所以最好自己阅读。 w3.org/TR/CSS2/box.html

标签： html css

【解决方案1】：

盒子由4种尺寸组成：从外到内：

用于说明的图像：

浮动元素会考虑边距，所以如果你有

#element { margin-left: 100px; float: left; }

它将向左浮动，但距左侧有 100 像素的边距。

【讨论】：

【解决方案2】：

“例如，内边距在边框内，但边距如何计算？”

“是边框还是屏幕？”

边距的计算独立于边框和屏幕。浏览器分别计算边距的值，然后决定如何应用（渲染）。

“如果我们同时给出左右边距，什么优先级更高？”

你能举个具体的例子吗？

“如果有宽度和左右边距，实际渲染是如何进行的，首先是盒子的宽度，然后是填充还是什么？”

渲染几乎是瞬时的，所以重要的是最终结果，而不是浏览器渲染元素属性的顺序。

“在这个有边距的盒子上加一个浮点属性有什么区别？”

边距的使用值等于计算值，除了计算为“auto”的任何边距的使用值为“0”。

【讨论】：

实际上我已经浏览了你给出的盒子模型链接，发现它与他们给出的例子非常混乱和复杂......我在这里问了这个问题，因为我正在寻找一个更简单和基本的例子，以便更好地理解..
@test 您问了一个非常笼统的问题（“边距如何工作”），所以我只能给您一个笼统的答案。您能否定义一个具体示例（HTML 代码 + CSS 代码）？那我就可以详细解释了……
嗯，我只是想了解在各种情况下计算 css 边距的方式..比如如何始终计算填充到内容框..同样我想了解边距计算..