CSS保证金计算

Question

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

我常常对浏览器实际呈现的方式感到困惑。例如。就像填充是在边界内，但是如何计算保证金？ 是框边框还是屏幕边框？ 如果我们给出左右边距，那么优先级更高？ 如果有宽度以及左/右边距，实际渲染是如何进行的，就像首先制作的框的宽度，然后是填充或它是什么样的？

使用margin make为此框添加了float属性有什么区别？

Answer 1

该框由4种尺寸组成：从外到内：

1. 保证金 - 这是父母的空间，它与父母的填充堆叠。
2. 边框 - 这是边框的宽度，可以使用border:或border-width:
指定
3. 填充 - 这是盒子内的空间，如果该盒子内的任何内容/元素将从其两侧间隔开。
4. 宽度 - 实际包装箱的宽度，可能会根据内容，100％或width:或max-width:
中指定的固定宽度而变化

用于说明的图片：

---

浮动元素考虑了保证金，所以如果你有

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

它将向左浮动，但从左侧开始有100px的边距。

Answer 2

“例如，填充是在边界内，但是如何计算保证金？”

研究这个：http://www.w3.org/TR/css3-box/#margins

---

“它是框边框还是相对于屏幕？”

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

---

“如果我们同时给出左右边距，那么什么需要更高的优先权？”

此处指定了算法：http://www.w3.org/TR/css3-box/#blockwidth

你能给出具体的例子吗？

---

“如果有宽度以及左/右边距，实际渲染是如何进行的，就像首先制作的框的宽度，然后填充或它是什么样的？”

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

---

“浮动属性添加到此框的边缘有什么区别？”

请在此处阅读：http://www.w3.org/TR/css3-box/#floating

  

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