【前端学习之HTMLCSS进阶篇】CSS第二篇块级格式化上下文与堆叠上下文

【前端学习之HTML&CSS进阶篇】-- CSS第二篇 – 块级格式化上下文与堆叠上下文

前言

html与css以及今后我们将会学到的js共同构成了前端技术中最重要的三种语言&＃xff0c;在学习过程中&＃xff0c;我们首先从html出发&＃xff0c;在html的学习过程中深入了解css。在上一节博客中&＃xff0c;我们进入了CSS进阶部分的学习&＃xff0c;本节的内容则主要专注于对于BFC和stack context的学习。

一、 块级格式化上下文

1. 概念

• Block Formatting Context简称BFC&＃xff0c;是一块独立的渲染区域&＃xff0c;规定了在区域中&＃xff0c;常规流块盒的布局&＃xff1b;

2. 常规流块盒布局&＃xff1a;

• 视觉格式化模型包含了块级格式化上下文&＃xff0c;而块级格式化上下文规定了下述规则&＃xff1a;

1. 常规流块盒在水平方向上&＃xff0c;必须撑满包含块&＃xff1b;
2. 常规流块盒在包含块的垂直方向上依次摆放&＃xff1b;
3. 常规流块盒若外边距无缝相邻&＃xff0c;外边距合并&＃xff1b;
4. 常规流块盒的自动高度和摆放位置&＃xff0c;无视浮动和定位元素&＃xff1b;

3. BFC渲染区域&＃xff1a;

由某个HTML元素创建&＃xff0c;以下元素会在其内部创建BFC区域&＃xff1a;

1. 根元素&＃xff1a;HTML元素&＃xff0c;该元素创建的BFC区域覆盖了网页中的所有元素&＃xff1b;
2. 浮动和绝对定位元素
3. overflow不等于visible的块盒【display&＃61;table、inline-block的也是】

图示&＃xff1a;

4. 独立&＃xff1a;

不同的BFC区域&＃xff0c;渲染时互不干扰&＃xff1b;
创建了BFC的元素&＃xff0c;隔绝了它内部和外部的联系&＃xff0c;内部的渲染不会影响到外部&＃xff0c;具体规则如下&＃xff1a;

创建BFC的元素&＃xff0c;自动高度需要计算浮动元素&＃xff1b;

举个例子&＃xff1a;当出现高度坍塌时&＃xff0c;是因为常规流的块盒不会考虑内部浮动元素的高度&＃xff0c;导致认为内部高度为0&＃xff0c;实现坍塌&＃xff0c;现在我们只要让外部的这个块盒生成BFC&＃xff0c;那么就会计算高度了&＃xff1b;
例如可以让块盒实现绝对定位或者浮动【不推荐、有副作用】--- 创建BFC即可&＃xff1b;
更改overflow属性 --- 推荐&＃xff0c;改成hidden等即可&＃xff1b;


创建BFC的元素&＃xff0c;边框盒不会与浮动元素重叠&＃xff1b;

.float{float: left;width: 200px;height: 200px;margin: 20px;background-color: red;}.container{height: 500px;background-color: #008c8c;/* BFC */overflow: hidden;}


<div class&＃61;"float">div><div class&＃61;"container">div>


• 常规流盒子不创建BFC&＃xff1a;
  

• 创建BFC&＃xff1a;自动避让浮动元素&＃xff0c;在不设置宽度时&＃xff0c;就会出现自适应的效果&＃xff0c;此时右边盒子的margin-left无用&＃xff0c;想要间隔拉大&＃xff0c;需要增加左边浮动盒子的margin-right&＃xff1a;

创建BFC的元素&＃xff0c;不会与子元素进行外边距合并//处在不同BFC区域的元素&＃xff0c;外边距不合并&＃xff1a;

.container{background-color: #008c8c;height: 500px;margin-top: 30px;/* BFC */overflow: hidden;}.child{height: 100px;margin: 50px;background-color: red;}


<div class&＃61;"container"><div class&＃61;"child">div>div>


• 当子元素和外部元素在同BFC区域内&＃xff0c;外边距合并&＃xff0c;如图所示上方黄色区域50px证明边距合并&＃xff0c;选取更大值50px作为标准&＃xff1a;
  

• 当子元素处于父元素创造的BFC中&＃xff0c;而父元素处于根元素的BFC中&＃xff0c;故边距不合并&＃xff0c;如图&＃xff1a;
  

二、 堆叠上下文

栈/堆叠/层叠上下文&＃xff08;stack context):

• 概念&＃xff1a;它是一块区域&＃xff0c;这块区域由某个元素创建&＃xff0c;它规定了该区域中的内容在Z轴上的排列先后顺序&＃xff1b;
  【z轴&＃xff1a;从屏幕穿向人】

1. 创建堆叠上下文的元素

1. html元素(根元素)
2. 设置了z-index数值【非auto】的定位元素(position)
3. …

&＃xff08;类似于块级格式化上下文&＃xff09;
注意&＃xff1a;设置了z-index的元素仍然处于根元素或上一级设置的元素的上下文中&＃xff0c;只是它的内部子元素在他自己本身创造的堆叠上下文中&＃xff1b;

2. 同一个堆叠上下文中元素在Z轴上的排列

从后到前的排列顺序

1. 创建堆叠上下文的元素的背景和边框(远离用户)

• HTML的背景永远最远离用户&＃xff0c;即在最底层&＃xff1b;
• 即创建了堆叠上下文的元素考虑时比z-index等规则优先级高&＃xff1b;

2. 堆叠级别为负值的堆叠上下文

• 即比较z-index
• 情况相同&＃xff1a;源次序后边的覆盖前面的

3. 常规流非定位的块盒

4. 非定位的浮动盒子

5. 常规流非定位的行盒

6. 任何z-index是auto的定位子元素&＃xff0c;以及z-index是0的堆叠上下文

7. 堆叠级别为正值的堆叠上下文

每个堆叠上下文&＃xff0c;独立于其他堆叠上下文&＃xff0c;他们之间不能相互穿插&＃xff1b;
也就是说先比较整体堆叠上下文&＃xff0c;在利用内部规则对比&＃xff1b;

总结

本节内容主要是块级格式化上下文的生成和计算规则以及堆叠上下文的应用&＃xff0c;对于BFC区域原理的掌握是实现自己想要样式的必备之课&＃xff0c;而Z-index的内容也是十分重要的关键样式之一。