你的分享就是我们的动力 ---﹥

外边距叠加问题

时间:2013-06-14 15:28来源:www.chengxuyuans.com 点击:

       记得有一段时间了,看过一篇文章,写的是关于外边距margin叠加,当时还勉勉强强能看懂,但是一直不知道怎么解决那个问题,毕竟自己也没有遇到过这个问题,今天看了一个大神的博客才知道我是如此的天真和幼稚,现在我就简单的把大神总结的东西写出来给大家看看吧。

        首先我们要知道外边距叠加是什么,要不先来一个w3c的官方解释:

         In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

        这英语看着就头痛啊,来看看简单的翻译吧:

         在CSS中,两个或多个毗邻(父子元素或兄弟元素)的普通流中的块元素垂直方向上的 margin 会发生叠加。这种方式形成的外边距即可称为外边距叠加(collapsed margin)。

         或许大家还是不能完全的理解,那我就简单的解释一下吧,在父子元素里,第一个是:在普通流(非BFC)中,父元素为块级元素(没有border-top、没有padding-top)的margin-top和它的第一个普通流中的子元素(没有clear)发生margin-top叠加

第二个是:在普通流(非BFC)中,父元素为块级元素(height为auto、min-height为0、没有border-bottom、没有padding-bottom)和它的最后一个普通流中的子元素(没有自身发生margin叠加或clear)发生margin-bottom叠加

在兄弟元素中必须满足几个条件,首先要满足是在普通流(非BFC)中,其次分别为相邻元素,且是在垂直方向上,并且没有非空内容,如border、padding、clear。在满足这些条件的时候,当上一个元素有margin-bottom且下一个兄弟元素有margin-top会发生外边距叠加,并且叠加之后为数值大的那个。

       不管你看没有看懂,但是这就是外边距叠加,要是能找到一些图就好了,不过没关系,发挥自己的想象力,比什么图都好,我都能看懂,你为什么不能看懂,好了,闲话不说,我们现在来看看怎么解决这个问题。

       上面我们看到了发生外边距叠加需要几个条件,所以说我们只需要打破这几个条件就可以了,首先我们可以为父元素创建BFC(不知道是什么的自己去查)或者为父元素设置padding、border。在兄弟元素中我们可以为兄弟元素创建BFC,比如float、absolute、inline-block,还可以设置padding、border。

        但是我想说的是,这些所谓的解决方法都是坑爹的,为什么这么说,我们为父元素创建BFC就是为了解决外边距叠加?我们要知道,外边距叠加一直都是w3c中制定的一个规范,是为了防止元素之间不小心同时设置了margin,这是一个合理存在的东西,但是却被有的人认为是一个BUG的存在,所以我们应该把外边距叠加当作一个规范而不是BUG,最好的方法就是在设置margin的时候都尽量写一个方向的margin(top  or  bottom)。最后说一点,一个元素自身也会发生外边距叠加,条件是如果一个元素的min-height为0、没有border、没有padding、高度为0或者auto、不包含子元素

        最后希望每一个从事前端工作的人员都严谨的对待每一个问题,因为前端是一个涉及面很广很深的行业。

转载注明地址:http://www.chengxuyuans.com/css/64548.html