CSS深入了解之margin

一、margin与元素尺寸的关系

元素尺寸：

•     可视尺寸-clientWidth(标准)
•     占据尺寸-outerWidth（在js中）

【【margin对可视尺寸的影响】】

1. 适用于没有设定width/height的普通【block】水平元素
2. 只适用于改变水平方向的尺寸

？？利用这一特性，可以实现？？

•  一侧定宽度的自适应布局

• /*图片左浮动，跟随文字实现自适应效果。给<P>元素添加margin-left，可视尺寸减小，实现自适应效果；
  
  如果希望右侧固定，左边文字环绕，则让图片右浮动，但是此时DOM的元素顺序不相同，这时可以调整HTML5的顺序后，利用margin的负值实现
  */
  
  <img src="img/刺绣1.jpg"  width="150" style="float: left;"><p style="margin-left: 170px;">文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕</p>

• margin负值下的两栏自适应布局

        利用了元素占据空间margin移动的特性；与relative相比，relative原本占据的空间不会发生任何变化。
不足：DOM渲染顺序与视觉顺序不符合
    

            <
            div 
            style
            ="float:left; //外层元素一样浮动，避免坍塌
            width:100%"
            >
            <
            p 
            style
            ="margin-right:170px;>文字说明...</p>
</div>

<img width ="
            150" style
            ="float:left; margin-left:-150px;"
            >
            
//虽然width为150px，但是向左偏移-150px，所以对右边的空白无影响.
        

使用margin负值，这里需要调整HTML结构，构建一个宽度100%的浮动元素，左浮动，后面跟随的图片也是同方向浮动，但是，margin-left负值自身的宽度大小，配合<p>元素margin-right留下的补间空白，实现自适应效果。

• 两端对齐布局

            <!--
            --------------------HTML代码-----------------------
            -->
            <
            div 
            class
            ="box"
            >
            <
            div 
            class
            ="ul"
            >
            <
            div 
            class
            ="li"
            >列表1</div><div class="li">列表2</div><div class="li">列表3</div></div></div><!----------------------CSS代码------------------------->
        .box{ 
            width: 1200px;
                   margin: auto;
                   background: orange; }
         .ul{ 
             overflow: hidden;
             margin-right: -20px; 
             /*因为没有定宽和定高，并且是block水平元素
             margin可以改变它的宽度，负值变大，正值变小*/
              }
         .li {
             width: 386.66px;
             height: 300px;
             margin-right: 20px;
             background: green;
             float: left;
         }

【【margin对占据尺寸的影响】】

1. 对block/inline-block水平元素均适用
2. 与有没有设定width/height值无关系
3. 适用于水平方向和垂直方向 

？？利用这一特性，可以实现？？

• 滚动容器上下留白的问题

•                     <
                      div 
                      style
                      ="height: 200px;"
                      >
                      <
                      img 
                      src
                      ="img/刺绣.jpg"
                       height
                      ="300"
                       style
                      ="margin: 50px 0;"
                      >
                      </
                      div
                      >
                  

• 实现多栏或两栏的等高布局

•                                   .box{
                       overflow: hidden;
                        resize: vertical;
                    }
  
                 .child-orange,
                 .child-green {
                  margin-bottom: -600px;
                  padding-bottom: 600px;/*利用padding才能显示背景色*/
                 }
  
                 .child-orange {
                                   float: left; 
                                   background: orange;}
                 .child-green{
                                   float: float; 
                                   background: green;}
                  
                  

二、margin外边距重叠关系

父子margin重叠其他条件

想要除去margin重叠的特性，只需去掉下面当中的一个即刻

重叠的几种类型

1. 外边距的高度等于两个发生叠加的外边距的高度中的较大者

         2.当元素包含在另一个元素中时(假设没有内边距或边框将外边距隔开)，它们的顶/底边外边距也会发生叠加

         3.假设存在一个空元素，它有外边距，但是没有边框或内边距，此时，顶外边距与底外边距发生叠加

         4.并且当空元素碰到另一个元素的外边距时，还会继续发生叠加

外边距叠加的实际意义

由几个段落组成的典型文本页面为例，第一个段落上面的空间等于段落的顶外边距。如果没有外边距叠加，后续的所有段落之间的空间将是相邻顶外边距和底外边距的和。

• 这意味着段落之间的空间是页面顶部的两部，如果发生外边距叠加，段落之间的顶外边距和底外边距就叠加在一起，这样各处的距离就相同了。
• 这是普通文档流中块框的垂直外边距才会发生外边距叠加。行内框、浮动框或绝对定位框之间的外边距不会叠加。

margin重叠计算口诀： 正正取大值 正负值相加 负负最负值

三、margin与百分比单位

• 普通元素百分比/绝对定位元素百分比
• 普通元素的百分比margin都是相对于父级容器的宽度计算的！

img { margin:10%; postion:absolute； }的百分比margin是相对于第一个定位祖先元素(relative/absolute/fixed)的宽度计算的!

四、margin:auto时

        1、如果一侧定值，一侧auto，auto为剩余空间大小；
2、如果两侧均是auto，则平分剩余空间;
    

            div{
     width:500px;
     margin-right:auto;
     margin-left:auto;
     background:..
}
        

        3、而当margin: 0 auto； 时图片不居中，

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

只需设置 img的的display:block，就算没有width，也会占据整个容器。

4、内外元素均设置height，无法垂直居中？
    

            .father{ height:200px; background:#f0f3f9;}
.son { height:100px; width:500px; margin:auto;}

/*该son元素无法垂直居中，原因是：因为当son设置高度height:100px，本身不会填充，没有所谓的剩余空间，所以margin:auto也不会分配。*/
        

    5、在垂直方向上我们怎么使用margin实现居中？

• • writing-mode与垂直居中

                                .father{height:200px; width:100%; writing-mode:vertical-lr;}
    .son { height:100px; width:500px; margin:auto; }
                            

• • 绝对定位元素的margin:auto 居中 

  •                             .father{ height:200px; position:relatvie;} 
    .son{ position:absolute; top:0; right:0; bottom: 0; left:0; width:500px; height:100px;margin:auto;} 
    
    /*当设置son元素的宽度和高度后，原来的absolute自动填充会被强制抵消*/
                            

     

五、margin的其他特性

• • margin-start

正常流向，margin-start等于margin-left，两者重叠不累加

如果水平流从右往左，margin-start等于margin-right；

在垂直流下（writing-mode:vertical-*;）,margin-start等同于margin-top

• • margin-collapse（默认-重叠）
  • margin-discard （取消margin）
  • margin-separate（没有重叠，两个margin相加）

原文：http://www.cnblogs.com/siestakc/p/6485699.html