分析问题
在页面布局时，我们经常会设置html,body的height为100%，让处于最外面的父级元素刚好充满整个屏幕高度，但是，如果此时body下面第一个子元素，刚好设置了margin-top的值，你会发现页面出现了竖向滚动条，问题是这个子元素并没有超过父容器高度也导致出现竖向滚动条，似乎这个margin-top是添加到了父容器上。
例子：假如一个页面有一个列表，第一个子元素需要保持和最顶部有一些上边距，于是你设置了这个子元素margin-top:20px，这个子元素的高度并没有超过父元素的高度，但是整个页面出现了竖向滚动条
原因：
如果两个相邻元素没有border或者padding进行分割，那么会发生外边距合并的现象，并且合并后的外边距以相邻元素中较大的外边距为最终结果
demo
<!DOCTYPE html>
<html>
<head>
<title>子元素设置margin-top导致出现滚动条</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
}
.child {
margin-top: 20px;
height: 200px;
background-color: #DDD;
}
</style>
</head>
<body>
<div class="child"></div>
</body>
</html>
上面的代码表示，两个相邻元素：body元素和class为child的div元素，body元素没有border或者padding与其相邻元素进行分割，所以这个相邻元素的margin-top值会被合并到body上，最终导致原本高度为100%的body元素多出20px的上边距，于是出现了竖向滚动条
解决办法
- 给父元素添加padding或者border值或者把margin-top改成padding-top（最简单）
此时应该注意：父元素盒模型的模式应该改变为：box-sizing: border-box; 以免导致竖向或横向多出设置的值
html,body {
height: 100%;
padding: 1px;
border: 1px solid transparent;
/* 或者是添加 padding: 1px*/
box-sizing: border-box; /*注意改变盒子模型*/
}
.child {
margin-top: 20px;
height: 200px;
background-color: #DDD;
}
- 在第一个子元素前面添加占位元素
<!DOCTYPE html>
<html>
<head>
<title>子元素设置margin-top导致出现滚动条</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
}
.child {
height: 200px;
background-color: #DDD;
}
.space {
height: 20px;
}
</style>
</head>
<body>
<div class="space"></div>
<div class="child"></div>
</body>
</html>
- 如果不考虑此页面包含的是一个列表或者有很多子元素的情况，可以使用绝对定位让该子元素脱离文档流
需要注是：在拥有多个子元素的情况下，如果第一个子元素脱离了文档流，那么第二个子元素就相当于第一个子元素了，也就是说：如果第二个子元素设置了margin-top的值，那么还是会导致这个问题的出现
.child {
height: 200px;
background-color: #DDD;
width: 100%;
position: absolute;
top: 20px;
}
- 还是跟第3点的前提一样，如果不考虑此页面包含的是一个列表或者有很多子元素的情况，设置父元素的overflow-y: hidden;
html,body {
height: 100%;
overflow-y: hidden;
}
.child {
height: 200px;
background-color: #DDD;
margin-top: 20px;
}