理解margin

• margin能夠改變容器的尺寸 //元素尺寸分爲可視尺寸，佔據尺寸

　　　　 margin與可視尺寸

　　　　　　1.適用於沒有設定width/height的普通block水平元素

　　　　　　2.只適用於水平方向的尺寸

　　　　應用：一側定寬的自適應佈局，兩端對齊佈局等

　　　　例如：左邊有一張圖片固定寬度，右面有文字，不管怎麼改變文字的寬度，圖片都不會動。

　　　　　　　margin-left:70px

 

　　　　 margin與佔據尺寸

　　　　　　1.block/inline-block水平元素均適用

　　　　　　2.與有沒有設定width/height值無關

　　　　　　3.適用於水平和垂直方向

　　　　應用：滾動容器上下留白：margin:50px 0;

　　　　　　　 多欄或2欄的等高佈局等

---

• margin與百分比單位

　　　 　普通元素百分比和絕對定位元素百分比

　　　　　　1.普通元素百分比margin都是相對於容器的寬度計算的

　　　　　　2.position:absolute絕對定位元素百分比margin是相對於第一個定位祖先元素

　　　　　　　（relative/absolute/fixed）的寬度計算的

　　　　應用：寬高2:1自適應矩形

---

• margin重疊

　　　　 margin重疊發生在：block水平元素

　　　　　　　　　　　　   : 只發生在垂直方向（margin-top/margin-bottom）

 

　　　　 margin重疊情境：相鄰兩個元素

　　　　　　　　　　　　  父與子第一個或最後一個

　　　　　　　　　　　　  空block元素

 

　　　　 幹掉margin-top重疊：父元素非塊狀格式化上下文元素—>overflow:hidden

　　　　　　　　　　　　　　   父元素沒有border-top設置

　　　　　　　　　　　　　　   父元素沒有padding-top值

　　　　　　　　　　　　　　   父元素和第一個子元素之間沒有inline元素分隔

 

　　　　 幹掉margin-bottom重疊：父元素非塊狀格式化上下文元素—>overflow:hidden

　　　　　　　　　　　　　　　　    父元素沒有border-top設置

　　　　　　　　　　　　　　　　    父元素沒有padding-top值

    　　　　　　　　　　　　　　     父元素和第一個子元素之間沒有inline元素分隔

　　　　　　　　　　　　　　　　    設置高度

 

　　　　 幹掉空block元素重疊：元素不能有borde設置

　　　　　　　　　　　　　　   元素不能有padding

　　　　　　　　　　　　　　   不能有inline元素

　　　　　　　　　　　　　　   不能有height

 

　　　　 margin重疊計算規則：正正去大值

　　　　　　　　　　　　　　   正負值相加

　　　　　　　　　　　　　　   負負最負值

---

• margin：auto 自動填充 用來分配剩餘空間的

 

　　　　爲何圖片margin：0 auto不水平居中？

　　　　答：由於此時圖片是inline水平，就算沒有width，它也不會佔據整個容器

　　　　　　只要設置display：block，不設置width，也會佔據整個容器

 

　　　　 垂直方向margin實現居中：1.writing-mode：vertical-1r ; margin：auto

　　　　　　　　　　　　　　　　   2.position:absolute；margin：auto

---

• margin負值定位

　　　　 margin負值下的等高佈局：margin-bottom：負值； //改變元素佔據空間的大小

　　　　　　　　　　　　　　　　   padding-bottom：正值； //填充缺失的空間

 

　　　　 margin負值下的兩欄自適應佈局：float：left

　　　　　　　　　　　　　　　　　　　   margin-left：-150px

---

• margin無效情形

　　　　1.內聯元素

　　　　2.重疊

　　　　3.display：table-cell/table-row等

---

• margin-start和margin-end