在进行简单的div盒子嵌套时,发现设置margin-top时存在bug,然后就去谷歌搜索了一下,发现margin确实存在bug.
bug的现象是父子元素嵌套时,如果子元素是块元素时,对块元素设置margin-top ,如果父元素没有边框,那么margin-top会作用在父元素上.
下面是body里的代码:
<div> <div></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> <div></div> </div> </body>
另外两个方法就不示范了.
初学html,请各位多多指教.
相关文章
精彩导读
热门资讯
关注我们
