margin-top
一直在忙项目，终于有时间重新来总结下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>
<p class="parent">
<p class="son"></p>
</p>
</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;
}
相关阅读
css中一共有四种定位分别是默认，相对，绝对，固定 position：static，这种定位是默认的，一般没什么实际的作用。 position：relative,相对定