文章目录
1. 外边距塌陷问题
外边距合并(叠加)是一个相当简单的概念。但是,在实践中对网页进行布局时,它会造成许多混淆。 简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
代码:
<style>
.d1 {
width: 150px;
height: 150px;
background-color: pink;
margin-top: 40px;
}
.d2 {
width: 150px;
height: 150px;
background-color: yellowgreen;
margin-top: 20px;
}
.d3 {
width: 250px;
height: 250px;
background-color: turquoise;
margin-top: 20px;
margin-bottom: 30px;
}
</style>
<body>
<div class="d3">
<div class="d1"></div>
</div>
<div class="d2"></div>
</body>
如图,d1和d3是父子关系,d3和d2是兄弟关系,d1和d3都设置了分别设置margin-top:40px
和margin-top:30px
,只有d1的生效了。而d3和d2分别设置了margin-bottom:30px
和margin-top:20px
,但d3和d2之间的间距只有30px。
这就是外边距塌陷。
2.解决方法
2.1 给父元素增加内边距padding值
<style>
.d3{
padding:1px;
}
.d4{
padding:1px;
}
</style>
<body>
<div class="d4">
<div class="d2"></div>
</div>
</body>
因为是添加在父元素上,所以,如果想要d2和d3不发生外边距合并,需要给d2或者d3加一个父元素,在父元素上添加属性。
而父子关系则不用考虑这么多,直接在父元素上添加。
2.2 给父元素增加边框
<style>
.d3{
border:1px solid;
}
.d4{
border:1px solid;
}
</style>
2.3 给父元素增加overflow:hidden
<style>
.d3{
overflow:hidden;
}
.d4{
overflow:hidden;
}
</style>
2.4 浮动
给父元素或子元素增加浮动
<style>
.d3{
float:left;
}
.d4{
float:left;
}
</style>
浮动可以解决父子关系的问题,而兄弟关系的问题就不存在了
2.5 将父元素转换成行内块元素
<style>
.d3{
display:inline-block;
}
.d4{
display:inline-block;
}
</style>
同2.4
2.6 定位
绝对定位或固定定位
<style>
.d3{
position:absolute;
}
.d4{
position:absolute;
top:300px;
}
</style>
绝对定位和固定定位的代码及效果是一样的
2.7 flex
<style>
.d3{
display:flex;
}
.d4{
display:flex;
}
</style>
最简单的方法~~~~