Day 1 - 层叠性、继承性、优先级
概述
从 CSS 角度学习如何在项目开发中做到项目的 模块化 和 工程化 开发：
- 基础 篇：CSS 基本知识、难懂的概念
- 预处理篇：三大预处理器框架的语法及用法
- 进阶篇：PostCSS 的插件机制，以及 Webpack、Vite 这些打包工具跟 CSS 的关系与配置
- 原子化篇：TailwindCSS 和 UnoCSS 两大原子化框架
- 实践篇：案例：小程序、后端管理框架
CSS 作用
- 样式化网页元素
- 布局控制
- 响应式设计
- 动画和过渡效果
- 响应用户交互
- 字体和排版控制
CSS 三大特性
- 层叠性（Cascading）
- 继承性（Inheritance）
- 优先级（Specificity）
层叠性
层叠的概念：CSS = Cascading Style Sheets（层叠样式表）
类似于 Photoshop 图层概念
样式表可以来自三个地方：link、style、行内style，三个不同源头的样式共同作用于同一元素上，就形成了层级关系，也就是“层叠”。
继承性
如果子元素没有设置相当的属性，会默认从父元素继承。
CSS 可继承的属性：
CSS 不可继承的属性：
四个常见的继承属性值
default：浏览器默认值inherit：继承父元素的值initial：设置为初始值unset：重置为关联样式或初始值
DEMO 1：https://stackblitz.com/edit/stackblitz-starters-kut1jw
优先级
TODO
BFC
BFC（Block Formatting Context）
通俗地来说，设置了 BFC 的元素，会形成一个独立的布局环境，其内部的元素按一定的规则来布局定位不会受到外部元素的影响，同样也不会对其他外部元素产生影响。
BFC 可以产生的效果：
- 消除边距折叠：普通情况下，当两个相邻的块级盒子的垂直边距相遇时，它们会发生折叠。但是在同一个 BFC 中的块级盒子之间的边距不会折叠，保持各自独立的边距
- 清除浮动：当一个元素浮动时，它会脱离正常的文档流，可能引起父容器高度塌陷。然而，当一个容器形成了 BFC，它会包含浮动元素，并计算它们的尺寸，使父容器能够正确地包裹浮动元素
- 自适应两栏布局：通过创建一个包含浮动元素的容器并形成 BFC，可以实现自适应的两栏布局，其中一个列可以通过浮动，另一个列根据内容自动扩展。因为 BFC 元素会和浮动元素产生边界
那么如何产生 BFC 环境呢？—— 触发 BFC 的条件：
- 根元素（
html元素）是一个 BFC - 设置元素的
float属性为left或right - 设置元素的
position属性为absolute或fixed - 设置元素的
display属性为inline-block、table-cell、table-caption、flex、inline-flex、grid或inline-grid - 设置元素的
overflow属性为非visible的值（例如auto、hidden、scroll等）
DEMO 2：TODO