<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子的垂直布局</title>
<style>
/*
一、盒子的垂直布局的注意
1.若两个相邻垂直摆放的盒子，上面盒子的下外边距与下面盒子的上外边距会发生重叠，称为外边距合并
若合并后，外边距会选择重叠外边距的较大值
2.若两个盒子具有父子关系，则两个盒子的上外边距会发生重叠，若改变盒子的上外边距，父子盒子都会随之移动位置
三种解决办法：
1.可以为父元素添加边框
2.可以为父元素加内边距
3.为父元素添加overflow：hidden；
学习完清除浮动的最终解决方案：
.father::before{
content:"";
display:table;
clear:both;
}
*/
div{
width: 200px;
height: 200px;
}
/*
.box1{
background-color: #c7edcc;
margin-bottom: 100px;
}
.box2{
background-color: #fde6e0;
margin-top: 200px;
}
*/
.father::before{
content: "";
display: table;
clear: both;
}
.father{
background-color: #c7edcc;
/*overflow: hidden;*/
}
.son{
width: 100px;
height: 100px;
background-color: #fde6e0;
margin-top: 100px;
}
</style>
</head>
<body>
<!--
<div class="box1"></div>
<div class="box2"></div>
-->
<div class="father">
<div class="son"></div>
</div>
</html>
版权属于：
yu
作品采用：
《
署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)
》许可协议授权
评论 (0)