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：分割，不重叠