你的位置:首页 > 网页设计

[网页设计]margin的BUG


 

 

 

 

     在进行简单的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,请各位多多指教.