这是我参与「第五届青训营」伴学笔记创作活动的第 2 天

@规则（at-rule）

1. @import "路径"：在一个css文件中导入另外一个css文件

2. @charset "utf-8"：告诉浏览器该css文件使用的字符编码集utf-8

（但该指令必须写在第一行）

---

web字体和图标

web字体

1. 解决用户电脑没有安装相应字体的问题，强制让用户下载该字体

2. 使用font-face指令：制作一个新字体

web图标

iconfont网站

---

块级格式化上下文（BFC）

BFC就是一个独立渲染的隔离容器，规定了在该区域常规流块级盒子的布局，内部的子元素不会影响到外面的布局

BFC（Block Formatting context）块级上下文

如何触发：

• 根元素HTML
• float值为 非none
• position值为 absolute fixed
• display值为 inline-block flex....
• overflow值为 非visible

作用：避免外边距重叠、清除浮动、阻止被浮动元素覆盖

1. （Block Formatting Context）它是一块独立的渲染区域，规定了在该区域常规流块盒的布局

• 常规流块盒在水平方向上，必须撑满包含块
• 常规流块盒在包含块的垂直方向上依次摆放
• 常规流块盒若外边距无缝相邻，则外边距合并（属于同一个BFC的会发生外边距重叠）
• 常规流块盒的自动高度和摆放位置，无视浮动元素和绝对定位；但是在计算BFC的高度时，会计算浮动元素的高度
• BFC区域不会和浮动盒子产生交集（重叠），而是紧贴浮动边缘（左侧浮动，右侧BFC宽度自适应）

BFC渲染区域

由某个HTML元素创建，以下元素会在其内部创建BFC区域：

• 根元素：意味着元素创建的BFC区域，覆盖了网页中的所有元素
• float值为 非none
• position值为 absolute fixed
• display值为 inline-block flex....
• overflow值为 非visible

BFC具体规则

1. 创建BFC的元素，它的自动高度需要计算浮动元素

（可用来解决高度坍塌的问题）

• overflow：hidden
• float：left
• position：absolute

2. 创建BFC的元素，他的边框盒不会与浮动元素重叠

3. 创建BFC的元素，不会和它的子元素进行外边距合并

（例如：元素G处在根元素的BFC区域，而元素H处在元素G的BFC区域，因此两者的外边距不会合并）