CSS边距计算

Question

4

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

我经常对浏览器实际呈现的方式感到困惑。例如，像填充在边框内一样，但外边距是如何计算的？它是相对于盒子边框还是相对于屏幕计算的？如果我们同时给出左右外边距，哪个优先级更高？如果有宽度以及左/右外边距，实际呈现过程是怎样的，比如先制作盒子的宽度，然后是填充，还是其他什么？

添加float属性到这个带有外边距的盒子会有什么不同？

- copenndthagen

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

2个回答

2

"例如，像填充在边框内部一样，但是边距如何计算？"

"这是相对于盒子边框还是相对于屏幕？"

边距的计算与边框和屏幕无关。浏览器会单独计算边距的值，然后决定如何应用（呈现）它。

如果我们同时给左右两个边距，哪一个会优先生效？

你能给出一个具体的例子吗？

如果有宽度以及左/右边距，实际渲染会如何进行？是先确定盒子的宽度，然后再添加填充吗？还是其他的方式？

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

“在这个带有margin的盒子中加入float属性会有什么区别呢？”

边距的使用值等于计算出的值，但是任何计算为'auto'的边距的使用值为'0'。

- Šime Vidas

实际上，我已经阅读了您提供的盒模型链接，并发现其中的示例非常混乱和复杂。我在这里提出了这个问题，因为我正在寻找一个更简单和基础的示例以更好地理解。 - copenndthagen

@test 你提出了一个非常笼统的问题（“边距是如何工作的”），因此我只能给你一个笼统的答案。你能否定义一个具体的例子（HTML代码+CSS代码）？那么我就可以详细地解释了... - Šime Vidas

我只是想了解CSS边距在不同情况下的计算方式，例如填充始终相对于内容框计算，类似地，我想了解边距计算。 - copenndthagen

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Madara's Ghost · Accepted Answer

这个盒子由4个尺寸组成，从外到内依次为：

下面是一张示意图： enter image description here

浮动元素会考虑margin，因此如果你有如下代码：

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

这将使其向左浮动，但会从左侧保留100px的边距。