文章目录
以下内容，通过练习中提到的通过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
- 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在内容后插入。