前端人人都应该理解的盒模型BFC渲染机制

testHs 发布于2019-08-30 13:52 / 713人阅读

摘要：如图所示如果你眼力不错或者亲自试试会发现个之间设置了的距离但是他们现在实际的间距却是。如何设置盒模型的类型通过的就可以设置为盒模型了默认是盒模型渲染机制基本慨念是英文缩写翻译为块级格式化上下文。说白了就是一种盒模型的渲染规则。

前端人人都要懂的盒模型BFC渲染机制 为什么我们说,前端工程师有必要需要了解BFC渲染机制?

因为如果你一个前端压根没听说过BFC,那你是如何理解下面这几个css现象的呢?

现象一:  垂直方向上元素margin的合并现象

首先,有父子嵌套关系的2个元素,代码和示例如下:

    
    

  ---- html部分---

然后,我们给子元素添加一个margin-top: 50px时

      .son {
            width: 100px;
            height: 100px;
            background: red;
            margin-top: 50px;
        }

我们神奇的发现父子元素同时"掉下来了50px",如图所示

所以这里的问题是: 为什么2个div一起向下掉呢?

现象二: 垂直方向上元素margin的合并现象

现在,我们有2个兄弟关系的元素,代码和示例如下:

    
    
     ---- html部分---

然后,我们给上边的元素添加 margin-bottom:50px , 下边的元素添加 margin-top : 50px。

        .bother1 {
            width: 100px;
            height: 100px;
            background: skyblue;
            margin-bottom: 60px;
        }
        .bother2 {
            width: 100px;
            height: 100px;
            background: cadetblue;
            margin-top: 40px;
        }

如图所示:

如果你眼力不错,或者亲自试试,会发现2个div之间设置了100px的距离,但是他们现在实际的间距却是50px。

所以这里的问题是: 为什么2个div的间距是50px,而非100px呢?

现象三: overflow:hidden,可以清除浮动造成的副作用

一对父子关系的div,父元素的高度是通过子元素的高度撑开的,如图

    
    
     ---- html部分---

然后,我们给子元素float:left之后,子元素脱离的文档流,于是父元素的高度为0了,如图

     .son {
            width: 100px;
            height: 100px;
            background: skyblue;
            float : left;
        }

这个现象,我相信大家都知道如何解决,不就是需要"清除浮动"吗?

我这里想说的是,"清楚浮动"有2种原理,一类是clear: both,一类就是依靠BFC原理.

所以这里的问题是: 为什么给父元素添加 overflow: hidden 就可以"清除浮动"呢?

现象四: overflow:hidden 配合浮动,可以实现2栏自适应布局

如图所示,我们已经实现了左侧固定300px,右侧自适应的布局

所以这里的问题是: 为什么添加 overflow: hidden 和浮动就可以实现2栏自适应布局呢?

    
    
     ---- html部分---
    
    
        left
        right

好了,以上四个看似毫无关系的"奇葩"现象,不知道是否理解出现这些现象的原因呢?

如果回答不上来,那就建议你好好看下这篇文章了。

当然如果你没有见过这些现象的,那你就赚到了,这么多"奇葩"问题,你看一篇文章就全解决了,省了你不少力气呢!

CSS盒模型

CSS盒模型的基本概念: 盒模型分为W3C盒模型和IE盒模型,他们的区别是计算width和height的方式不同,IE盒模型的width是从border开始计算的。

如何设置CSS盒模型的类型 : 通过CSS3的 box-sizing:border-box就可以设置为IE盒模型了,默认是W3C盒模型

BFC渲染机制 BFC基本慨念

BFC是英文缩写,翻译为"块级格式化上下文"。

说白了BFC就是一种css盒模型的渲染规则。既然说了是渲染规则,那你自然需要去记住这些规则了,没法解释为什么。

BFC渲染规则

BFC其实有很多渲染规则,我们这里说4条比较重要的规则,知道这些规则,你就可以回答上面的4个现象了。

