行内格式化上下文(IFC)
是什么是行内的格式化上下文，行内框（inline box） 一个接一个的排列组成了它，排列顺序根据 writing-mode（书写模式）来决定：
水平书写模式，各个框从左到右水平的排列
垂直书写模式，各个框从顶部到底部开始水平的排列
:::note
行内框指 文本,<span></span> 和其它所有被指定成行内样式的元素，例如：
display: inline-block
display: inline-flex
:::
各个框组成了一行，该行位于一个称为 行框（line box）的矩形区域之之中
可以理解成，每一行的内容都是一个行框
行框是一个概念，并不会实际显示
创建方式块级元素中仅包含内联元素时，这些内联元素就组成了一个 IFC
当 IFC 中插入了块级元素时，原本的 IFC 会被拆分成多个 IFC，例如
12345<div class="horizontal"> NoraH1to's blog <div>突然插入</div> horizontal</di ...
外边距重叠
是什么两个 块 相邻的上边距和下边距有时会合并，折叠为单个边距，值为两者间的最大值，这种行为称为边距折叠
浮动元素 和 绝对定位元素 不会发生边距重合
如何产生用白话来说，只要外边距之间能互相接触到，那就会产生重叠
说细点就是，如果两个边距之间没有隔着 margin 外的任何区域（border,padding,content），就会产生重叠
:::caution
margin: 0 也会发生叠加哦，只要没有东西拦着
:::
具体可以看例子：
See the Pen
margin-collaspsing-1 by NoraH1to (@norah1to)
on CodePen.
.split 只要设定了 border,padding 或 height 都可以防止外边距叠加
父子元素父子元素也是会发生外边距叠加的
See the Pen
margin-collaspsing-2 by NoraH1to (@norah1to)
on CodePen.
块级格式化上下文(BFC)
是什么是块级的格式化上下文，其上下文内有其特定的布局规则，是浮动元素与其它元素可发生交互的区域
创建方式以下几个常用的方式会创建块级格式化上下文：
<html></html> （根元素即是 BFC）
float 不为 none（浮动元素）
position 为 absolute,fixed（绝对定位元素）
display 值为以下之一
专门用于创建BFC的 flow-root，意在无副作用的创建BFC
行内块级 inline-block
表格相关 table,table-cell…
灵活布局(flex)或栅格布局(grid)的直接子元素（子元素不能为 flex,grid 或 table 容器）
其它详细的创建方法可查阅MDN 文档
作用BFC 常常用来清除浮动，因为其效果有：
包含内部浮动
排除外部浮动
阻止外边距重叠
通俗来说就是 创建一个内外隔绝的环境，外部不会影响到内部，内部也不会影响到外部
包含内部浮动下面代码由一个父元素包裹两个同级的子元素，第二个子元素为浮动元素
由于第二个子元素是浮动的，所以会导致父元素高度坍塌
但 ...
格式化上下文
八股环节经典考点 BFC，其全称为 Block formatting context(块级格式化上下文)，它就是其中一种 Formatting contexts(格式化上下文)
格式化上下文总共有以下种类：
Block formatting contexts 块级格式化上下文 BFC
Inline formatting context 行内格式化上下文 IFC
Flex formatting contexts 弹性格式化上下文 FFC
Grid formatting contexts 栅格格式化上下文 GFC
页面上所见的所有内容都是格式化上下文的一部分，格式化上下文会影响布局方式
参考
Formatting context | MDN格式化上下文 | 掘金
z-index
我对 z-index 的理解至今仅停留在 定义一个元素在屏幕Z轴上的堆叠顺序，然而这是比较片面的一种理解
z-index 并不是在任意地方都有效。它仅在 定义了 position 属性且值不为 static 的元素上生效
判断元素在 Z轴 上的堆叠顺序，不仅要比较 z-index 的大小，还会由元素的 层叠上下文、层叠等级 共同决定
所以要理解 z-index 需要理解下面几个概念
层叠上下文
层叠等级
层叠顺序
层叠上下文在 CSS2.1 规范中，每个盒模型的位置是由三个维度决定的，分别是画布上的 X轴、Y轴 以及表示层叠的 Z轴
正常情况下我们只能观察到元素在 X轴Y轴 上的分布，却看不出它们在 Z轴 上的层叠关系；但如果元素发生了堆叠，此时就能发现某些元素之间会出现相互覆盖的情况
如果一个元素产生了层叠上下文，那么它就是 层叠上下文元素，没有的我们暂称为普通元素
HTML 的根元素 <html></html> 存在一个 根层叠上下文
普通元素其实就在根层叠上下文中，但大家的上下文都一样，可以理解成大家都没有上下文
符合以下条件的元素， ...
http 缓存
根据请求是否达到服务端，可以将缓存分为 强缓存 和 协商缓存
强缓存只在客户端即可判断是否命中的缓存
常用响应头有 Pragma, Expires
请求头有 Cache-Control (也可能存在于响应头中)
这些字段配置后不到期的请求不会到达服务端
Pragma在 HTTP/1.0 协议中规定的通用首部，其效果依赖不同的实现，在请求到响应时可能会有不同的效果
现在只用来兼容只支持 HTTP/1.0 协议的缓存服务器
该头并没有一个明确的规范，所以可靠性不行，除非要兼容 HTTP/1.0 客户端，不然不建议使用
语法很简单且只有如下一种指令
1Pragma: no-cache
与 Cache-Control: no-cache 效果一致，强制要求服务器验证缓存
Expires该响应头存放着一个 HTTP标准时间戳，用于设置资源的过期时间，格式如下
1Expires: <http-date>
浏览器在请求一个资源的时候，会拿当前时间与该资源上次请求时的 Expires 对比，如果没有超过则读取本地缓存，否则向服务器请求资源
例如我们用拉起一个简单的 http 服务器 ...
@forward
配合 @use 使用的规则
因为 @use 引入的模块只能在当前文件内使用，所以说如果要组合多个模块作为一个新模块暴露出去，是行不通的
@forward 正是为此而生
@forward 会加载 Sass 样式表，并让其混入(mixin)、函数(function)和变量在当别的样式表使用 @use 引入当前样式表时能够被使用。它使跨多个文件组织 Sass 库成为可能，用户可以加载单个入口文件。
基本使用基础语法为 @forward "<url>"。它与 @use 一样通过 URL 来加载模块，但它让使用该模块的用户能够使用已加模块的公共成员，就像这些已加载模块的公共成员定义在了该模块内一样。
被 @forward 引入的模块在当前文件中是不可用的（仅仅是字面意思的转发），如果需要使用，还需要编写 @use 规则。不用担心，它只会被加载一次！
如果同时使用 @forward 和 @use 引入一个文件，先写 @forward 总是没错的。这样的话，用户就可以被转发的模块；反之，如果先写 @use，用户就不能配置被转发的模块（会报错）。
在处理模块中的 CSS ...
Sass 简述
Sass 是大家都耳熟能详的 css 预处理器
百度搜索出来的是一个过时的中文文档，已经很久没更新了，缺少许多新特性
真正的官网在 google 上才会出现在首页，国内貌似没有人翻译
所以嘛，写这个分类的目的就是把新特性整合一下，方便日后查阅
目录下所有文章均默认使用 Dart Sass，这也是官方推荐的版本
@use
解决 @import 痛点的替代品
与 @import 的主要区别虽然 @use 是用来替代 @import 的，但它被设计成了不同的工作方式，这是有意的。以下是两者之间主要的不同点：
@use 仅使变量、函数和混入可以在当前文件范围使用。它不会将这些东西放到全局作用域。这意味着你可以更容易判断这些东西引用自哪里，并且也意味着你能够用更短的变量名而不用担心名称冲突。
@use 对每一个文件都只加载一次。这可以确保不会生成多余的 CSS 代码。
@use 只能出现在文件开头。并且不能写在嵌套的样式规则中。
对于每个 @use 命令，都只能拥有一个引入的 URL。@import 可以引入多个。
@use 不论是使用 sass 还是 scss 语法，其 URL 都必须添加引号。
基本使用可以使用 @use 从其它 Sass 样式表中加载混入(mixin)、函数(function)和变量，并且将多个样式表的 css 组合到一起。被 @use 加载的样式表被称作“模块(modules)”。同时 Sass 内部也提供了一系列有用的模块。
最基础的使用方法是 @use "&l ...
是否存在监听器
问题看到了一个 vuetify的issue
在只绑定了 click 事件时，该按钮样式为不可点击，实际上是能够点击的:
123<VList> <VListItem title="i am button" @click="foo" /></VList>
复现例子
简单来说就是按钮的样式不正确，并且在最后一个 beta 版本是正常的，3.0 发布后就寄了
简单排查后发现这样一段代码，用于判断按钮是否可点击:
123456const isClickable = computed( () => !props.disabled && props.link !== false && (props.link || link.isClickable.value || (props.value != null && !!list)));
其中最后一行的 link.isClickable 出自一个 hook，封装了根据传参构建链接对象的逻辑:
1con ...
