以下内容，通过练习中提到的通过AI总结的。

<header></header>

盒模型

一、盒模型的基本概念

在 CSS 中，每个元素都被看作是一个“盒子”，这个盒子由以下几个部分组成：

​​内容区域（Content Box）​​：元素的实际内容（如文字、图片等）所在的区域。宽度和高度（width和 height）默认指的是这个区域的尺寸。 ​​
内边距（Padding）​：内容区域与边框之间的空白区域。通过 padding属性设置。
​​边框（Border）​​：围绕在内边距外部的线条。通过 border 属性设置。
外边距（Margin)​​：边框外部的空白区域，用于与其他元素分隔开。通过 margin属性设置。

​​注意​​：box-sizing 只影响 ​​内容区域、内边距和边框​​的计算方式，不会影响外边距（margin）。

作用：
box-sizing是一个用于控制元素​​盒模型（Box Model）​​计算方式的属性。
它决定了元素的宽度（width）和高度（height）如何计算，即是否将​​内边距（padding）​​、​​边框（border）​​和​​外边距（margin）​​包含在内。是否仅计算内容区域（content-box）的尺寸。

二、两种盒模型的对比 举例

1. box-sizing: content-box;（默认值）
​​宽度和高度的计算方式​​：width和 height仅表示​​内容区域​​的尺寸。​​内边距（padding）​​和​​边框（border）​​会额外增加到元素的宽度和高度之外。

​​公式​​：
实际宽度 = width + padding-left + padding-right + border-left + border-right
实际高度 = height + padding-top + padding-bottom + border-top + border-bottom

​​特点​​：
这是 CSS 的默认盒模型。宽度和高度的计算方式比较“直观”，但可能会导致布局计算复杂，尤其是在需要精确控制元素大小时。

​​示例​​：

<div class="box content-box-example">内容</div>
.content-box-example {box-sizing: content-box; /* 默认值，可以省略 */width: 200px;height: 100px;padding: 10px;border: 5px solid black;
}

​​实际效果​​：
内容区域的宽度是 200px，高度是 100px。
加上 padding（左右各 10px，共 20px）和 border（左右各 5px，共 10px）后：
实际宽度 = 200 + 20 + 10 = 230px
实际高度 = 100 + 20 + 10 = 130px

2. box-sizing: border-box;
   ​​宽度和高度的计算方式​​： width和 height表示​​整个盒子​​的尺寸（包括内容区域、内边距和边框）。
   ​​内边距（padding）​​和​​边框（border）​​会包含在元素的宽度和高度之内，不会额外增加。

​​公式​​：
实际宽度 = width（已包含 padding 和 border）
实际高度 = height（已包含 padding 和 border）

​​特点​​：
更加直观和易于控制，尤其是在需要精确布局时。
开发者可以直接设置 width和 height，而不需要额外计算 padding和 border的影响。

​​示例​​：

<div class="box border-box-example">内容</div>
.border-box-example {box-sizing: border-box;width: 200px;height: 100px;padding: 10px;border: 5px solid black;
}

​​实际效果​​：
width和 height已经包含了 padding和 border。
实际宽度 = 200px（包括内容、内边距和边框）。
实际高度 = 100px（包括内容、内边距和边框）。

内容区域的实际宽度 = 200 - 20（padding） - 10（border） = 170px
内容区域的实际高度 = 100 - 20（padding） - 10（border） = 70px

三、总结

特性	描述
作用	控制元素的宽度和高度如何计算，即是否将内边距和边框包含在内。
​​取值​​	content-box（默认值）：宽度和高度仅表示内容区域的尺寸； border-box：宽度和高度表示整个盒子的尺寸（包括内容、内边距和边框）。
​​默认值​​	content-box
​​常见用途​	精确控制元素尺寸、简化布局计算、响应式设计、表单元素样式调整等。
​​全局设置​​	通常会在全局范围内设置 box-sizing: border-box;，以便统一盒模型的计算方式。

​​注意​​：box-sizing不会影响外边距（margin）的计算方式，外边距始终是在盒子的外部。

html, body {box-sizing: border-box;margin: 0;padding: 0;
}*, *::before, *::after {box-sizing: inherit; /* 继承父元素的 box-sizing */
}

Flexbox 弹性盒子布局

Flexbox（Flexible Box Layout，弹性盒子布局）是 CSS3 引入的一种​​一维布局模型​​，用于更高效地分配和对齐容器中的子元素，特别适合处理​​动态内容​​和​​响应式布局​​。它能够轻松实现​​水平居中、垂直居中、等高等宽、自动伸缩​​等传统布局难以完成的效果。

一、Flexbox 的核心概念​​

Flexbox 布局由两个主要部分组成：

