【CSS】margin塌陷与合并问题及BFC初探 |
您所在的位置:网站首页 › margin塌陷解决方法 › 【CSS】margin塌陷与合并问题及BFC初探 |
1.margin塌陷问题 margin塌陷指的是嵌套父子块级元素垂直方向(次方向)的margin会结合到一起,并取最大的值,子元素的margin会往父元素顶部上方方向塌陷。(今天讲的问题都是块级元素之间的问题)
解决方法 这里要讲到一个重要的概念BFC首先来简要看一下bfc是什么?block formatting context即块级格式化上下文。它决定了块级元素如何对它的内容进行布局,以及与其他元素的关系和相互关系。它会让盒模型的渲染规则发生改变,并且创建一个新的环境并与外界相隔。BFC能解决该问题的关键就在于此,他能在改变一个块级元素内的渲染规则与外界相隔,这样其内部的子块级元素不会受到外部的影响,就如同在父级元素顶部加了一个“框”,这样子元素就能按照父元素的顶部设置margin值。 触发BFC的条件 body根标签 display的值为table-cell、inline-block position的值为absolute或者fixed overflow的值不为visible float的值不为none(一开始不大好理解但是可以先记下来,今天只是初探,后续会有专篇讲解)
2.margin合并问题 知道了BFC知识后我们来讲解一下margin合并的问题,margin合并指的是兄弟块级元素间垂直方向的margin值会合并在一起并取最大值,与margin塌陷类似,但是是发生在兄弟元素间。(其实是BFC的规则,今天在这里不多讲)
欢迎大家交流分享! |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |