CSS深入理解（1）margin

css margin可改变容器的尺寸
可视尺寸：实线包含部分（border及border以内）
占据尺寸：虚线包含部分（margin及margin以内）

margin与可视尺寸

1.适用于没有设定weight，height的普通block水平元素
如float元素，absolute，inline，table-cell都不适用
2.只适用于水平方向

改水平方向的值：有变化

改垂直方向的值:无变化

利用该特效果性实现的效果——“一侧定宽自适应布局”

img{
   float: left;
   width: 300px;
}
h3{
  margin-left:320px;/*该值要超过图片的宽度*/
}

margin与占据尺寸

1.block，inline-block水平元素均适用
2.与width，height无关
3.使用于水平方向和垂直方向

利用该特效果性实现的效果——“滚动容器上下留白”

img{
      width: 300px;
      margin:50px 0;
 }

css margin与百分比

1.普通元素百分比margin是相对于父类容器宽度计算的
2.绝对定位元素百分比margin是第一个定位的祖先元素宽度计算的
利用该特效果性实现的效果——“自适应矩形”

.container{
     background-color:deepskyblue;
     overflow: hidden;/*避免重叠*/
  }
.main{
     margin: 50%;/*margin重叠*/
}

margin重叠

1.只发生在block水平元素
2.不考虑writing-mode，只发生在垂直方向
（1）相邻兄弟元素

（2）父子元素

.container{
    background-color:deepskyblue;
}
h1{
   margin-top:80px;
}

/*同效果*/
.container{
    background-color:deepskyblue;
    margin-top:80px;
}
/*同效果*/
.container{
    background-color:deepskyblue;
    margin-top:80px;
}
h1{
   margin-top:80px;
}

父子margin重叠的其他条件

如何去掉margin-top重叠？
方法1：

.container{
    background-color:deepskyblue;
    overflow:hidden;
}
h1{
   margin-top:80px;
}

方法2：

.container{
    background-color:deepskyblue;
    border: 5px solid green;
}
h1{
    margin-top:80px;
}

方法3：

.container{
   background-color:deepskyblue;
   padding-top: 80px;
}
h1{
   margin-top:1px;
}

方法4：
子元素前添加一个inline空元素

（3）空block元素

重叠的计算

居中问题

图片无法居中
原因：图片为inline元素，没有剩余空间，auto不能自动填充
解决：

img{
    display:block;/*改为块状元素*/
    width:200px;
    margin:0 auto;/*这样即可实现图片水平居中*/
}

容器、子元素定高，但margin：auto 0；垂直居中不起作用
原因：子元素去掉height，高度不会自动填充
解决1：为父级容器设置writing-mode，更改流为垂直方向

.container{
    height:200px; 
    width:100%; 
    writing-mode:vertical-lr;/*更改流为垂直方向*/
}
.son{
    height:100px;/*强制更改了尺寸，垂直方向上可以自动填充,而此时宽度居中会失效*/
    width：500px;
    margin:auto;
}

absolute绝对定位元素居中

.container{
    height: 200px;
    position: relative;
}
.son{
     position: absolute;
     top: 0px;/*没有height,width可以实现自动填充*/
     right: 0px;
     left:0px;
     bottom: 0px;
     width：500px;/*width,height限制了absolute元素自动填满*/
     height:100px;
     background-color: deepskyblue;
     margin:auto;/*在IE8+水平、垂直都居中*/
}

margin负值

margin负值下的两端对齐
margin改变元素尺寸

       .container{
           width: 1200px;
           margin: auto;
           background-color: plum;
       }
        ul{
            overflow: hidden;
        }
        .li{
            width: 380px;
            height: 300px;
            margin-right:20px;
            background-color: blueviolet;
            float: left;
        }

解决办法：

        .ul{
            overflow: hidden;
           margin-right: -20px;/*总体ul添加一个负margin*/
        }
        .li{
            width: 386.66px;/*适当变化ul的宽度值*/
            height: 300px;
            margin-right:20px;
            background-color: blueviolet;
            float: left;
        }

margin负值下的等高布局
margin改变元素占据空间

       .container{
           overflow: hidden;
           resize: vertical;/*可调整元素高度*/
           background-color: plum;
       }
       .left,.right{
           margin-bottom: -90px;/*负margin值大于等于测高度值*/
           padding-bottom: 90px;
           width: 50%;
           float: left;
       }
        .left{
            background-color: aqua;
            height: 90px;/*左侧加高度，右侧也跟着加*/
        }
        .right{
            background-color: blueviolet;
        }

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

元素占据空间跟随margin移动
DOM顺序和视觉顺序相符

margin失效的原因

1.inline内联水平元素的垂直margin无效
2.发生重叠
3.display：table-cell，table-row等声明，margin无效
4.绝对定位元素，非定位方向的margin值“无效”

margin-start和margin-end

margin-before和margin-after

margin-collapse

collapse：默认重叠
discard：取消
seperate：分割，不重叠