前端基础面试技术点（CSS相关原理）
一、层叠顺序、层叠上下文、层叠等级
层叠顺序
层叠顺序是浏览器渲染显示的一种规则。
层叠上下文
层叠上下文是对HTML元素的一个三维构想。HTML元素基于其元素属性按照优先顺序占据这个空间。
- 层叠上下文可以理解为一个节点在文档中处于的一个与其他节点的一个层叠关系；
- 节点内部又可以独立于它的兄弟节点，根据层叠规则产生一个层叠上下文；
- 子级层叠上下文的z-index值只有在父级中才有意义，比如父级的z-index在比其他节点低一级，那子节点无论z-index设置多高都不能变成最上层。
哪些条件会影响当前节点在自己在层叠上下问的位置？
- position 值为 absolute（绝对定位）或 relative（相对定位）且 z-index 值不为 auto 的元素；
- position 值为 fixed（固定定位）或 sticky（粘滞定位）的元素（沾滞定位适配所有移动设备上的浏览器，但老的桌面浏览器不支持）
- opacity 属性值小于 1 的元素（参见 the specification for opacity）；
- -webkit-overflow-scrolling 属性值为 touch 的元素；
- 以下任意属性值不为 none 的元素：
transform
filter
perspective
clip-path
mask / mask-image / mask-border
层叠等级
层叠等级是在同一个层叠上下文按照层叠规则下所产生的层级关系，也就是同一个层叠上下文在z轴的层叠顺序。
二、盒模型
CSS的盒模型分为IE盒模型和W3C标准盒模型。
IE盒模型：
width = 内容宽度 + border + padding
box-sizing：border-box；
W3C标准盒模型：
width = 内容宽度
box-sizing：content-box；
三、格式化上下文（ Formatting Context）
格式化上下文包括块级格式上下文（Block Formatting Context）、内联格式上下文（InlineFormatting Context）
页面上的所有内容都是格式化上下文的一部分，或者是已定义为以特定方式布局内容的区域。
块格式上下文（bfc）将根据块布局规则布局子元素，每个格式上下文都有关于布局在该上下文中的行为的特定规则。
块格式化上下文（Block formatting contexts）
文档中使用块布局规则的最外层元素建立第一个或初始块格式上下文。这意味着元素块中的每个元素都是按照正常流程按照块和内联布局规则进行布局的。参与BFC的元素使用CSS框模型概述的规则，该模型定义了元素的边距、边框和填充如何与同一上下文中的其他块交互。
块格式化上下文对 浮动定位（ float) 与 清除浮动（ clear) 都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠（Margin collapsing）也只会发生在属于同一BFC的块级元素之间。
应用场景：
- 解决浮动元素父元素高度坍塌的问题、元素被浮动元素覆盖
- 外边距margin合并的问题
- 流布局功能
如何清楚浮动：
- 浮动元素的父元素设置overflow：hidden或display：flow-root；
- 在父元素后面插入一个空div，使用clear：both；
- 给父元素设置高度；
如何会产生一个块格式化上下文
- 浮动元素（元素的 float 不是 none）
- 绝对定位元素（元素的 position 为 absolute 或 fixed or sticky）
- 行内块元素（元素的 display 为 inline-block）
- 表格单元格或其他使用display：table-*属性的元素（元素的 display为 table-cell，HTML表格单元格默认为该值）
- 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
- 匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
- overflow 值不为 visible 的块元素
- display 值为 flow-root 的元素 （推荐，将创建一个新的BFC而不会产生其他潜在的问题副作用）
- 弹性元素（display为 flex 或 inline-flex元素的直接子元素）
- 网格元素（display为 grid 或 inline-grid 元素的直接子元素）
- 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
- IE下：zoom:1
行内格式化上下文（Inline formatting contexts）
行内格式上下文存在于其他格式上下文中，可以将其视为段落的上下文。段落创建了一个内联格式上下文，其中在文本中使用诸如<strong>、<a>或<span>元素等内容。
盒子模型不完全适用于参与内联格式上下文的项。在水平书写模式行中，水平填充、边框和边距将应用于元素，并左右推送文本。但是，不会应用元素上下的边距。将应用垂直填充和边框，但可能会在内容的上方和下方重叠，因为在内联格式上下文中，填充和边框不会将行框推开。
