在进行简单的div盒子嵌套时,发现设置margin-top时存在bug,然后就去谷歌搜索了一下,发现margin确实存在bug.
bug的现象是父子元素嵌套时,如果子元素是块元素时,对块元素设置margin-top ,如果父元素没有边框,那么margin-top会作用在父元素上.
下面是body里的代码:
<div class="red">
<div class="black"></div>
</div>
style里的代码:
<style>
.red{
background: red;
width: 200px;height: 200px;
}
.black{
background: black;
width: 100px; height: 100px;
margin-left: 50px;
margin-top: 50px;
}
</style>
像上面这样,black里的margin-top不会作用在black上,而是作用在red上.
通过测试发现,当给父级元素添加边框的时候可以消除该bug,但是添加边框会影响盒子的大小,如果使用的话需要重新计算盒子各部分的大小,不实用.当给父级元素添加over-flow:hidden时也可以消除该bug,使其正常作用在black子级元素上.还有一个方法是将当前black元素改变成内联块级元素,但是在特殊情况下会影响页面的布局,不推荐使用.这就是在简单基础上的解决办法,毕竟是初学,无法用更高深的知识技术来解决,期待以后学会更高级的解决办法.
下面是使用overflow:hidden;实现的解决办法:
<style>
.red{
background: red;
width: 200px;height: 200px;
/*overflow: hidden;*/
}
.black{
background: black;
width: 100px; height: 100px;
margin-left: 50px;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="red">
<div class="black"></div>
</div>
</body>
另外两个方法就不示范了.
初学html,请各位多多指教.
时间： 2024-08-24 09:26:51