• ​​Flex 容器（Flex Container）​​
  通过 display: flex 或 display: inline-flex定义的元素，成为 Flex 容器。
  它的直接子元素会自动成为 **​​Flex 项目（Flex Items）**​​。

• ​​Flex 项目（Flex Items）​​
  Flex 容器的子元素（默认是块级或行内元素，但会被 Flex 容器影响布局）。

二、Flexbox 的基本语法​​

​​1. 定义 Flex 容器​

• display: flex：容器变为块级元素，占据整行。
• display: inline-flex：容器变为行内元素，宽度由内容决定。

​​2. Flex 容器的主要属性​​

Flex 容器控制子元素的排列方式，主要属性包括 5个：
flex-direction（主轴方向）​​;justify-content（主轴对齐方式）​​;align-items（交叉轴对齐方式）​​;flex-wrap（是否换行）​​;align-content（多行对齐方式）​​

​​(1) flex-direction（主轴方向）​​
定义 Flex 项目在容器中的排列方向：

.container {flex-direction: row; /* 默认值，水平从左到右 */flex-direction: row-reverse; /* 水平从右到左 */flex-direction: column; /* 垂直从上到下 */flex-direction: column-reverse; /* 垂直从下到上 */
}

• ​​row​​（默认）：水平排列，从左到右。
• ​​column​​：垂直排列，从上到下。

​​(2) justify-content（主轴对齐方式）​​
定义 Flex 项目在​​主轴​​（默认水平方向）上的对齐方式：

.container {justify-content: flex-start; /* 默认值，左对齐 */justify-content: flex-end; /* 右对齐 */justify-content: center; /* 居中对齐 */justify-content: space-between; /* 两端对齐，项目之间等距 */justify-content: space-around; /* 项目两侧等距 */justify-content: space-evenly; /* 项目之间和两侧等距 */
}

• ​​space-between​​：两端对齐，项目之间等距。
• ​​space-around​​：项目两侧等距（项目之间的间距是两侧的两倍）。
• ​​space-evenly​​：项目之间和两侧完全等距。

​​(3) align-items（交叉轴对齐方式）​​
定义 Flex 项目在​​交叉轴​​（默认垂直方向）上的对齐方式：

.container {align-items: stretch; /* 默认值，拉伸填满容器高度 */align-items: flex-start; /* 顶部对齐 */align-items: flex-end; /* 底部对齐 */align-items: center; /* 垂直居中对齐 */align-items: baseline; /* 基线对齐（文字底部对齐） */
}

​​stretch​​（默认）：项目拉伸填满容器高度（如果项目没有固定高度）。
​​baseline​​：项目的文字基线对齐（适用于文字排版）。

​​(4) flex-wrap（是否换行）
flex-wrap 属性决定当 flex 容器太小时项目的排列方式。
将它设置为 wrap 将允许项目换行到下一行/列。
nowrap（默认值）将阻止项目换行，此时项目可能会收缩以自适应或溢出。​​
定义 Flex 项目是否换行：

.container {flex-wrap: nowrap; /* 默认值，不换行 */flex-wrap: wrap; /* 换行，项目从上到下排列 */flex-wrap: wrap-reverse; /* 换行，项目从下到上排列 */
}

​​wrap​​：如果项目超出容器宽度，会自动换行。

**​​(5) align-content（多行对齐方式）**​​
定义多行 Flex 项目在交叉轴上的对齐方式（仅当 flex-wrap: wrap时生效）：

.container {align-content: stretch; /* 默认值，拉伸填满容器 */align-content: flex-start; /* 顶部对齐 */align-content: flex-end; /* 底部对齐 */align-content: center; /* 垂直居中对齐 */align-content: space-between; /* 两端对齐 */align-content: space-around; /* 两侧等距 */
}

​​3. Flex 项目的主要属性​​

Flex 项目可以单独调整其在容器中的行为：

​​(1) order（排列顺序）​​
定义 Flex 项目的排列顺序（默认 0，数值越小越靠前）：

.item {order: 1; /* 调整顺序 */
}

​​(2) flex-grow（放大比例）​​
定义 Flex 项目如何分配剩余空间：

.item {flex-grow: 1; /* 默认 0，不放大 */
}

如果所有项目 flex-grow: 1，则剩余空间均分。
如果某个项目 flex-grow: 2，则它占据 2 倍于其他项目的空间。

​​(3) flex-shrink（缩小比例）​​
定义 Flex 项目如何收缩以适应容器：

.item {flex-shrink: 1; /* 默认 1，允许缩小 */
}

如果所有项目 flex-shrink: 1，则空间不足时均分收缩。
如果某个项目 flex-shrink: 0，则它不会缩小。

​​(4) flex-basis（初始大小）​​
定义 Flex 项目的初始大小（类似 width，但优先级更高）：

.item {flex-basis: 200px; /* 初始宽度 200px */
}

