css------margin系列问题

一.margin与百分比问题：

1. 普通元素的百分比margin都是相对于容器宽度计算的；
2. 绝对定位的百分比margin是相对于第一个定位祖先元素（relative/absolute/fixed）的宽度计算的；

二.margin重叠问题：

1. 特性：block水平元素（不包括float和absolute元素）；
2. 不考虑writing-mode，只发生在垂直方向的（margin-top/margin-bottom）；
3. 重叠的三种情况：（1）相邻的兄弟元素；（2）父级和第一个/最后一个子元素；（3）空的block元素；

三.margin重叠三种情况的具体展现：

1. 父子margin重叠的条件：margin-top： （1）父元素非块状格式化上下文              解决方法：  父元素中加入：overflow：hidden;

                                                             （2）没有border-top设置                                     设置border-top;

                                                             （3）没有padding-top值                                      设置padding-top;

                                                             （4）父元素和第一个子元素之间没有inline元素分隔       <div class="father">&nbsp</div>

                                         margin-bottom:前四个与margin-top一致

                                                              （5）没有height/min-height/max-height限制         设置height元素；

     2.空block元素margin重叠：例：

.father(background:#f0f3f9;overflow:hidden;)
.son(margin:1em 0;)

<div class="father">
<div class="son"></div>   <!--高度只有1em，而非2em；-->
</div>

    空block元素margin重叠的条件：     （1）元素没有border设置

                                                   （2）元素没有padding值

                                                   （3）里面没有inline元素

                                                   （4）没有height或min-height

四.margin重叠的计算：（1）正正取大值（2）正负值相加（3）负负最负值

五.善用margin重叠：

     例表单列表可用

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

更具健壮性，最后一个元素移除或位置调换均不破坏原来的布局；

六.margin：auto;问题：

1. 若原本应该填充的尺寸被width/height所强制更改；而margin：auto就是为了填充这个变更的尺寸设计的；
2. 若一侧为定值（margin-right:100px;），另外一侧为auto（margin-left:auto;）则auto为剩余的空间，例width：500px，则auto为剩余的（500-100）px；
3. 若两侧都为auto，则平分剩余空间（居中显示）；

     问题1：为什么图片margin: 0 auto;不水平居中：

                 img{width:200px;margin:auto 0;}

 

 

              因为此时图片是inline水平，就算没有width，其也不会占据整个容器；

             可以更改为：

       img{display:block;width:200px;margin:auto 0;}

 

   问题2：容器定高，元素定高，margin:auto 0;无法垂直居中

例      

          .father{height:200px;background:#f0f3f9;}

         .son{height:100px;width:500px;margin:auto 0;}

       可改为

 .father{height:200px;background:#f0f3f9;writing-mode:vertical-lr;}

 .son{height:100px;width:500px;margin:auto 0;}

 

也可以改为：

 .father{height:200px;background:#f0f3f9;position:relative;}

         .son{position:absolute;top:0;left:0;bottom:0;right:0;height:100px;width:500px;margin:auto 0;}