wangry

Appearance

常见概念 ​

区块格式化上下文 BFC ​

区块格式化上下文（Block Formatting Context， BFC）是 web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域

INFO

BFC，是 CSS 中的一个概念，定义了元素如何渲染内容以及与其他元素的交互，对元素布局和清除浮动方面有很大影响

主要特点：

1、BFC 是独立的布局环境

2、内部盒子会垂直排列

块级盒子会在垂直方向上一个接一个地排列

3、清除浮动的影响

4、不重叠外边距

创建 BFC 的方式：

  • 文档的根元素（<html>）

  • 浮动元素（即float值不为none的元素）

  • 绝对定位元素（position值为absolute或fixed的元素）

  • 行内块元素 display: inline-block/flex/grid

  • 表格单元格（display 值为 table-cell，HTML 表格单元格默认值）

  • 匿名表格单元格元素（display 值为 table（HTML 表格默认值）、table-row（表格行默认值）、table-row-group（表格体默认值）、table-header-group（表格头部默认值）、table-footer-group（表格尾部默认值）或 inline-table）

  • overflow 值不为 visible 或 clip 的块级元素

  • display 值为 flow-root 的元素

  • contain 值为 layout、content 或 paint 的元素

  • 弹性元素（display 值为 flex 或 inline-flex 元素的直接子元素），如果它们本身既不是弹性、网格也不是表格容器

  • 网格元素（display 值为 grid 或 inline-grid 元素的直接子元素），如果它们本身既不是弹性、网格也不是表格容器

  • 多列容器（column-count 或 column-width 值不为 auto，且含有 column-count: 1 的元素）

  • column-span 值为 all 的元素始终会创建一个新的格式化上下文，即使该元素没有包裹在一个多列容器中

格式化上下文影响布局，通常，我们会为定位和清除浮动创建新的 BFC，而不是更改布局，因为它将：

  • 包含内部浮动。

    BFC 让浮动内容和周围的内容等高

  • 排除外部浮动。

    正常文档流中建立的 BFC 不得与元素本身所在的块格式化上下文中的任何浮动的外边距重叠

  • 阻止外边距重叠。

    可以创建新的 BFC 避免两个相邻元素之间的外边距重叠

层叠上下文 ​

假定用户正面向（浏览器）视窗或网页，而 HTML 元素沿着其相对于用户的一条虚构的 z 轴排开，层叠上下文就是对这些 HTML 元素的一个三维构想。众 HTML 元素基于其元素属性按照优先级顺序占据这个空间。

某些元素的渲染顺序是由其 z-index 的值影响的。这是因为这些元素具有能够使他们形成一个层叠上下文的特殊属性。

文档中的层叠上下文由满足以下任意一个条件的元素形成：

  • 文档根元素（<html>）；

  • position 值为 absolute（绝对定位）或 relative（相对定位）且 z-index 值不为 auto 的元素；

  • position 值为 fixed（固定定位）或 sticky（粘滞定位）的元素（沾滞定位适配所有移动设备上的浏览器，但老的桌面浏览器不支持）；

  • flex (flex) 容器的子元素，且 z-index 值不为 auto；

  • grid (grid) 容器的子元素，且 z-index 值不为 auto；

  • opacity 属性值小于 1 的元素（参见 the specification for opacity）；

  • mix-blend-mode 属性值不为 normal 的元素；

  • 以下任意属性值不为 none 的元素：

    transform

    filter

    backdrop-filter

    perspective

    clip-path

    mask / mask-image / mask-border

  • isolation 属性值为 isolate 的元素；

  • will-change 值设定了任一属性而该属性在 non-initial 值时会创建层叠上下文的元素（参考这篇文章）；

  • contain 属性值为 layout、paint 或包含它们其中之一的合成值（比如 contain: strict、contain: content）的元素。

z-index 不起作用的原因 ​

1、没有设置 position

2、层叠上下文问题：z-index 只在同一个层叠上下文中有效

创建层叠上下文？

  • position: absolute/relative 且 z-index 不为 auto

  • position: fixed/sticky

  • 设置 transform、filter、opacity（值小于 1）、perspective、clip-path、will-change、mix-blend-mode 等属性

  • display: flex/grid 等

3、元素的父级有较高的 z-index

4、兄弟元素的层叠顺序

5、opacity 或其他样式的影响

6、浏览器兼容问题

7、浮动元素和 z-index

8、遮挡元素的其他属性