老师，这样为什么也可以
来源：2-10 编程练习
xchengguang
2019-07-17 11:03:14
我同事说这是父级拖拽，我没搞懂，也能实现这个，这个overflow是干啥用的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*完善下列代码*/
.per{
width: 300px;
height: 300px;
background: red;
margin-left:200px;
margin-top: 200px;
overflow: hidden;
}
.son{
width: 100px;
height: 100px;
background: blue;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="per">
<div class="son"></div>
</div>
</body>
</html>
2回答
-
好帮手慕夭夭
2019-07-17
你好同学，这里有一个特殊的现象，即子元素设置上边距，父元素在不设置border或者padding-top的时候，就会跟着子元素一起下落,此时子元素与父元素的间距重叠了。给父元素设置 overflow: hidden;可以清除间距重叠的现象哦。这个特殊记着。
另外，如果不设置 overflow: hidden;，父元素设置border或者padding-top也可以解决间距重叠的问题，如下：
祝学习愉快，望采纳。
0 -
好帮手慕夭夭
2019-07-17
你好同学，margin:0 auto是可以实现一个盒子在父容器中水平居中的。代码中设置了 margin: 100px auto;可以实现水平居中。
并且上下间距设置为100px，因为父容器高度为300px,子元素高度100px，这样子元素高度加上下间距恰好是父元素高度，也就实现了垂直居中哦，参考如下理解
代码很灵活，实现居中的方式不是唯一的。不过这个方法不推荐使用，例如父容器高度变大了，那么上下间距就要重新计算，否则盒子就没办法居中，如下：
上节课程中有讲解过居中的方式，建议同学复习一下课程，按照课程中的方式进行练习。
overflow: hidden;在这里可以清除间距重叠的现象，这样防止子元素设置间距会父元素会跟着跑下去。祝学习愉快，望采纳。
0h019-07-17
相似问题