可以是固定值（如 200px）或百分比（如 50%）。

​​(5) flex（简写属性）​​
flex是 flex-grow、flex-shrink和 flex-basis的简写：

.item {flex: 1 1 200px; /* flex-grow: 1, flex-shrink: 1, flex-basis: 200px */
}

常用简写：
flex: 1→ flex: 1 1 0%（默认等分剩余空间）。
flex: auto→ flex: 1 1 auto（根据内容自动调整）。
flex: none→ flex: 0 0 auto（不伸缩，固定大小）。

​​三、Flexbox 的常见布局示例​​

​​1. 水平居中​​

.container {display: flex;justify-content: center; /* 水平居中 */
}

​​2. 垂直居中​​

.container {display: flex;align-items: center; /* 垂直居中 */
}

​​3. 水平垂直居中​​

.container {display: flex;justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */
}

​​4. 等宽布局​​

.container {display: flex;
}
.item {flex: 1; /* 所有项目等分剩余空间 */
}

​​5. 导航栏布局​​

.nav {display: flex;justify-content: space-between; /* 两端对齐 */align-items: center; /* 垂直居中 */
}

​​四、Flexbox vs Grid 布局​​

特性	Flexbox	Grid
​​布局方向​​	一维（行或列）	二维（行和列）
​​适用场景​​	动态内容、导航栏、卡片布局	复杂网格布局（如仪表盘）
​​对齐控制​​	justify-content和 align-items	justify-items和 align-items
​​项目顺序​​	order属性	grid-column和 grid-row

• ​​Flexbox 适合一维布局​​（如导航栏、卡片列表）。 ​​
• Grid 适合二维布局​​（如仪表盘、复杂网格）。

​五、总结​​

​​Flexbox 是一种强大的 CSS 布局模型​​，适用于动态内容和对齐需求高的场景。

​​核心属性​​：

• 容器：flex-direction, justify-content, align-items, flex-wrap, align-content。
• 项目：order, flex-grow, flex-shrink, flex-basis, flex。

​​常见用途​​：

• 水平/垂直居中。 等宽布局。 导航栏、卡片列表。

img object-fit

特性	说明
作用​​	控制图片/视频等替换元素在固定尺寸容器内的填充方式（是否拉伸、裁剪或留白）。
​​核心取值​​	- fill（默认）：拉伸填满容器（可能变形）。 - contain：完整显示内容（可能留白）。 - cover：填满容器并裁剪多余部分（保持比例）。 - none：保持原始尺寸（可能溢出）。 - scale-down：选择 none或 contain中更合适的（避免变形或溢出）。
​​常见场景​​	- 响应式图片/视频布局（如卡片、弹窗）。 - 固定比例显示图标/Logo。 - 视频适配固定尺寸播放器。
​​兼容性​	现代浏览器支持，IE 不支持（需用 background-image或 padding-top替代）。
​​搭配属性​​	object-position：控制内容在容器内的对齐位置（如居中、左上角等）。

注意​​：object-fit只影响元素内容的显示方式，不会改变元素本身的尺寸（即 width和 height仍需显式设置）。

• object-fit控制内容的缩放方式 object-position可以控制内容的​​对齐方式​​（类似于
  background-position）。

gap

gap CSS 缩写属性设置行和列之间的间隙，也被称为网格间距（gutter）。 gap 属性以及 row-gap 和 column-gap 子属性用来设置 flex、grid 和多列布局的间隙。 可以将此属性应用到容器元素。

​​CSS ::after伪元素详解​​

​​1. 基本概念​​

::after是 CSS ​​伪元素​​之一，用于在​​选定元素的内容之后​​插入一个​​虚拟的子元素​​（实际是生成的内容）。它常用于添加装饰性内容或实现特定布局效果。

​​注意​​：
::after生成的内容是​​独立的子元素​​，但不会出现在 HTML 源码中（纯 CSS 实现）。
类似伪元素还有 ::before（在内容之前插入内容）。

​​2. 基础语法​​

selector::after {content: "插入的内容"; /* 必须属性 *//* 其他样式属性（如 display、color、position 等） */
}

​​content​​：必需属性，定义插入的内容（可以是文本、空字符串或图像）。
​​默认显示​​：生成的元素是 inline行内元素（可通过 display修改）。

3. 关键注意事项​​

• content属性必填​​ 即使不需要插入内容（如清除浮动），也必须设置 content: “”（空字符串）。
• ​​生成的元素是行内元素​​ 默认 display: inline，可通过 display: block或 flex等修改布局。
• ​​无法直接选中或绑定事件​​ ::after生成的内容无法通过 JavaScript 直接操作或绑定事件（它是纯样式层面的）。
• ​​与 ::before的区别​​ ::before在内容前插入，::after在内容后插入。