深入理解margin

Posted 2020-10-17 niusan

1,margin与容器的尺寸
   元素的尺寸包括
          1，可视尺寸
         适用于没有设定width、height的普通block水平元素。
         只适用于水平方向尺寸 ：一侧定宽自适应布局     
                        <img width="150px" style="float:left;">
                        <p style="margin-left: 170px;"></p>
          2，占据尺寸
               实现滚动容器的上下留白
               margin :50px;使用padding的话只有chrome底部留白   
2，margin 与百分比单位
      普通元素的百分比margin都是相对于容器的宽度计算的。
      绝对定位元素的百分比margin是相对于第一个定位祖先元素（relative/absolute/fixed）的宽度计算的。
            自适应的矩形
3，css的margin的重叠
      margin重叠通常特性：1，block水平元素（不包括float和absolute元素）
                     2，不考虑writing-mode，只发生在垂直方向（margin-top,margin-bottom）
      margin重叠3种情景
         1，相邻的兄弟元素的margin重叠
         2，父级和第一个/最后一个子元素
            干掉margin-top重叠
               1，父元素非块状格式化上下文元素 margin-top
               2，父元素没有border-top设置
               3,父元素没有padding-top值
               4，父元素和第一个子元素之间没有inline元素分割。
         3，空的block元素
               空block元素margin重叠其他条件
                  1，元素没有borde设置
                  2，元素没有padding值
                  3，里面没有inline元素
                  4，没有height或者min-height
         margin重叠的计算规则：正正取大值。正负值相加，负负取最负。
         margin善用重叠
         .list { margin-top:15px; margin-bottom:15px; } 更具有健壮性，最后一个元素移除或尾椎调换，均不会破坏原来的布局。
4，css中的margin auto
      如果一侧是定值，一侧是auto，auto为剩余空间大小；如果两侧均是auto,则平分剩余空间。auto就是分配剩余空间的。
      图片为何不居中显示?   img { width:200px; mrgin: 0 auto; } 此时图片是inline水平，就算没有width,其也不会占据整个容器。
                     img {display:block; width:200px; margin: 0 auto; } 因为此时图片是block水平，就算没有width,也会占据整个容器。
      writing-mode与垂直居中

      .father { height:200px; width100%; wrinting-mode:vertical-lr; } /*更改流为垂直方向，实现垂直方向上的margin:auto;*/
      .son {height:100px; width:500px; margin: auto;}

      决定定位元素与margin居中 (IE8+) 
      .father { height:200px; position:relative; }
      .son { position:absolute; top:0; right:0; bottom: 0;left:0;width:500px;height:100px; margin:auto; background-color: yellow;}
5，CSS margin负值定位
      1，margin负值下的两端对齐
         .box {width: 1200px;margin:auto;background: orange;}
         .ul {overflow: hidden;margin-right: -20px;}
         .li {width: 386.66px;height: 300px;margin-right: 20px;background: green;float: left;}
            <div class="box">
               <div class="ul">
                  <div class="li">列表1</div>
                  <div class="li">列表2</div>
                  <div class="li">列表3</div>
               </div>
            </div>
      2，margin负值下的等高布局
      .box {overflow: hidden;resize: vertical;}
      .left,.right {margin-bottom: -600px;padding-bottom: 600px;}
      .left{float: left;background: orange;width:50%;height: 40px; }
      .right{float: left;background: green;width: 50%;height:30px;}
      3,margin负值下的量看自适应布局，元素占据空间跟随margin移动，优点：DOM顺序与最终视觉顺序相等;
      <div style="float: left; width: 100%">
         <p style="margin-right: 170px;">图片右浮动。。</p>
      </div>
      <img src=""  style="float: left;margin-left: -150px;">
6,margin无效情形解析
   1，inline水平元素的垂直margin无效
   2，margin重叠
   3，display:table-cell与margin
      display：table-cell/display:table-row等声明的margin无效;
      例外：<img src="" > 
         <button ></button>firefox:table-cell类型in-lineblock的渲染行为，IE：table-cell类型也是table-cell的渲染行为;
   4,绝对定位元素非定位方位的margin值“无效”; 
   5，“鞭长莫及”：浮动和定位破坏了页面的布局。margin-left不够大；
   6，内联特性导致的margin无效
7，margin-start 表示的是当前文档流开始方位的margin值;
      正常的流向等同于margin-left;从右向左等同于margin-right;垂直流等同于margin-top;
      (webkit------------margin-before,margin-bottom)
   margin-collapse ：collapse(默认-重叠) discard(取消) separate(分隔)  控制margin重叠
   -webkit-margin-collapse: