上下文BFC包含块详解 学习笔记"/>
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
属性:
-
根元素:
根元素(html元素)是一个页面中最顶端的元素,它没有父元素。根元素存在的包含块被称为“初始包含块”。
-
固定定位元素:
如果元素的
position
属性为fiexd
,那么它的包含块就是当前可视窗口,也就是当前浏览器窗口。其实这里涉及到电脑的图形学的概念,视口代表了一个可看见的多边形区域(通常来说是矩形)。在浏览器范畴里,它代表的是浏览器中网站可见内容的部分。视口外的内容在被滚动进来前都是不可见的。视口当前可见的部分叫做可视视口(visual viewport)。可视视口可能会比布局视口(layout viewport )更小,因为当用户缩小浏览器缩放比例时,布局视口不变,而可视视口变小了**。** -
静态定位和相对定位:
如果 元素的position 属性为
static
、relative
或sticky
,包含块可能由它的最近的祖先块元素的内容区的边缘组成。 -
绝对定位:
如果 元素的position 属性为
absolute
,包含块就是由它的最近的 position 的值不是static
(也就是值为fixed
,absolute
,relative
或sticky
)的祖先元素的内边距区的边缘组成。这个祖先元素的类型可以是块级元素也可以是行内元素。
范围:
- 如果祖先元素是块级元素,则包含块的范围为祖先元素的
padding edge
形成。 - 如果祖先是行内元素,则包含块取决于祖先的
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
元素,我们给他们设置宽高,此时我们可以发现。两个元素在页面上的显示是一
更多推荐
JS 层叠级别层叠上下文BFC包含块详解 学习笔记
发布评论