[toc] ## 1. margin與容器的尺寸 ### 1.1 margin與可視尺寸 特性： - 適用于沒有設定width/height的普通block元素 - 只適用于水平方向尺寸 應用：一側定寬自適應 ```html <img width="150px" style="float:left"> <p style="padding-left:170px;">圖片左浮動....</p> ```  ### 1.2 margin與占據尺寸 特性： - block、inline-block水平元素均適應 - 與有沒有設定width、height值無關 - 適應于水平方向和垂直方向 應用：滾動容器內上下留白 ```html <div style="height:200px;"> <img height="300" style="margin:50px 0;"> </div> ``` ## 2. margin與百分比單位 **百分比margin的計算規則** - 普通元素的百分比margin：都是相對于容器的寬度計算的。比如：`img {margin: 10%;}`  - 絕對定位元素的百分比margin：相對于第一個定位祖先元素(relative、absolute、fixed) **應用** 寬高2:1自適應矩形 ```css .box { background-color: olive; overflow: hidden; } .box > div { margin: 50%; } ```  ## 3. 正確看待CSS的margin重疊 ### 3.1 margin重疊通常特性 1. block水平元素（不包括float和absolute元素） 2. 不考慮writing-mode，只發生垂直方向（margin-top/margin-bottom） ### 3.2 margin重疊的3種情景 1. 相鄰的兄弟元素 2. 父級和第一個/最后一個子元素 3. 空的block元素 ### 3.3 父子margin重疊其他條件 **margin-top重疊** |margin-top重疊|解決| |:-----------------|:----------------| |父元素非塊狀格式化上下文元素| 設置父元素overflow：hidden| |父元素沒有border-top設值| 設置父元素border| |父元素沒有padding-top值| 設置父元素padding-top| |父元素和第一個子元素之間沒有inline元素分隔|插入一個內聯元素如空格`&bsp;`| **margin-bottom重疊** 1. 父元素非塊狀格式化上下文元素 2. 父元素沒有border-bottom設置 3. 父元素沒有padding-bottom值 4. 父元素和最后一個子元素之間沒有inline元素分隔 5. 父元素沒有height相關聲明 ### 3.4 空block元素margin重疊 條件限制： 1. 元素沒有border設置 2. 元素沒有padding值 3. 里面沒有inline元素 4. 沒有height、或者min-height ### 3.5 重疊的計算規則 1. 正正取大值 2. 正負值相加 3. 負負最負值 ## 4. 理解CSS中的margin:auto margin:auto的作用機制：自動分配剩余空間 ### 4.1 垂直居中方法 **writing-mode** 更改流為垂直方向，但是水平居中失效 ```css .father { height:200px; width:100%; writing-mode:vertical-lr; } .son { height:100px; width:500px; margin:auto; } ```  **絕對定位元素的margin:auto居中** ```css .father { height:200px; position:relative; } .son { position:absolute; top:0; right:0; left:0; bottom:0; height:100px; width:500px; margin:auto; } ```  ## 5. margin負值定位 ### 5.1 margin負值下的兩端對齊 利用特性：margin改變元素寬度  ### 5.2 margin負值下的登高布局 利用特性：margin改變元素占據空間  缺點：有副作用，有點：支持IE6 ### 5.3 margin負值下的兩欄自適應布局 利用特性：元素占據空間跟隨margin移動  優點：DOM順序和最終視覺順序相符 ## 6. margin無效情形解析 **inline水平元素的垂直margin無效** 2個前提： 1. 非替換元素，不是<img>元素 2. 正常書寫模式 **margin重疊** **display：table-cell與margin** display：table-cell、display：table-row等聲明的margin無效！ ## 7. 了解margin-start/margin-end屬 ### 7.1 -webkit-margin-start、-webkit-margin-end - 正常的流向，margin-start等同于margin-left，兩者重疊不累加 - 如果水平流是從右往左，margin-start等同于margin-right - 在垂直流下（writing-mode:vertical-*;）,margin-start等同于margin-top ### 7.2 margin-collaps ```css -webkit-margin-collaps: <collaps> | <discard> | <separate> ``` - collaps,默認，重疊 - discard，取消重疊，使margin無效 - separate，取消重疊，不合并