BFC：块级格式化上下文
BFC（块级格式化上下文）是CSS布局模型中的一个重要概念，用于描述元素在布局中的渲染规则和行为。BFC可以看作是一个独立的容器，容器内部的元素按照一定规则进行布局和渲染。
BFC具有以下特点和行为：
- BFC元素的布局规则：
- BFC内的元素在垂直方向上按照从上到下的顺序布局。
- BFC内的块级元素在水平方向上，相邻元素之间会自动形成一个边距（Margin Collapse），可以通过一些方式阻止边距合并。
- BFC元素内部也可以包含浮动元素，不会发生浮动溢出的问题。
- BFC元素可以通过设置
overflow属性为非visible值来创建，也可以是根元素或使用特定的CSS属性（如float、position: absolute/fixed等）触发。
- 边距合并（Margin Collapse）：
- 当相邻的垂直外边距相遇时，它们会合并成一个较大的外边距。这种现象称为边距合并。
- 在BFC内部，相邻块级元素之间不会发生边距合并。
- 当一个元素的上外边距与其内容的第一个子元素的上外边距相遇时，边距合并也可能发生。
- 清除浮动：
- BFC可以阻止父级元素因为浮动元素导致高度塌陷的问题，即清除浮动。
- 当一个元素的子元素都是浮动元素时，父元素会发生高度塌陷，这时可以给父元素触发BFC属性，使其包含浮动子元素。
使用BFC的场景和优势：
- 阻止边距合并，使得元素间的边距表现更符合预期。
- 清除浮动，避免父元素因子浮动元素而导致的布局问题。
- 可以实现自适应两栏布局，避免浮动引起的间隙和高度不一致的问题。
- 可以阻止元素被浮动元素覆盖，解决包含浮动元素的容器父级高度塌陷的问题。
总结来说，BFC是CSS布局中的一种重要概念，它定义了元素在布局中的一些特性和行为，可以通过创建BFC来控制元素的布局规则、阻止边距合并和清除浮动等问题，从而更好地进行网页布局。
CSS如何设置高度和宽度一样
要将元素的高度和宽度设置为相同的值，可以使用CSS的width属性和height属性，并将它们设置为相同的数值或百分比。
例如，如果要将一个元素的高度和宽度都设置为200像素，可以使用以下CSS代码：
.element { width: 200px; height: 200px; }
如果要将元素的高度和宽度都设置为相同的百分比，可以使用以下CSS代码：
.element { width: 50%; height: 50%; }
这样，元素的高度和宽度将会按照相同的比例进行设置。
另外，如果想要将一个元素的高度和宽度设置为相同的自动尺寸，可以使用相对单位vh（视窗高度单位）或vw（视窗宽度单位）。
.element { width: 50vh; height: 50vh; }
这样，元素的高度和宽度都将相对于视窗的高度的50%进行设置，从而实现相同的自动尺寸效果。
需要注意的是，使用百分比或自动尺寸来设置相同的高度和宽度时，需要确保元素的父元素具有确定的高度和宽度，否则无法正确计算百分比或自动尺寸。
transition 和 animation 的区别
transition和animation都是CSS中用于实现动画效果的属性，它们有些相似，但也有一些不同之处。
区别如下：
- 用法和语法：
transition：用于在一个属性的两个状态之间平滑过渡。通过指定属性、时长、过渡效果类型和延迟等来定义。常用于鼠标悬停、焦点变化等触发事件。animation：用于创建复杂的、多个关键帧的动画效果。通过在关键帧之间定义动画属性和时长等来描述动画。可以定义动画的持续时间、循环次数、缓动函数等。
- 动画类型：
transition：用于属性的过渡效果，在一个属性值到另一个属性值之间平滑过渡，可以改变元素的位置、大小、颜色等。animation：可以实现更复杂的动画效果，可以使元素在页面中自由移动、旋转、渐变、缩放等。
- 关键帧（keyframes）：
transition：没有显式的关键帧，只有起始状态和结束状态。animation：通过关键帧来定义动画的不同状态，可以设置多个关键帧，指定不同的持续时间和动画效果。
- 循环：
transition：只能在触发动画的事件发生时完成一次过渡。animation：可以指定动画的循环次数（次数、无限循环）。
- 控制：
transition：由属性变化触发，常用于鼠标悬停、焦点变化等。通过JavaScript来控制属性变化来触发过渡。animation：可以通过CSS类添加和删除、通过JavaScript控制动画的播放、暂停、重置。
总结来说，transition适合简单的属性过渡效果，可以在不同状态之间平滑过渡。animation可以实现更复杂的动画效果，具有更多的控制选项，并可以定义多个关键帧来描述动画的不同状态。根据具体的需求和动画效果的复杂程度来选择使用哪种动画属性。
什么是 JWT – JSON WEB TOKEN
JWT（JSON Web Token）是一种基于JSON格式的开放标准（RFC 7519），用于在网络中传输信息的安全方法。它由三部分组成，通过点号(.)分隔开：
- Header（头部）：包含关于令牌的元数据和加密算法的信息。通常包括一个类型（typ）和一个使用的加密算法（alg）。
- Payload（载荷）：也叫做Claims（声明），用于携带实际的用户数据。它可以包含一些预定义的字段（例如：iss：令牌的发行者、sub：令牌的主题、exp：令牌的过期时间等），也可以包含自定义的字段。
- Signature（签名）：由头部、载荷、密钥和指定的签名算法生成。用于验证令牌的完整性和真实性。
JWT的工作流程如下：
- 用户通过身份验证后，服务器为用户生成一个JWT并将其返回给用户。
用户在后续的请求中携带JWT放在请求头的Authorization字段中，例如：Authorization: Bearer 。- 服务器接收到请求后，解码JWT，验证签名是否有效和未过期，并提取其中的用户数据来进行验证和授权。
JWT的优点和特点有：
- 轻量和自包含：JWT本身是一个紧凑的字符串，可以方便地在网络上进行传输。它包含了自身所需的认证和授权信息，避免了对服务器的额外存储和查询负担。
- 基于标准化：JWT遵循JSON格式和开放的标准，广泛支持，可以跨平台、多语言使用。
- 安全性：JWT的签名验证确保了令牌的完整性和真实性，并可以进行基于密钥的身份验证。
- 可扩展性：JWT的载荷（Claims）可以自定义添加字段来携带更多信息，满足不同场景的需求。
需要注意的是，尽管JWT本身是被签名的，但它并不加密。因此，敏感的数据不应该直接存储在JWT的载荷中，或者使用其他加密机制来保护敏感数据。
