问题出现：
给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值
<body>
<div class="box">
<div class="content" id="content"></div>
</div>
</body> div,body{
padding: 0;
margin: 0;
}
body{
background-color: darkgrey;
}
.box{
width: 400px;
height: 400px;
margin: 50px auto;
background-color: palegreen;
}
.content {
width: 50%;
height: 50%;
margin-top: 70px;
background-color: tomato;
} <script type="text/javascript">
window.onload = function(){
var he = document.getElementById('box');
alert(he.offsetTop); //70,这里应该是50才对
}
</script>
上面的js代码和图片显示：
1.子元素与父元素的margin并没有体现出来
2.子元素与父元素的margin-top的值，应用给了父元素的margin-top
解决办法：
1、修改父元素的高度，增加padding-top样式模拟（padding-top：1px；常用）
.box{
width: 400px;
height: 400px;
margin: 50px auto;
background-color: palegreen;
padding-top: 1px; //添加
} window.onload = function(){
var he = document.getElementById('box');
alert(he.offsetTop); //50
} .box{
width: 400px;
height: 400px;
margin: 50px auto;
background-color: palegreen;
border: 1px solid transparent; //添加
}3、为父元素添加overflow：hidden；样式即可（完美）
.box{
width: 400px;
height: 400px;
margin: 50px auto;
background-color: palegreen;
overflow: hidden; //添加
}3、为父元素或者子元素声明浮动（float：left；可用）
.box{
width: 400px;
height: 400px;
margin: 50px auto;
background-color: palegreen;
float: left; //添加
}5、为父元素或者子元素声明绝对定位
.box{
width: 400px;
height: 400px;
margin: 50px auto;
background-color: palegreen;
position: absolute; //添加
}原因：
1.当一个元素包含在另一个元素中时（假设没有填充或边框将边界分隔开），它们的顶和/或底边界会发生叠加
2.只有普通文档流中块框的垂直边界才会发生边界叠加。行内框、浮动框或绝对定位框之间的边界不会叠加。
详情见：http://blog.csdn.net/weisuochengxuyuan/article/details/17379517
扫一扫
827
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
