outWidth不在标准之中,outWidth不在标准之中

1.css margin足以改变容器的尺码
  成分尺寸
  可视尺寸–标准盒子模型中盒子的增长幅度是不包涵margin值的,clientWidth
  占据尺寸–包涵margin的增加率
outWidth不在标准之中,jquery中有相对应的办法

1.css margin足以变动容器的尺码
  成分尺寸
  可视尺寸–标准盒子模型中盒子的上升幅度是不包括margin值的,clientWidth
  占据尺寸–包蕴margin的宽度
outWidth不在标准之中,jquery中有相对应的办法

  margin与可视尺寸
    1.1施用12分与没有设定width/height的普通block水平成分
    2.1只适用于水平方向尺寸
    <body style=”background-color:#1a2b3c”>
      <div style=”border:4px 6px; background-color:blue”>
        文字<br />
        文字<br />
      </div>
    </body>
    当改变margin值时盒子的幅度会变卦。

  margin与可视尺寸
    1.1行使相当与没有设定width/height的普通block水平成分
    2.叁头适用于水平方向尺寸
    <body style=”background-color:#1a2b3c”>
      <div style=”border:4px 6px; background-color:blue”>
        文字<br />
        文字<br />
      </div>
    </body>
    当改变margin值时盒子的幅度会变动。

    应用 :完毕一侧定宽的自适应布局
      <img width=”150px” style=”float:left;”>
      <p style=”margin-left:170px”>图片左浮动</p>

    应用 :完毕一侧定宽的自适应布局
      <img width=”150px” style=”float:left;”>
      <p style=”margin-left:170px”>图片左浮动</p>

    margin与占用尺寸
    1.block/inline-block品位成分均适用
    2.与从不设定width/height值非亲非故
    3.适用于水平方向和垂直方向
    例
      <body style=”background-color:#1a2b3c”>
        <img style=”marign-bototm:-50″>
      </body>
    能够看出容器占据的尺码变小了。
    利用这一风味
    滚动容器内上下留白
      <div style=”height:100px; padding:50px 0;”>
        <img height=”300″>
      </div>
    里面盒子撑开外面盒子呈现滚动条,当然那在非chrome浏览器中是不曾留白效果的(上边有上面没有)。
    正确的做法是
    <div style=”height:100px; “>
      <img height=”300″ style=”marign:50px 0″>
    </div>

    margin与占用尺寸
    1.block/inline-block品位成分均适用
    2.与没有设定width/height值无关
    3.适用于水平方向和垂直方向
    例
      <body style=”background-color:#1a2b3c”>
        <img style=”marign-bototm:-50″>
      </body>
    能够见见容器占据的尺码变小了。
    利用这一表征
    滚动容器内上下留白
      <div style=”height:100px; padding:50px 0;”>
        <img height=”300″>
      </div>
    里面盒子撑开外面盒子呈现滚动条,当然那在非chrome浏览器中是从未留白效果的(上边有上边没有)。
    正确的做法是
    <div style=”height:100px; “>
      <img height=”300″ style=”marign:50px 0″>
    </div>

第②话:css margin与比例单位——通晓margin百分比单位
      水平方向百分比/垂直方向百分比
      普通元素百分比/相对成分百分比

其次话:css margin与比例单位——驾驭margin百分比单位
      水平方向百分比/垂直方向百分比
      普通成分百分比/相对成分百分比

      百分比margin的计量规则
        img{margin :10%;with:600px;heigth:200px;}
      普通元素的百分比margin皆以相对于容器的增加率总结的!所以那边的margin:一成;—->top:60px,left:60px;都以绝对与容器的宽窄来测算的。

      百分比margin的测算规则
        img{margin :10%;with:600px;heigth:200px;}
      普通成分的百分比margin都以相对于容器的拉长率总括的!所以那边的margin:一成;—->top:60px,left:60px;都以相对与容器的宽窄来总计的。

      相对定位成分的百分比margin
        img{margin:10%; position:absolute;}
      相对成分的百分比margin是相对与第1个定点成分的上代成分具有(relative/absolute/fixed)的小幅度总计的。普通成分的是相对与父成分的来计量的。
        <div style=”width:1024px;height:200px;
