margin的怪异行为
0 Views 前端 with
本文字数:869 字 | 阅读时长 ≈ 4 min

margin的怪异行为

0 Views 前端 with
本文字数:869 字 | 阅读时长 ≈ 4 min

本节主要讲述margin的怪异行为

margin合并

什么是margin合并

块级元素的上外边距(margin-top)与下外边距(margin-bottom)有时会合并为单个外边距

margin合并的3种情景

相邻兄弟元素margin合并

1
2
3
p{marign:1em 0;}
<p>第一行</p>
<p>第二行</p>

则第一行和第二行之间的间距还是1em,因为第一行的margin-bottom和第二行的margin-top合并在一起,并非上下相加。

父级和第一个/最后一个元素

1
2
3
<div class="father">
<div class="son"></div>
</div>

添加CS样式:

1
2
3
4
5
6
7
8
9
10
.father{
width: 600px;
height: 200px;
background: darkblue;
}
.son{
width: 200px;
height: 100px;
margin-top: 100px;
}

头部掉下来了?

原因就是父子margin合并。

阻止父子合并

空级块元素的margin合并

1
2
3
<div class="father">
<div class="son"></div>
</div>
1
2
3
4
5
6
7
.father{
background: darkblue;
overflow: hidden;
}
.son{
margin: 1em 0;
}

此时,father元素高度仅仅是1em,因为son这个元素的margin-top和margin-bottom合并在一起了。

margin:auto的用法

一些事实

1
<div class="father"></div>
1
2
3
4
5
6
.father{
background: darkblue;
position: absolute;
left: 0;
right: 0;
}

father的宽度自动填充页面

margin:auto规则

margin:auto垂直居中

使用绝对定位方法

哪些元素会生成BFC?

  1. 根元素
  2. float属性不为none
  3. position为absolute或fixed
  4. display为inline-block, table-cell, table-caption, flex, inline-flex
  5. overflow不为visible
1
<div class="father"></div>
1
2
3
4
5
6
7
8
.father{
background: darkblue;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}

father这个元素的尺寸表现为格式化宽度格式化高度,尺寸自动填充父级元素的可用尺寸(这里就是填充body)

给father固定的宽和高

1
2
width: 200px;
height: 200px;

此时原本应该被填充的空间就被空余了出来,这多余的空间就是margin:auto;计算的空间,因此,这时候我们设置margin:auto;

auto正好把上下左右剩余空间全部等分了,自然就居中!

margin失效情况

比如:

1
img{top:10%;left:10%;}

此时right和bottom属于auto属性,在这两个方向设置margin值我们在页面上是看不到定位变化的

若想使用margin属性来改变自身的位置,必须是和当前元素定位方向一样的margin属性才可以,否则margin只能影响后面的元素或者父元素

比如:

一个普通元素,其定位方向是左侧以及上方,此时只有margin-leftmargin-top可以影响元素的定位。但是,如果通过一些属性改变了定位方向,如float:right或者绝对定位元素的right测定位,则可以使用margin-right影响位置