[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，取消重叠，不合并