margin的BUG

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了margin的BUG相关的知识,希望对你有一定的参考价值。

 

 

 

 

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

以上是关于margin的BUG的主要内容,如果未能解决你的问题,请参考以下文章

margin---bug

PHP 精度计算引发的灾难性Bug

margin----padding区别及bug

代码片段 navbar

margin与padding的bug

如何强制Margin-left(marginStart)在片段中成像?