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