一直在忙项目,终于有时间重新来总结下css。
一组嵌套的盒子,子盒子和父盒子之间想设置上边距,不能用margin-top设置。因为子盒子会带着父盒子一起距离浏览器有一个距离。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.parent {
width: 200px;
height: 200px;
background-color: #fff889;
}
.parent .son {
width: 100px;
height: 100px;
background-color: #ff4fa6;
border: 1px solid #000;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="parent">
<div class="son"></div>
</div>
</body>
</html>
解决办法:
- 强制限制父盒子的区域:(border)
.parent {
width: 200px;
height: 200px;
background-color: #fff889;
border: 1px solid #000;
}
2. 用父亲的padding去挤不要用儿子的margin去撑。
.parent {
width: 200px;
height: 200px;
background-color: #fff889;
padding-top: 30px;
}
3.为父盒子添加overflow: hidden
.parent {
width: 200px;
height: 200px;
background-color: #fff889;
overflow:hidden;
}