margin

元素尺寸：border-box DOM屬性裏的offsetWidth 和offsetHeight

元素內部尺寸： padding-box DOM屬性裏的clientWidth 和 clientWidth

元素外部尺寸： margin-box 理解為元素占據的空間尺寸。-margin

元素設定了 width 值或者保持“包裹性”的時候，margin 對尺寸沒有 影響，只有元素是“充分利用可用空間”狀態的時候，margin 才可以改變元素的可視尺寸。

小技巧

實現背景色

（1）設置display:table-cell ,但最多三欄

（2）使用border邊框模擬 border-bottom: 9999px solid transparent ie7+且不支持百分比

（3）使用margin-bottom和-margin-bottom設置-9999px 9999px配合父級的overflow:hidden

margin百分比值

不論水平方向還是垂直方向都是相對於寬度計算

--margin合並

（1）塊級元素，不包括浮動和絕對定位元素

（2）不考慮writing-mode的情況下，只發生在和當前文檔流垂直的方向上

發生的場景

（1）兄弟元素之間

（2）父元素包含的第一個子元素或最後一個子元素的margin-top和margin-bottom

（3）空塊級元素的合並margin-top和Margin-bottom合並

計算規則

負負值相加取絕對值大的

對於margin:0的審視

對於絕大多數網站可以進行設置，但如果網站主要用來展示圖文，則統一標簽的margin,不要一股腦設置成0

大膽的使用：

.list{
  margin-top:15px;
  margin-bottom:15px;
}

而不是

.list{
  margin-top:15px;
}

這樣設置能有有效的提升容錯率

margin:auto

用來計算對應方向應該獲得的剩余空間的大小

不僅僅可以居中，也可以通過設置margin-left:auto或者margin-right:auto來居左或者居右

觸發的前提條件，width:auto或者height:auto,而height:auto元素不會自動的填充，因此無法觸發垂直方向的居中

垂直居中的方式

父級元素設置position:relative 子元素設置：absolute width及height 在設置margin:auto

CSS進階（四）margin