position:relative;”>
          <div style=”width:600px; height:200px”>
           <img style=”margin:10%;position:absolute;”
/>

      相对定位成分的百分比margin
        img{margin:10%; position:absolute;}
      相对成分的百分比margin是相对与第三个稳定成分的先世成分具有(relative/absolute/fixed)的宽度计算的。普通成分的是相对与父成分的来测算的。
        <div style=”width:1024px;height:200px;
position:relative;”>
          <div style=”width:600px; height:200px”>
           <img style=”margin:10%;position:absolute;”
/>

          </div>
        </div>
      利用特色
        宽高2:1自适应矩形
          .box{background-color:olive; overflow:hidden;}
          .box > div{margin:50%}
        那里还论及一个只是点正是margin重叠。那里安装overflow
也是因为制止margin重叠

          </div>
        </div>
      利用特色
        宽高2:1自适应矩形
          .box{background-color:olive; overflow:hidden;}
          .box > div{margin:50%}
        那里还关系叁个只是点就是margin重叠。这里设置overflow
也是因为防止margin重叠

其三话 margin重叠常常性情
  1.block品位成分(不包蕴float和absolute成分)
  2.不考虑writing-mode(文字书写方向是从上到下的),只爆发在笔直方向的(margin-top/margin-bottom)

其三话 margin重叠日常性子
  1.block档次成分(不包括float和absolute成分)
  2.不考虑writing-mode(文字书写方向是从上到下的),只产生在笔直方向的(margin-top/margin-bottom)

  margin重叠3种情境
    1.相邻的兄弟成分
      p{line-height:2em;margin:1em 0;background:#f0f3f9;}
        <p>第一行</p>
        <p>第二行</p>
      那里就会发出margin重叠了
    2.父级和率先个/最终1个子成分
      .father{background:#f0f3f9}
      <div class=”father”>
        <div class=”son”
style=”margin-top:80px;”>son</div>
      </div>
      给子第二个或最终二个子成分设置margin等同于给父成分设置同一的margin值,子元素相同margin,子成分和父元素一样的margin值
    3.空的block元素
      .father{background:#f0f3f9}
      <div class=”father”>
        <div class=”son”></div>
      </div>
      那里son的惊人唯有1em,不是2em
      空block成分margin重叠其余条件
        1.成分尚无border设置
        2.元素没有padding值
        3.之中没有inline成分
        4.没有height,或者min-height

  margin重叠3种情境
    1.相邻的汉子成分
      p{line-height:2em;margin:1em 0;background:#f0f3f9;}
        <p>第一行</p>
        <p>第二行</p>
      那里就会发生margin重叠了
    2.父级和率先个/最终一个子成分
      .father{background:#f0f3f9}
      <div class=”father”>
        <div class=”son”
style=”margin-top:80px;”>son</div>
      </div>
      给子第③个或最终二个子成分设置margin等同于给父成分设置同样的margin值,子成分相同margin,子成分和父成分一样的margin值
    3.空的block元素
      .father{background:#f0f3f9}
      <div class=”father”>
        <div class=”son”></div>
      </div>
      那里son的惊人只有1em,不是2em
      空block元素margin重叠其余标准
        1.成分从未border设置
        2.成分没有padding值
        3.内部没有inline成分
        4.没有height,或者min-height

      margin-top重叠
        1.1父成分非块状格式化上下文成分
        1.2父成分没有border-top设置
        1.3父成分没有padding-top值
        1.4父成分和率先个子成分之间平昔不inline成分分隔

      margin-top重叠
        1.1父成分非块状格式化上下文成分
        1.2父成分没有border-top设置
        1.3父成分没有padding-top值
        1.4父成分和第二个子成分之间没有inline成分分隔

      margin-bottom重叠
        1.1父成分非块状格式化上下文成分
        1.2父成分没有border-bottom设置
        1.3父成分没有padding-bottom值
        1.4父成分和最后一个子成分之间没有inline成分分隔
        1.5父成分没有height,min-height,max-height限制
      干掉margin-top重叠
        .father{background:#f0f3f9}
        <div class=”father”>
          <div class=”son”
style=”margin-top:80px;”>son</div>
        </div>
      1.父元素非块状格式化上下文成分 .father:overflow:hidden;
      2.父成分没有border-top设置
        .father:border:4px solid #ccc;
      3.父成分没有padding-top值
      4.父成分和率先个子成分之间从未inline成分分隔
        <div class=”father”> 
          <div class=”son”
style=”margin-top:80px;”>son</div>
        </div>
        干掉margin-bottom重叠
        前边多少个和margin-top一样,
          <div class=”father”
style=”height:100px”> 
            <div class=”son”
style=”margin-top:80px;”>son</div>
          </div>

      margin-bottom重叠
        1.1父成分非块状格式化上下文元素
        1.2父成分没有border-bottom设置
        1.3父成分没有padding-bottom值
        1.4父成分和终极1个子成分之间从未inline元素分隔
        1.5父成分没有height,min-height,max-height限制
      干掉margin-top重叠
        .father{background:#f0f3f9}
        <div class=”father”>
          <div class=”son”
style=”margin-top:80px;”>son</div>
        </div>
      1.父成分非块状格式化上下文成分 .father:overflow:hidden;
      2.父成分没有border-top设置
        .father:border:4px solid #ccc;
      3.父成分没有padding-top值
      4.父成分和率先个子成分之间从未inline成分分隔
        <div class=”father”> 
          <div class=”son”
style=”margin-top:80px;”>son</div>
        </div>
        干掉margin-bottom重叠
        前边八个和margin-top一样,
          <div class=”father”
style=”height:100px”> 
            <div class=”son”
style=”margin-top:80px;”>son</div>
          </div>

    margin重叠的持筹握算规则
      1.正正取大值
        .a{margin-bottom:50px;}
        .b{margin-top:20px;}
        <div class=”a”></div>
        <div class=”b”></div>

    margin重叠的盘算规则
      1.正正取大值
        .a{margin-bottom:50px;}
        .b{margin-top:20px;}
        <div class=”a”></div>
        <div class=”b”></div>

          .father{margin-top:20px;}
          .son{margin-top:50px;}
      <div class=”father”>
        <div class=”son”></div>
      </div>

          .father{margin-top:20px;}
          .son{margin-top:50px;}
      <div class=”father”>
        <div class=”son”></div>
      </div>

      .a{margin-top:20px;margin-bottom:50px}
      <div class=”a”></div>

      .a{margin-top:20px;margin-bottom:50px}
      <div class=”a”></div>

      上面的结果都以margin:50px;
    2.正负值相加
      .a{margin-bottom:50px;}
      .b{margin-top:-20px;}
      <div class=”a”></div>
      <div class=”b”></div>

      下面的结果都以margin:50px;
    2.正负值相加
      .a{margin-bottom:50px;}
      .b{margin-top:-20px;}
      <div class=”a”></div>
      <div class=”b”></div>

      .father{margin-top:-20px;}
      .son{margin-top:50px;}
      <div class=”father”>
        <div class=”son”></div>
      </div>

      .father{margin-top:-20px;}
      .son{margin-top:50px;}
      <div class=”father”>
        <div class=”son”></div>
      </div>

      .a{margin-top:-20px;margin-bottom:50px}
      <div class=”a”></div>
      下面的结果都以30px
  3.负负最负值
    .a{margin-bottom:-50px;}
    .b{margin-top:-20px;}
    <div class=”a”></div>
    <div class=”b”></div>

      .a{margin-top:-20px;margin-bottom:50px}
      <div class=”a”></div>
      上边的结果都是30px
  3.负负最负值
    .a{margin-bottom:-50px;}
    .b{margin-top:-20px;}
    <div class=”a”></div>
    <div class=”b”></div>

    .father{margin-top:-20px;}
    .son{margin-top:-50px;}
    <div class=”father”>
      <div class=”son”></div>
    </div>

    .father{margin-top:-20px;}
    .son{margin-top:-50px;}
    <div class=”father”>
      <div class=”son”></div>
    </div>

    .a{margin-top:-20px;margin-bottom:-50px}
    <div class=”a”></div>
    上边的结果都以-50px
    margin重叠的含义是?
    网页诞生之初…………只是排版文字布局用,没有后天那般复杂。
      1.连连段落或列表之类,如若没有margin重叠首尾项间距会和其余兄弟标签1:2提到,排版不自然;
      2.web中其他地方嵌套或直接放入任何裸div都不会潜移默化原本的布局
      3.有失的空人三个p成分,不要影响原本的开卷排版

    .a{margin-top:-20px;margin-bottom:-50px}
    <div class=”a”></div>
    上边的结果都以-50px
    margin重叠的含义是?
    网页诞生之初…………只是排版文字布局用,没有今日如此复杂。
      1.老是段落或列表之类,假若没有margin重叠首尾项间距会和此外兄弟标签1:2关联,排版不自然;
      2.web中任何地方嵌套或直接放入任何裸div都不会影响原本的布局
      3.丢掉的空人2个p成分,不要影响原本的读书排版

    实践:
      善用margin重叠
        .list{margin-top:15px;}
      更好贯彻
        .list{
          margin-top:15px;
          margin-bottom:15px;
         }
      更拥有健壮性,最终叁个要素移除或岗位沟通,均不会毁掉原来的布局。
第4话:理解CSS中的margin:auto
    margin:auto 的机制
    成分有时候,就算没有安装width或height,也会自动填写
      div{background:#f0f3f9}

    实践:
      善用margin重叠
        .list{margin-top:15px;}
      更好落到实处
        .list{
          margin-top:15px;
          margin-bottom:15px;
         }
      更具备健壮性,最后三个成分移除或地方沟通,均不会损坏原来的布局。
第4话:理解CSS中的margin:auto
    margin:auto 的机制
    成分有时候,固然没有设置width或height,也会活动填写
      div{background:#f0f3f9}

    假使设置width或height,自动填写特性就会被掩盖
      div{width:500px;background:#f0f3f9;}
      此时的margin值是0px
    要是设置值width或height,自动填写性情就会被遮盖。

    要是设置width或height,自动填写特性就会被遮住
      div{width:500px;background:#f0f3f9;}
      此时的margin值是0px
    借使设置值width或height,自动填写性子就会被遮住。

    原来应该填充的尺码被width/height强制变更,而margin:auto正是为了填充那么些改变的尺寸设置的;
      div{width:500px;marign-right:100px;margin-left:auto;}

    原来应该填充的尺寸被width/height强制变更,而margin:auto正是为着填充那些改变的尺寸设置的;
      div{width:500px;marign-right:100px;margin-left:auto;}

    假诺一侧定值,一侧auto,auto为剩下空间大小,假诺两侧均是auto,则平均剩余空间

    假如一侧定值,一侧auto,auto为剩下空间尺寸,如若两侧均是auto,则平均剩余空间

    为何图片img{width:200px;marign:0 auto}不居中
    因为图片是inline水平的,固然没有width,也不会占有整个容器。
    设置img{display:block;width:200px;marign:0 auto;}
    因为那时候图片是block水平的,固然没有width,也会占用整个容器无法在一行展现。

    为啥图片img{width:200px;marign:0 auto}不居中
    因为图片是inline水平的,就算没有width,也不会占据整个容器。
    设置img{display:block;width:200px;marign:0 auto;}
    因为那时候图片是block水平的,就算没有width,也会占用整个容器不能够在一行展现。

    为啥明明容器定高,成分定高margin:auto 0 无法垂直居中

    为何明明容器定高,成分定高margin:auto 0 不可能垂直居中

    .father{height:200px;background:#f0f3f9;}
    .son{height:100px; width:500px;margin:auto;}
    水平居中了,垂直不居中。

    .father{height:200px;background:#f0f3f9;}
    .son{height:100px; width:500px;margin:auto;}
    水平居中了,垂直不居中。

    解释:借使.son没有设置height:100px;中度会自行200px高吧?——NO
所以margin谈不上活动填充,强制安装宽度中度, 所以是不会活动填写的。
    注意:水平方向上借使实大于父,总括结果为负值的时候也是不居中的。

    解释:借使.son没有设置height:100px;中度会自动200px高吧?——NO
所以margin谈不上自行填充,强制安装宽度中度, 所以是不会自行填写的。
    注意:水平方向上假若实大于父,计算结果为负值的时候也是不居中的。

    完成垂直方向margin居中
      更改流为垂直方向,达成垂直方向的margin:auto
      writing-mode与垂直居中(css3)
      .father{height:200px; width:100%;
wiriting-mode:vertical-lr;}
      .son{height:100px;width:500px;margin:auto;}
    absolute与margin居中
      .father{height:200px;position:relative;}
      .son{position:absolute; top:0px right:0px
bottom:0px;left:0px}
      .son没有width/height,absolute成分自动填满了容器。

    达成垂直方向margin居中
      更改流为垂直方向,实现垂直方向的margin:auto
      writing-mode与垂直居中(css3)
      .father{height:200px; width:100%;
wiriting-mode:vertical-lr;}
      .son{height:100px;width:500px;margin:auto;}
    absolute与margin居中
      .father{height:200px;position:relative;}
      .son{position:absolute; top:0px right:0px
bottom:0px;left:0px}
      .son没有width/height,absolute成分自动填满了容器。

    当设置了width和可观
      .father{height:200px;position:relative;}
      .son{position:absolute; top:0px right:0px
bottom:0px;left:0px;width:500px;height:100px;}
    原来拉伸铺满现在缩回来了。
      被拉伸的半空中设置margin:auto;平均分配就会达成程度垂直居中了
      .father{height:200px;position:relative;}
      .son{position:absolute; top:0px right:0px
bottom:0px;left:0px;width:500px;height:100px;margin:auto;}

    当设置了width和冲天
      .father{height:200px;position:relative;}
      .son{position:absolute; top:0px right:0px
bottom:0px;left:0px;width:500px;height:100px;}
    原来拉伸铺满今后缩回来了。
      被拉伸的长空设置margin:auto;平均分配就会兑现程度垂直居中了
      .father{height:200px;position:relative;}
      .son{position:absolute; top:0px right:0px
bottom:0px;left:0px;width:500px;height:100px;margin:auto;}

    IE8+以上补助!
第④话:css margin负值定位
    1.margin负值下的双方对齐(margin改变成分尺寸)
    例子
      .box{
        width:1200px; margin:auto;background:orange;
        .ul{overflow:hidden;}
        .li{
          width:380px;height:300px;
          margin-right:20px;
          background:green;
          float:left;
        }
      }
    达成的列表最后一个留有间隙。
      而透过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;
     }
    }
    2.margin负值下的等高布局 margin改变成分占据空间
    margin与上下留白
    <div style=”height:200px;”>
      <img height=”300px” style=”margin:50px 0;” />
    </div>
    .box{overflow:hidden;resize:vertical;}
    .child-orange,
    .child-green{margin-bottom:-600px;padding-bottom:600px;}
    .child-orange{float:left;background:orange;}
    .child-green{float:left;background:green;}

    IE8+以上援助!
第⑤话:css margin负值定位
    1.margin负值下的双面对齐(margin改变成分尺寸)
    例子
      .box{
        width:1200px; margin:auto;background:orange;
        .ul{overflow:hidden;}
        .li{
          width:380px;height:300px;
          margin-right:20px;
          background:green;
          float:left;
        }
      }
    完成的列表最后2个留有间隙。
      而透过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;
     }
    }
    2.margin负值下的等高布局 margin改变元素占据空间
    margin与上下留白
    <div style=”height:200px;”>
      <img height=”300px” style=”margin:50px 0;” />
    </div>
    .box{overflow:hidden;resize:vertical;}
    .child-orange,
    .child-green{margin-bottom:-600px;padding-bottom:600px;}
    .child-orange{float:left;background:orange;}
    .child-green{float:left;background:green;}

    通过安装一点都不小的margin-bottom负值,和十分大的padding-bottom填充缺点和失误的长空,完结等高布局。原理:内容块状成分可以在padding中显示.只要没有设置    

    通过设置非常的大的margin-bottom负值,和十分的大的padding-bottom填充缺点和失误的空间,达成等高布局。原理:内容块状成分可以在padding中突显.只要没有安装    

    background:clip,box-sizing:content
    3.margin负值下的两栏自适应布局,成分占据空间跟随margin移动

    background:clip,box-sizing:content
    3.margin负值下的两栏自适应布局,元素占据空间跟随margin移动

    <div style=”float:left;width:100%”>
      <p style=”margin-right:170px;”>图片右浮动</p>
    </div>
    <img width=”150px;”
style=”float:left;margin-left:-150px;”/>

    <div style=”float:left;width:100%”>
      <p style=”margin-right:170px;”>图片右浮动</p>
    </div>
    <img width=”150px;”
style=”float:left;margin-left:-150px;”/>

第肆话 css marign无效情形解析
  1.inline程度成分的垂直margin无效
  1个前提 1.非交替成分,例如不是img成分;2.常规书写方式
  例
    <span style=”margin:0px”>marign:0px</span>
    给span设置margin233px;
    水平上有效的,垂直方向是低效的。
    2.margin重叠
    3.display:table-cell
      display:table-cell/display:tab-row等声明margin无效!

第伍话 css marign无效景况解析
  1.inline水平成分的垂直margin无效
  三个前提 1.非调换到分,例如不是img成分;2.正规书写方式
  例
    <span style=”margin:0px”>marign:0px</span>
    给span设置margin233px;
    水平上有效性的,垂直方向是船到江心补漏迟的。
    2.margin重叠
    3.display:table-cell
      display:table-cell/display:tab-row等声明margin无效!

      例外的更迭成分img,button

      例外的替换到分img,button

    4.position与margin
      相对定位成分非固定方向的margin值“无效”
      相对定位的margin值从来有效,不只是像普通成分那样。
    5.鞭长莫及的margin失效
      bfc内容块中一旦面前有浮动成分那下贰个要素的margin是相对与外层的div总结的。
    6.内联导致的margin失效
      div[style=”height:200px;background-color:#f0f3f9;”]>img[style=”marign-top:30;”]
      当margin-top足够大的时候失效了。
      解释:内联成分要促成和基线对齐,在图纸后加x能够看到,无论margin-top有多少路程,他都不会退出容器外面。

    4.position与margin
      绝对定位成分非定点方向的margin值“无效”
      绝对定位的margin值一贯有效,不只是像一般成分那样。
    5.鞭长莫及的margin失效
      bfc内容块中借使面前有转变成分那下贰个成分的margin是绝对与外层的div计算的。
    6.内联导致的margin失效
      div[style=”height:200px;background-color:#f0f3f9;”]>img[style=”marign-top:30;”]
      当margin-top丰硕大的时候失效了。
      解释:内联元素要贯彻和基线对齐,在图纸后加x能够看到,无论margin-top有多少路程,他都不会退出容器外面。

第七话margin-start和margin-end
    margin-start
    img{
      margin-left:100px;
      -webkit-margin-start:100px;
      -moz-margin-start:100px;
      margin-sart:100px;
    }
    1.日常的流向,margin-sart等同于margin-left,两者重叠不丰富;
    2.借使水平没有从右往左,margin-start等同与margin-right;direction:ltr(rtl)
    3.在笔直流电下(writring-mode:vertical-lr),margin-sart等同于margin-top
    webkit下的其他margin相关属性
      margin-before
        img{-webkit-margin-before:100px;}
暗中同意流向的情形下,等同于marign-top
      margin-after
        img{-webkit-marign-after:100px;}
暗许流向的状态下,等同于margin-bottom;
      margin-collapse 外边框重叠
        -webkit-margin-collapse: collapse|discard|separate
         控制margin重叠
         collapse默认-重叠
         discard 取消
         separate 分隔 没有重叠

第七话margin-start和margin-end
    margin-start
    img{
      margin-left:100px;
      -webkit-margin-start:100px;
      -moz-margin-start:100px;
      margin-sart:100px;
    }
    1.正常的流向,margin-sart等同于margin-left,两者重叠不丰富;
    2.万一水平没有从右往左,margin-start等同与margin-right;direction:ltr(rtl)
    3.在笔直流电下(writring-mode:vertical-lr),margin-sart等同于margin-top
    webkit下的任何margin相关属性
      margin-before
        img{-webkit-margin-before:100px;}
默许流向的情事下,等同于marign-top
      margin-after
        img{-webkit-marign-after:100px;}
暗中同意流向的情景下,等同于margin-bottom;
      margin-collapse 外边框重叠
        -webkit-margin-collapse: collapse|discard|separate
         控制margin重叠
         collapse默认-重叠
         discard 取消
         separate 分隔 没有重叠

相关文章