作者:广东神秘地址 | 来源:互联网 | 2023-01-16 13:49
我们都知道,在CSS的盒模型中,当子容器设置了margin-top之后,父容器也会受到相应的影响,如下图所示,这是我们部门新来的一个员工写的页面,然后碰到了这个问题:
我们都知道,在CSS的盒模型中,当子容器设置了margin-top之后,父容器也会受到相应的影响,如下图所示,这是我们部门新来的一个员工写的页面,然后碰到了这个问题:
要解决这种情况,通常情况下我们会采用父容器的padding属性来替代子容器的margin属性。那么,有没有别的办法可以解决这个问题呢?
答案是有的!
我们发现此时的父容器并没有使用border属性或padding属性,可是当我们加上
这两个属性中的某一个之后,上面所说的这种现象消失了!!更直接的说起作用的应该是
padding-top或border-top-style 这两个属性。
如上两图所示。当我们使用border或padding中的任意一个属性时,这种现象就消除了。
但是border-top或padding-top宽度必须至少1像素才行。
于是,利用css盒模型的特点,我们可以将父容器的高度减1像素,padding-top加1像素或border-top设置为1像素即可。
补充:上面说的这种解决方案并非最合适,最近看了下BFC相关规范,突然联想到这个问题,原来只需要对外层容器触发BFC布局即可。触发BFC方式有很多,这里最恰当的应该是overflow:hidden了。