CSS保证金计算

Question

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

我经常感到困惑，这是如何实际上由浏览器呈现的。例如。像填充一样在边界内，但边距是如何计算的？ 它是关于盒子边框还是关于屏幕？ 如果我们给出左右边距，那么优先级高的是什么？ 如果有宽度和左/右边距，实际的渲染是如何进行的，就像是首先制作的盒子的宽度，然后是填充或它是什么样子？

将浮动属性添加到此框的边距使之有什么区别？

Answer 1

盒由4种尺寸：外到内：

1. 保证金 - 这是从父的空间，它与父的填充堆叠。
2. 边境 - 这就是边框的宽度，它可以与border:或border-width:
3. 填充指定 - 这是箱内的空间，如果任何内容/那盒子里面的元素将被从其侧面间隔这一点。 -
4. 宽度实际框的宽度，如在width:或max-width:

指定的图像出于说明根据内容可改变，100％，或一个固定的宽度：

---

甲浮动元素需要考虑余量，所以如果你有

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

它会向左浮动，但从左侧开始有100px的余量。

Answer 2

“例如，像填充是在边界内，但是如何计算边距？”

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

---

“是不是WRT框边框或相对于屏幕？”

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

---

“如果我们给出左右边距，那么会有更高的优先级？”

算法在这里指定：http://www.w3.org/TR/css3-box/#blockwidth

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

---

“如果有一个宽度，以及左/右页边距，如何实际呈现举行喜欢的是框的宽度由第一，然后填充或者是什么样的？”

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

---

“没有一个浮动的属性添加到该框缘有什么区别？”

阅读这里：http://www.w3.org/TR/css3-box/#floating

边缘的使用值等于所计算的值， 不同之处在于计算为“自动”的任何页边空白的使用的值是“0”。