JS 层叠级别&层叠上下文&BFC&包含块详解 学习笔记

BFC&IFC

其实在我们使用CSS的时候，有一些重要的概念是值得我们关注的，比如说我们讲的BFC和IFC，这些都是我们需要掌握的重点知识。接下来我来分享一下我在学习BFC/IFC时的理解和心得。如有错误望大家指正！谢谢。

首先我们来了解一些重要概念。

一，包含块：

我们创建了一个块级元素，其实当我们为其添加某些属性的时候，我们有时候会有一点顾及，有时候我们需要要知道它的父级元素的相关信息。假如子元素的位置和尺寸的大小需要通过父元素来决定(比如百分比)。那么我们就称父元素是一个包含块。一个元素的大小和定位通常受其包含块的影响。通常情况下，包含块是这个元素最近的祖先块元素的内容区。其实你也可以把包含块理解为一个矩形盒子，而这个矩形的作用是为了给内部子元素的大小和定位提供数据参考。举个例子：

HTML:

<div class="father">
    <div class="son">
        
    </div>
</div>

CSS:

.father{
   
    position:absolute;
    height:100px;
    width:100px
}
.son{
   
    position:absolute;
    height:20%;
    width:20%;
    top:20px;
}

我们从上面的代码中我们可以发现，子元素的位置和大小需要依靠父元素，需要获得父元素的相关信息才能让子元素的大小和位置确定。所以什么是包含块，包含块就是能够决定一个元素的大小和定位的元素的特定区域。

包含块的作用：

元素的尺寸及位置，常常会受它的包含块所影响。对于一些属性，例如 width, height, padding, margin，绝对定位元素的偏移值 （比如 position被设置为 absolute 或 fixed），当我们对其赋予百分比值时，这些值的计算值，就是通过元素的包含块计算得来。

既然包含块那么重要，那么怎么判别一个元素的包含块呢？

包含块的判别以及包含块的范围：

判别：

​ 确定一个元素的包含块的过程完全依赖于这个元素的 position 属性：

1. 根元素：

   根元素(html元素)是一个页面中最顶端的元素，它没有父元素。根元素存在的包含块被称为“初始包含块”。

2. 固定定位元素:

   如果元素的position属性为fiexd，那么它的包含块就是当前可视窗口，也就是当前浏览器窗口。其实这里涉及到电脑的图形学的概念，视口代表了一个可看见的多边形区域（通常来说是矩形）。在浏览器范畴里，它代表的是浏览器中网站可见内容的部分。视口外的内容在被滚动进来前都是不可见的。视口当前可见的部分叫做可视视口（visual viewport）。可视视口可能会比布局视口（layout viewport ）更小，因为当用户缩小浏览器缩放比例时，布局视口不变，而可视视口变小了**。**

3. 静态定位和相对定位：

   如果 元素的position 属性为 static 、 relative 或 sticky，包含块可能由它的最近的祖先块元素的内容区的边缘组成。

4. 绝对定位：

   如果 元素的position 属性为 absolute ，包含块就是由它的最近的 position 的值不是 static （也就是值为fixed, absolute, relative 或 sticky）的祖先元素的内边距区的边缘组成。这个祖先元素的类型可以是块级元素也可以是行内元素。

范围：

1. 如果祖先元素是块级元素，则包含块的范围为祖先元素的padding edge形成。
2. 如果祖先是行内元素，则包含块取决于祖先的direction属性。

二，层叠上下文：

层叠上下文是HTML 元素的一个三概念，我们都知道其实浏览器的页面除了有x轴和y轴，它还有z轴，从浏览器的左上角开始，向右是x的正方向，向下是y的正方向，而z轴的正方向是朝向我们的。这就是组成浏览器页面的三维结构。**其他的html元素基于其元素的属性，例如z-index。来按照优先级的顺序来占据这个三位的空间。**层叠上下文和块级格式上下文一样(我们稍后就可以讲到)，都是可以被建造出来的。我们可以在css中为元素添加特定的属性来创造出一个层叠上下文。可能大家对层叠上下文还是一知半解，层叠上下文是一个抽象的概念，其实想把一个抽象的概念实例化不是很容易。我们来看一个例子:

<div style="width:100px;height:100px">
</div>
<div style="width:100px;height:100px">
</div>

现在有两个div元素，我们给他们设置宽高，此时我们可以发现。两个元素在页面上的显示是一上一下&#x