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」。