margin深入理解

一、  使用场景：

1.  一侧定宽的自适应布局
2.  两端对齐布局
3.  等高布局

二、 margin百分比单位：

   普通元素的百分比margin都是相对于容器的宽度计算的，例如div的width:300px;则margin:10%,则 代表margin的上下左右都是30px;
   绝对定位元素的百分比margin是相对于第一个定位祖先元素（relative/absolute/fixed）的宽度计算的；

三、应用场景： a.宽高2:1自适应矩形；

四、margin重叠通常发生的情况：

   block 水平元素（不包括float和absolute元素）；
   不考虑writing-mode，只发生在垂直方向（margin-top/margin-bottom）；（writing-mode可 以使文字垂直方向显示）

五、margin重叠的3种情景：

   相邻的兄弟元素，例如两个p元素的margin:1em,理论p的间距应该为2em，实际则为1em,
   父级和第一个/最后一个元素，  
   空的block元素，

六、解决父级和第一个/最后一个元素margin重叠的问题：

    1、在父级上添加overflow：hidden属性
   2、若存在border：1px solid #DDD;/padding:1px; 则可以解决重叠
   3、可以在第一个元素之前加上空格 或者给父级添加上height

七、空block元素margin重叠条件：

   1、元素没有border/padding/inline设置
   2、没有height/min-height

八、margin:auto的机制：

 auto属性默认的是对整个容器进行分配，解决办法：
 水平方向若为行内元素，则将display设置为block显示，则auto可产生垂直方向若父级高度设定，子级元素的高度小于父  级，则可生效；若子级元素大于父级元素，则auto 失效，因为margin 为负值，不能产生效果。

九、垂直方向的的垂直居中：

  writing-mode更改流为垂直方向，实现垂直方向的margin：auto 居中;
  使用absolute，则可以使用margin：auto居中；

十、margin 无效情况解析：

   1、inline水平元素的垂直margin无效
   2、display：table-cell/display:table-row等声明的margin无效
   3、margin重叠

 4、position ：absolute和margin

 5、内联特性导致的margin无效

十一、关于margin-start 和margin-end

 1、margin-start存在兼容性问题，需写兼容性，效果等同于margin-left，此为正常流向；

2、从右向左流向时候，margin-start等同于margin-right；

3、垂直流向时候，margin-start等同于margin-top。

 同上，则 margin-end同理。