基础知识
CSS（Cascading Style Sheets）：层叠样式表
层叠三大规则
- 样式表来源规则
样式表来源规则决定了当两个或多个规则具有相同的选择器优先级和源码位置时，哪个规则具有更高的优先级。在这种情况下，最后一个被加载的样式表规则具有更高的优先级。这是因为样式表的加载顺序决定了规则的优先级。
- 选择器优先级规则
选择器优先级规则决定了当两个或多个规则具有相同的源码位置时，哪个规则具有更高的优先级。选择器优先级是由选择器中各个选择器组成部分的特定组合计算得出的。选择器的优先级从高到低依次为：
- !important声明的样式具有最高优先级
- 内联样式（style属性）具有第二高优先级
- ID选择器的优先级高于属性选择器和类选择器
- 多个属性选择器和类选择器的优先级相同，其优先级都低于ID选择器
- 多个元素选择器和伪元素选择器的优先级相同，都比属性选择器和类选择器低
- 通配符选择器的优先级最低，只有当没有其他规则时才会被应用
- 源码位置规则
源码位置规则决定了当两个或多个规则具有相同的选择器优先级时，哪个规则具有更高的优先级。最后出现的规则具有更高的优先级。也就是说，在CSS文件中后面的规则会覆盖前面的规则。这意味着在不同的样式表中，规则的优先级可以通过调整它们在样式表中的位置来改变。
盒模型
- 内容区域（content area）：指元素的实际内容，包括文本、图片等等。
- 内边距区域（padding area）：指元素的内边距，它在内容区域的外围形成一个空白区域，可以通过padding属性设置。
- 边框区域（border area）：指元素的边框，它包围着内边距区域和内容区域，可以通过border属性设置。
- 外边距区域（margin area）：指元素的外边距，它是元素和相邻元素之间的空白区域，可以通过margin属性设置。
布局
- 常规流布局
常规流布局是CSS中最基本的布局方式，也是默认的布局方式。在常规流布局中，HTML元素按照它们在HTML文档中出现的顺序一个接一个地排列，并且尽可能占据可用的宽度。在常规流布局中，每个元素都占据一个矩形框，它的大小由元素的内容、内边距、边框和外边距共同决定。
- 弹性盒子布局
弹性盒子布局是一种灵活的布局方式，它可以自适应容器的大小并且可以在不同的屏幕上自动调整布局。在弹性盒子布局中，容器中的元素可以沿着主轴和交叉轴进行排列。主轴通常是水平的，而交叉轴通常是垂直的。在弹性盒子布局中，可以通过设置元素的flex属性来控制元素的大小和位置。
- 网格布局
网格布局是一种二维布局方式，它可以将页面分成行和列，并且可以控制每个单元格的大小和位置。在网格布局中，可以通过设置网格容器和网格项的属性来控制布局。网格容器可以设置网格行和网格列的大小和数量，而网格项可以指定所在的网格行和网格列。
- 定位布局
定位布局是一种CSS布局方式，它可以将元素相对于文档的位置进行定位。在定位布局中，可以通过设置元素的position属性来指定元素的定位方式。position属性的值可以是static、relative、absolute和fixed。相对定位和绝对定位可以通过设置top、right、bottom和left属性来控制元素的位置。
层叠上下文
CSS的层叠上下文（Stacking Context）是一个独立的三维空间，HTML元素在其中按照一定的顺序（层叠顺序）被堆叠起来。层叠上下文的概念是为了解决在一个页面上多个元素重叠时，如何决定哪个元素应该出现在哪个元素之上的问题。
每个层叠上下文都有一组图层。每个图层都可以有自己的背景、边框、内容等，它们是相互独立的，也就是说它们不会相互影响。
当一个元素生成了一个新的层叠上下文，它会包含所有子元素的层叠。在同一个层叠上下文中，子元素的层叠顺序总是在父元素之上。
一个元素生成层叠上下文的条件包括：
- 根元素；
- position属性值为absolute或fixed的元素；
- z-index属性值不为auto的元素；
- opacity属性值小于1的元素；
- transform属性值不为none的元素；
- mix-blend-mode属性值不为normal的元素；
- filter属性值不为none的元素；
- isolation属性被设置为isolate的元素；
- will-change属性值为任意层叠属性的元素。
响应式设计
媒体查询通过在CSS样式表中添加@media规则实现。在@media规则中，可以指定一个或多个媒体特性，用于判断当前设备是否满足条件，如果满足条件，则应用媒体查询中的CSS规则。