规则1: 创建了BFC的元素中,在垂直方向上的margin会发生重叠。根元素就是一个BFC元素 (这个可以解释margin重叠)

规则2: BFC元素在页面上是一个独立的容器,外面的元素和里面的元素互不影响。

规则3: BFC元素不会和浮动的元素重叠。(这个可以解释两栏自适应)

规则4: 计算BFC元素的高度时,里面浮动元素的高度也会参与计算 (用来解释overflow:hidden可以清除浮动)

普通元素如何创建BFC

首先我们根元素html,就是最大的BFC容器。

创建BFC的方式很多,常见包括:

float不为none的都可以

overflow: hidden / auto

position: 不为static 、 relative都可以

display: table-cell ... 表格相关的

不过我觉得用到最多的还是

overflow : hidden

毕竟其他的position float display都是很容易影响页面布局的,我们一般也不想为了创建BFC区域就引发页面布局的变动吧。

补充

不知道各位看了BFC的渲染规则和创建方式后,是否能够自行去解释前面的4个现象了呢?

补充2点:

关于margin的重叠规则。在现象二中,他们的重叠规则是,margin-bottom和margin-top会重叠,重叠之后取较大的margin值

关于"清除浮动"的说法。实际上"清除浮动"的说法不太准确,因为清除浮动,你直接删掉float:left就行了。更准确的说是"闭合浮动",或者说清除浮动带来的副作用。

最后，如果有什么疑问，欢迎留言讨论，
如果觉得真的对您对BFC的理解有帮助的话请点赞示意！谢谢。

高性能计算人人都说我爱你渲染模型云服务器怎么理解前端工程师前端都包括什么

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115598.html

一篇文章带拿下盒模型BFC渲染机制

摘要：它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。一个的范围包含创建该上下文元素的所有子元素，但不包括创建了新的子元素的内部元素。走在前端的大道上本篇将自己读过的相关盒模型BFC 文章中，对自己有启发的章节片段总结在这（会对原文进行删改）,会不断丰富提炼总结更新。一.常见定位方案在讲 BFC 之前，我们先来了解一下常见的...

DangoSky 2019-08-30 15:55 评论0 收藏0
【前端芝士树】详解CSS盒模型、BFC、OffsetWidth&ClientWidth&am

摘要：提供了糟糕的支持，而虽然接近标准，但依旧未能完全正确的支持标准。尽管修复了许多的问题，但是依然延续实现中的其它故障主要是盒模型问题。因此大部分的声明将触发严格模式即依据标准的规则渲染网页。深入理解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth 本文将从盒模型开始，一步步涉及一些常见的前端笔试和面试点主要参考自第一篇文章，然而笔者在读的时...

binta 2019-08-29 16:13 评论0 收藏0
深入理解盒模型与BFC

摘要：标准盒模型与盒模型开发者们都知道，由于历史遗留问题与既定标准的发展，存在着两个盒模型。即的标准盒模型以及的怪异盒模型。在中，可以用去定义元素的盒模型。比较这两个盒模型的差异之前，我们先来看一张图先不讨论宽高，我们把一个元素的组成分为。标准盒模型与IE盒模型开发者们都知道，由于历史遗留问题与既定标准的发展，存在着两个css盒模型。即W3C的标准盒模型以及IE的怪异盒模型。在css中，...

gself 2019-08-29 17:14 评论0 收藏0
CSS中各种布局的背后(*FC)

摘要：中各种布局的背后，实质上是各种的组合。相反，一些块容器盒，比如非替换行内块及非替换表格单元格，不是块级盒。描述元素跟它的后代之间的影响。行盒行盒由行内格式化上下文产生的盒，用于表示一行。弹性容器外和弹性项目内的一切元素都不受影响。 CSS中各种布局的背后，实质上是各种*FC的组合。CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 FFC 和 GFC。盒模型(Box M...

miracledan 2019-08-30 14:01 评论0 收藏0