position属性（定位）
static（默认值）
定位规则：元素遵循正常的文档流，按照 HTML 文档中元素出现的先后顺序进行布局，top、right、bottom、left 和 z-index 属性对该元素不起作用。
示例场景：普通网页中的段落、标题等元素默认都是 static 定位，如博客文章里的正文内容段落。
relative（相对定位）
定位规则：元素先按照正常文档流进行布局，然后再根据 top、right、bottom、left 的值相对于自身原本的位置进行偏移。它在文档流中占据的空间仍然是原来的位置，不会影响其他元素的布局。
示例场景：当需要微调某个元素的位置，同时又不想改变文档流的整体布局时使用。比如将一个按钮向右下方稍微移动一点位置。
absolute（绝对定位）
定位规则：元素脱离正常文档流，相对于最近的已定位祖先元素（position值不是 static 的祖先元素）进行定位。如果没有已定位的祖先元素，则相对于初始包含块（通常是视口）进行定位。元素在文档流中不再占据空间，会覆盖其他元素。
示例场景：常用于创建弹窗、悬浮菜单等，比如网页上的广告弹窗，可通过绝对定位精确控制其在页面中的位置。
fixed（固定定位）
定位规则：元素脱离正常文档流，相对于浏览器视口进行定位，即使页面滚动，元素的位置也不会改变。它在文档流中不占据空间，会覆盖其他元素。
示例场景：常用于固定在页面顶部的导航栏、底部的返回顶部按钮等，方便用户随时访问。
sticky（粘性定位）
定位规则：这是相对定位和固定定位的混合。在目标区域在屏幕中可见时，元素按照正常文档流进行布局，表现为相对定位；当目标区域滚动到屏幕之外时，元素就变成固定定位，固定在指定的位置（由 top、right、bottom、left 决定）。
示例场景：常见于侧边栏目录，在用户滚动页面时，目录一开始随页面滚动，当滚动到一定位置后，目录固定在屏幕一侧方便用户快速定位章节。
color （颜色）
rgba 是 CSS 中表示颜色的一种方式，其中 a 代表 alpha 通道，用于控制透明度，取值范围是 0（完全透明）到 1（完全不透明）
color: rgba(red, green, blue, alpha)
flex 布局详解
一、flex 布局概述
flex 布局（Flexible Box Layout）是一种用于创建灵活且响应式的页面布局的 CSS 布局模式，它能够更轻松地分配空间和对齐元素，尤其适用于复杂的页面结构和动态内容。与传统的基于块级元素或内联元素的布局方式相比，flex 布局具有更强的灵活性和适应性。
二、flex 布局的基本概念
flex 容器（flex container）：应用了 display: flex 或 display: inline-flex 属性的元素，是 flex 布局的基础。
flex 项目（flex items）：flex 容器的直接子元素，会自动成为 flex 项目。
主轴（main axis）：flex 项目排列的主要方向，默认是水平方向（从左到右）。
交叉轴（cross axis）：与主轴垂直的方向，默认是垂直方向（从上到下）。
主轴起点（main start）：主轴的开始位置，默认是容器的左边缘。
主轴终点（main end）：主轴的结束位置，默认是容器的右边缘。
交叉轴起点（cross start）：交叉轴的开始位置，默认是容器的上边缘。
交叉轴终点（cross end）：交叉轴的结束位置，默认是容器的下边缘。
三、flex 容器的属性
以下是 flex 容器可以设置的主要属性：
display
作用：指定元素为 flex 容器。
取值：
flex：元素作为块级 flex 容器。
inline-flex：元素作为内联 flex 容器。
flex-direction
作用：设置主轴的方向，从而确定 flex 项目的排列方向。
取值：
row（默认值）：主轴为水平方向，项目从左到右排列。
row-reverse：主轴为水平方向，项目从右到左排列。
column：主轴为垂直方向，项目从上到下排列。
column-reverse：主轴为垂直方向，项目从下到上排列。
flex-wrap
作用：设置 flex 项目是否换行。
取值：
nowrap（默认值）：项目不换行，可能会溢出容器。
wrap：项目在必要时换行，第一行在上方。
wrap-reverse：项目在必要时换行，第一行在下方。
flex-flow
作用：flex-direction 和 flex-wrap 的简写属性，用于同时设置主轴方向和换行方式。
语法：flex-flow:
示例：flex-flow: row wrap
justify-content
作用：设置 flex 项目在主轴上的对齐方式。
取值：
flex-start（默认值）：项目对齐主轴起点。
flex-end：项目对齐主轴终点。
center：项目在主轴上居中对齐。
space-between：项目之间的间隔相等，两端对齐容器边缘。
space-around：项目之间的间隔相等，项目与容器边缘的间隔是项目之间间隔的一半。
space-evenly：项目之间和项目与容器边缘的间隔都相等。
align-items
作用：设置 flex 项目在交叉轴上的对齐方式。
取值：
stretch（默认值）：项目拉伸以填满交叉轴（如果项目未设置高度或高度为 auto）。
flex-start：项目对齐交叉轴起点。
flex-end：项目对齐交叉轴终点。
center：项目在交叉轴上居中对齐。
baseline：项目以第一行文字的基线对齐。
align-content
作用：当 flex 项目有多行时，设置行与行之间在交叉轴上的对齐方式。
取值：
stretch（默认值）：各行拉伸以填满交叉轴。
flex-start：各行对齐交叉轴起点。
flex-end：各行对齐交叉轴终点。
center：各行在交叉轴上居中对齐。
space-between：各行之间的间隔相等，两端对齐容器边缘。
space-around：各行之间的间隔相等，行与容器边缘的间隔是行之间间隔的一半。
四、flex 项目的属性
以下是 flex 项目可以设置的主要属性：
order
作用：设置 flex 项目的排列顺序，数值越小，排列越靠前。
取值：整数（默认值为 0）。
flex-grow
作用：设置 flex 项目的增长因子，决定项目在有剩余空间时的扩展比例。
取值：非负整数（默认值为 0）。
示例：如果所有项目的 flex-grow 都为 1，则它们将等比例扩展；如果一个项目的 flex-grow 为 2，其他为 1，则该项目将占据两倍的剩余空间。
flex-shrink
作用：设置 flex 项目的收缩因子，决定项目在空间不足时的收缩比例。
取值：非负整数（默认值为 1）。
示例：如果所有项目的 flex-shrink 都为 1，当空间不足时，它们将等比例收缩；如果一个项目的 flex-shrink 为 0，其他为 1，则该项目将不收缩。
flex-basis
作用：设置 flex 项目在主轴上的初始大小。
取值：长度值（如 200px）或 auto（默认值，根据项目内容确定大小）。
示例：flex-basis: 100px
flex
作用：flex-grow、flex-shrink 和 flex-basis 的简写属性，用于快速设置项目的伸缩性。
语法：flex:
常见简写形式：
flex: auto：等同于 flex: 1 1 auto
flex: none：等同于 flex: 0 0 auto
flex:
align-self
作用：覆盖容器的 align-items 属性，单独设置某个项目在交叉轴上的对齐方式。
取值：与 align-items 相同，另外还有 auto（默认值，继承容器的 align-items 属性）。