CSS功能汇总

以下代码是作者收集整理仅供参考，如有问题欢迎大家在留言区批评指正；版权所有，翻印必究，如有雷同纯属巧合，转载请注明出处。希望我的文章能帮助到您！

布局控制

CSS 提供了多种布局控制功能，使得开发者能够创建复杂的页面结构。以下是一些常用的CSS布局控制功能：
1. display 属性
   - `display: block;` 将元素设置为块级元素。
   - `display: inline;` 将元素设置为内联元素。
   - `display: inline-block;` 将元素设置为内联块级元素。
   - `display: flex;` 启用 Flexbox 布局模型。
   - `display: grid;` 启用 Grid 布局模型。
   - `display: none;` 隐藏元素。

2. Flexbox 布局
   - `flex-direction: row | row-reverse | column | column-reverse;` 定义主轴方向。
   - `justify-content: flex-start | flex-end | center | space-between | space-around;` 沿主轴对齐项目。
   - `align-items: stretch | flex-start | flex-end | center | baseline;` 沿交叉轴对齐项目。
   - `flex-wrap: nowrap | wrap | wrap-reverse;` 定义容器内项目是否换行。
   - `align-content: stretch | flex-start | flex-end | center | space-between | space-around;` 多根轴线对齐方式。
   - `order: <number>;` 定义项目的排列顺序。
   - `flex-grow: <number>;` 定义项目的放大比例。
   - `flex-shrink: <number>;` 定义项目的缩小比例。
   - `flex-basis: <length> | auto;` 定义项目占据的主轴空间。

3. Grid 布局
   - `grid-template-columns: <track-size> ...;` 定义网格的列。
   - `grid-template-rows: <track-size> ...;` 定义网格的行。
   - `grid-column: <start-line> / <end-line>;` 定义项目的列位置。
   - `grid-row: <start-line> / <end-line>;` 定义项目的行位置。
   - `grid-template-areas: "<grid-area-name> | . | none | ...";` 定义网格区域。
   - `grid-gap: <line-size>;` 定义网格行和列之间的间隔。
   - `justify-items: start | end | center | stretch;` 沿行轴对齐网格项。
   - `align-items: start | end | center | stretch;` 沿列轴对齐网格项。
   - `place-items: <align-items> <justify-items>;` 设置对齐方式的简写属性。

4. 多列布局
   - `columns: <column-width> <column-count>;` 设置列宽和列数。
   - `column-gap: <length> | normal;` 设置列之间的间隔。
   - `column-rule: <column-rule-width> <column-rule-style> <column-rule-color>;` 设置列之间的边框。

5. 浮动和清除浮动
   - `float: left;` 或 `float: right;` 使元素浮动。
   - `clear: left;`、`clear: right;` 或 `clear: both;` 清除浮动。

6. 定位
   - `position: static;` 默认值，无特殊定位。
   - `position: relative;` 相对定位。
   - `position: absolute;` 绝对定位，相对于最近的非 static 定位祖先元素。
   - `position: fixed;` 固定定位，相对于浏览器窗口。
   - `position: sticky;` 粘性定位，基于用户的滚动位置。

7. 响应式布局
   - 使用媒体查询（`@media`）根据不同屏幕尺寸应用不同样式。
   - 使用百分比、视口单位（vw/vh）、em/rem 等灵活的单位。

8. 盒模型
   - `box-sizing: content-box;` 标准盒模型，宽度和高度不包括边框和内边距。
   - `box-sizing: border-box;` 怪异盒模型，宽度和高度包括边框和内边距。

这些是CSS中用于布局控制的一些关键功能。通过这些功能，开发者可以创建从简单到复杂的不同布局结构。随着CSS的发展，新的布局模式和技术（如Flexbox和Grid）已经逐渐取代了一些传统的布局方法（如浮动和表格布局），提供了更加强大和灵活的布局控制能力。

样式设置

CSS 提供了广泛的样式设置功能，可以用来美化网页元素。以下是一些常用的 CSS 样式设置功能：
1. 字体样式
   - `font-family`: 设置字体类型。
   - `font-size`: 设置字体大小。
   - `font-weight`: 设置字体粗细。
   - `font-style`: 设置字体风格（如斜体）。
   - `font-variant`: 设置小型大写字母。
   - `font`: 字体属性的简写，可以同时设置字体大小、风格、粗细等。

2. 文本样式
   - `color`: 设置文本颜色。
   - `line-height`: 设置行高。
   - `text-align`: 设置文本对齐方式。
   - `text-decoration`: 设置文本装饰（如下划线、删除线）。
   - `text-transform`: 控制文本大小写。
   - `text-indent`: 设置首行缩进。
   - `letter-spacing`: 设置字符间距。
   - `word-spacing`: 设置单词间距。
   - `white-space`: 设置如何处理空白。

3. 背景样式
   - `background-color`: 设置背景颜色。
   - `background-image`: 设置背景图像。
   - `background-repeat`: 设置背景图像的平铺方式。
   - `background-position`: 设置背景图像的位置。
   - `background-size`: 设置背景图像的大小。
   - `background-attachment`: 设置背景图像是否固定。
   - `background`: 背景属性的简写。

4. 边框样式
   - `border-style`: 设置边框样式（如实线、虚线）。
   - `border-width`: 设置边框宽度。
   - `border-color`: 设置边框颜色。
   - `border-radius`: 设置边框圆角。
   - `border`: 边框属性的简写。
   - `outline`: 设置元素轮廓。

5. 列表样式
   - `list-style-type`: 设置列表项标记的类型。
   - `list-style-image`: 设置列表项标记的图像。
   - `list-style-position`: 设置列表项标记的位置。
   - `list-style`: 列表样式的简写。

6. 表格样式
   - `border-collapse`: 设置表格边框合并。
   - `border-spacing`: 设置表格边框间距。
   - `caption-side`: 设置表格标题位置。
   - `empty-cells`: 设置是否显示表格中的空单元格。
   - `table-layout`: 设置表格布局算法。

7. 盒模型
   - `margin`: 设置外边距。
   - `padding`: 设置内边距。
   - `width`: 设置元素的宽度。
   - `height`: 设置元素的高度。
   - `box-shadow`: 设置元素的阴影效果。
   - `opacity`: 设置元素的透明度。

8. 过渡和动画
   - `transition`: 设置元素状态变化时的过渡效果。
   - `animation`: 设置元素的动画效果。

9. 伪类和伪元素
   - `::before` 和 `::after`: 在元素内容前后插入内容。
   - `:hover`: 鼠标悬停时的样式。
   - `:active`: 元素被激活时的样式。
   - `:focus`: 元素获得焦点时的样式。
   - `:visited`: 链接被访问后的样式。

10.其他
    - `cursor`: 设置鼠标指针的样式。
    - `vertical-align`: 设置元素的垂直对齐方式。
    - `quotes`: 设置引号的类型。
    - `content`: 与伪元素一起使用，插入内容。

这些是 CSS 中用于样式设置的一些关键功能。通过这些功能，开发者可以精确控制网页的外观，创建吸引人的用户界面。随着 CSS 的发展，新的样式特性和功能不断被添加，使得网页设计更加多样化和创新。

盒模型

CSS 盒模型描述了如何计算一个元素的总宽度和高度。它包括元素的内容、内边距、边框和外边距。以下是一些与 CSS 盒模型相关的功能代码汇总：
1. 设置宽度和高度
   - `width`: 设置元素的宽度。
   - `height`: 设置元素的高度。

2. 内边距（Padding）
   - `padding-top`: 设置元素上内边距。
   - `padding-right`: 设置元素右内边距。
   - `padding-bottom`: 设置元素下内边距。
   - `padding-left`: 设置元素左内边距。
   - `padding`: 内边距的简写属性，可以一次性设置上、右、下、左内边距。

3.边框（Border）
   - `border-top-style`: 设置顶部边框样式。
   - `border-right-style`: 设置右侧边框样式。
   - `border-bottom-style`: 设置底部边框样式。
   - `border-left-style`: 设置左侧边框样式。
   - `border-style`: 边框样式的简写属性，可以一次性设置上、右、下、左边框样式。
   - `border-top-width`: 设置顶部边框宽度。
   - `border-right-width`: 设置右侧边框宽度。
   - `border-bottom-width`: 设置底部边框宽度。
   - `border-left-width`: 设置左侧边框宽度。
   - `border-width`: 边框宽度的简写属性，可以一次性设置上、右、下、左边框宽度。
   - `border-top-color`: 设置顶部边框颜色。
   - `border-right-color`: 设置右侧边框颜色。
   - `border-bottom-color`: 设置底部边框颜色。
   - `border-left-color`: 设置左侧边框颜色。
   - `border-color`: 边框颜色的简写属性，可以一次性设置上、右、下、左边框颜色。
   - `border`: 边框的简写属性，可以一次性设置边框的样式、宽度和颜色。

4. 外边距（Margin）
   - `margin-top`: 设置元素上外边距。
   - `margin-right`: 设置元素右外边距。
   - `margin-bottom`: 设置元素下外边距。
   - `margin-left`: 设置元素左外边距。
   - `margin`: 外边距的简写属性，可以一次性设置上、右、下、左外边距。
   - `margin-collapse`: 控制块级元素垂直外边距的合并。

5.盒模型类型
   - `box-sizing`: 定义盒模型的宽度和高度如何计算，例如 `content-box`（标准盒模型）或 `border-box`（怪异盒模型）。

6. 其他盒模型相关属性
   - `box-shadow`: 给元素添加阴影效果。
   - `outline`: 在元素周围绘制一条轮廓线，位于边框边缘之外。
   - `overflow`: 设置当内容溢出元素框时如何处理，例如 `visible`、`hidden`、`scroll` 或 `auto`。

这些属性允许开发者精确控制元素的大小、间距和外观，是CSS布局和设计中不可或缺的部分。

响应式设计

响应式设计是一种网页设计方法，旨在使网页能够响应用户的行为和环境，包括屏幕大小、平台和方向。CSS 提供了多种特性来支持响应式设计，以下是一些常用的功能代码汇总：
1. 媒体查询（Media Queries）
   - `@media screen and (max-width: 600px) { /* CSS规则 */ }`: 当屏幕宽度小于或等于600px时应用的样式。
   - `@media screen and (min-width: 601px) { /* CSS规则 */ }`: 当屏幕宽度大于600px时应用的样式。
   - `@media screen and (orientation: portrait) { /* CSS规则 */ }`: 当屏幕处于纵向模式时应用的样式。
   - `@media screen and (orientation: landscape) { /* CSS规则 */ }`: 当屏幕处于横向模式时应用的样式。

2. 百分比宽度
   - `width: 100%;`: 设置元素的宽度为父元素宽度的100%。
   - `max-width`: 设置元素的最大宽度。
   - `min-width`: 设置元素的最小宽度。

3.视口单位（Viewport Units）
   - `vw`: 视口宽度的百分比。
   - `vh`: 视口高度的百分比。
   - `vmin`: 视口宽度和高度中较小的那个的百分比。
   - `vmax`: 视口宽度和高度中较大的那个的百分比。

4.弹性盒子（Flexbox）
   - `display: flex;`: 创建一个弹性容器。
   - `flex-direction`: 定义弹性项目的方向。
   - `flex-wrap`: 定义弹性项目是否应该换行。
   - `justify-content`: 定义项目在主轴上的对齐方式。
   - `align-items`: 定义项目在交叉轴上的对齐方式。

5. 网格布局（Grid）
   - `display: grid;`: 创建一个网格容器。
   - `grid-template-columns`: 定义网格的列。
   - `grid-template-rows`: 定义网格的行。
   - `grid-gap`: 定义网格行和列之间的间隔。

6. 相对单位
   - `em`: 相对于父元素的字体大小。
   - `rem`: 相对于根元素的字体大小。
   - `ex`: 相对于小写字母“x”的高度。

7. 图像响应式
   - `max-width: 100%;`: 确保图像不会超过其容器宽度。
   - `height: auto;`: 保持图像的纵横比。

8. 媒体查询链接（Link Tags）
   - `<link rel="stylesheet" media="screen and (max-width: 600px)" href="mobile.css">`: 根据媒体查询条件加载不同的CSS文件。

9.CSS变量（Custom Properties）
   - `--main-font-size: 16px;`: 定义一个可在整个文档中重复使用的变量。

10. 断点的使用
    - `@media screen and (min-width: 768px) and (max-width: 1024px) { /* CSS规则 */ }`: 定义一个特定范围的断点。

这些CSS功能是实现响应式设计的核心工具。通过结合使用这些功能，开发者可以创建在不同设备和屏幕尺寸上都能良好工作的网页。

动画和过渡

CSS 动画和过渡功能允许开发者创建平滑的视觉变化，增强网页的交互性和吸引力。以下是一些常用的 CSS 动画和过渡功能代码汇总：
1.过渡（Transitions）
   - `transition-property`: 定义应用过渡的 CSS 属性。
   - `transition-duration`: 定义过渡效果持续的时间。
   - `transition-timing-function`: 定义过渡效果的时间曲线，如 `ease`、`linear`、`ease-in`、`ease-out`、`ease-in-out` 等。
   - `transition-delay`: 定义过渡效果开始之前的延迟时间。
   - `transition`: 过渡效果的简写属性，可以一次性设置 `transition-property`、`transition-duration`、`transition-timing-function` 和 `transition-delay`。

2. 关键帧动画（Keyframe Animations）
   - `@keyframes`: 定义动画序列的关键帧。
   - `animation-name`: 指定应用于元素的动画名称。
   - `animation-duration`: 指定动画完成一个周期所花费的时间。
   - `animation-timing-function`: 指定动画的时间曲线。
   - `animation-delay`: 指定动画在开始前的延迟时间。
   - `animation-iteration-count`: 指定动画的播放次数，可以是数字或者 `infinite`。
   - `animation-direction`: 指定动画是否应该轮流反向播放。
   - `animation-fill-mode`: 指定动画在执行之前和之后如何应用到目标元素上。
   - `animation-play-state`: 指定动画是否正在运行或已暂停。
   - `animation`: 动画的简写属性，可以一次性设置 `animation-name`、`animation-duration`、`animation-timing-function`、`animation-delay`、`animation-iteration-count`、`animation-direction` 和 `animation-fill-mode`。

3. 变形（Transforms）
   - `transform`: 应用变形效果，如平移（`translate`）、旋转（`rotate`）、缩放（`scale`）、倾斜（`skew`）等。
   - `transform-origin`: 设置变形的原点。

4. 透视（Perspective）
   - `perspective`: 为 3D 变形元素提供透视效果。
   - `perspective-origin`: 设置透视视图的消失点。

5.背面可见性（Backface Visibility）
   - `backface-visibility`: 指定当元素背面朝向观察者时是否可见。

6.will-change 属性
   - `will-change`: 提前通知浏览器元素将要改变的内容，以便浏览器可以优化这些更改的渲染。

这些 CSS 功能可以实现各种动画和过渡效果，从而创造出丰富和流畅的用户体验。通过合理使用这些功能，开发者可以提升网页的视觉效果和交互性。

伪类和伪元素

CSS 伪类和伪元素是一系列特殊的类和元素，它们用于选择文档树之外的特定元素或元素的特殊状态。以下是一些常用的 CSS 伪类和伪元素功能代码汇总：
1. 伪类（Pseudo-classes）
   - `:link`: 选择未被访问的链接。
   - `:visited`: 选择已被访问的链接。
   - `:hover`: 选择鼠标悬停在其上的元素。
   - `:active`: 选择被激活的元素（例如，被点击的链接）。
   - `:focus`: 选择获得焦点的元素（例如，输入框）。
   - `:target`: 选择当前 URL 目标元素。
   - `:root`: 选择文档的根元素。
   - `:empty`: 选择没有子元素的元素。
   - `:first-child`: 选择其父元素的首个子元素。
   - `:last-child`: 选择其父元素的最后一个子元素。
   - `:only-child`: 选择其父元素的唯一子元素。
   - `:nth-child(n)`: 选择其父元素的第 n 个子元素。
   - `:nth-last-child(n)`: 选择其父元素的倒数第 n 个子元素。
   - `:first-of-type`: 选择其父元素下相同类型的第一个子元素。
   - `:last-of-type`: 选择其父元素下相同类型的最后一个子元素。
   - `:only-of-type`: 选择其父元素下唯一相同类型的子元素。
   - `:nth-of-type(n)`: 选择其父元素下相同类型的第 n 个子元素。
   - `:nth-last-of-type(n)`: 选择其父元素下相同类型的倒数第 n 个子元素。
   - `:not()`: 选择不符合括号内选择器的元素。
   - `:lang()`: 选择指定语言的语言特定的元素。

2. 伪元素（Pseudo-elements）
   - `::before`: 在选定元素之前插入内容。
   - `::after`: 在选定元素之后插入内容。
   - `::first-letter`: 选择元素的第一个字母。
   - `::first-line`: 选择元素的第一个行。
   - `::selection`: 选择用户选中的元素部分。
   - `::placeholder`: 选择输入框的占位文字。

这些伪类和伪元素提供了强大的选择器和样式应用能力，使得开发者能够针对元素的特定状态或位置应用不同的样式规则。它们是 CSS 设计中不可或缺的一部分，常用于创建复杂和交互式的网页布局和效果。

选择器

CSS 选择器用于选择需要样式化的 HTML 元素。以下是一些常用的 CSS 选择器功能代码汇总：
1.通用选择器
   - `*`: 选择文档中的所有元素。

2.元素/类型选择器
   - `element`: 选择所有名为 `element` 的元素。

3.类选择器
   - `.classname`: 选择所有具有 `classname` 类的元素。

4. ID选择器
   - `#idname`: 选择具有 `idname` ID的元素。

5. 属性选择器
   - `[attribute]`: 选择具有 `attribute` 属性的所有元素。
   - `[attribute="value"]`: 选择 `attribute` 属性值为 `value` 的所有元素。
   - `[attribute^="value"]`: 选择 `attribute` 属性值以 `value` 开头的所有元素。
   - `[attribute$="value"]`: 选择 `attribute` 属性值以 `value` 结尾的所有元素。
   - `[attribute*="value"]`: 选择 `attribute` 属性值包含 `value` 的所有元素。
   - `[attribute|="value"]`: 选择 `attribute` 属性值以 `value` 或 `value-` 开头的所有元素。

6. 后代选择器
   - `parent child`: 选择 `parent` 元素的所有 `child` 后代元素。

7. 子选择器
   - `parent > child`: 选择 `parent` 元素的所有直接 `child` 子元素。

8.相邻同胞选择器
   - `element + sibling`: 选择紧随 `element` 元素之后的 `sibling` 同胞元素。

9. 通用同胞选择器
   - `element ~ sibling`: 选择 `element` 元素之后的所有 `sibling` 同胞元素。

10.伪类选择器
    - `:link`: 选择所有未被访问的链接。
    - `:visited`: 选择所有已被访问的链接。
    - `:hover`: 选择鼠标悬停在其上的元素。
    - `:active`: 选择被激活的元素。
    - `:focus`: 选择获得焦点的元素。
    - `:target`: 选择当前 URL 目标元素。

11.伪元素选择器
    - `::before`: 在选定元素之前插入内容。
    - `::after`: 在选定元素之后插入内容。
    - `::first-letter`: 选择元素的第一个字母。
    - `::first-line`: 选择元素的第一个行。

12. 分组选择器
    - `selector1, selector2, ...`: 同时选择多个选择器匹配的元素。

13. 继承选择器
    - `element element`: 选择 `element` 元素内部的所有 `element` 元素。

14.否定伪类选择器
    - `:not()`: 选择不符合括号内选择器的元素。

这些选择器可以单独使用，也可以组合使用，以实现复杂的选择逻辑。正确使用 CSS 选择器是实现高效样式管理和设计的关键。

继承和层叠

CSS 继承和层叠是 CSS 样式表中的两个重要概念，它们允许开发者控制样式的应用和优先级。以下是一些与 CSS 继承和层叠功能相关的代码汇总：
1. 继承（Inheritance）
   - CSS 属性默认情况下是可以继承的，这意味着子元素会自动继承父元素的属性。
   - 例如，如果一个 `<div>` 元素有 `color: blue;`，那么它的所有子元素（除了 `<input>`、`<button>` 等用户界面元素）默认会有 `blue` 颜色，除非子元素有其他的 `color` 声明。

2. 层叠（Cascading）
   - CSS 层叠指的是当多个规则应用于同一元素时，确定哪个规则优先级最高的过程。
   - 层叠顺序通常遵循以下规则：
     - 内联样式（`style` 属性）具有最高的优先级。
     - ID 选择器具有较高的优先级。
     - 类选择器和属性选择器具有中等的优先级。
     - 标签选择器和通用选择器具有较低的优先级。
     - 继承的样式和 `!important` 声明具有最高的优先级，但它们通常不推荐使用，因为它们破坏了 CSS 的层叠规则。
   - 层叠可以通过 `!important` 声明来强制应用一个规则，尽管这样做通常是不推荐的，因为它会破坏 CSS 的层叠规则，使得样式管理变得复杂。

3. 特殊性（Specificity）
   - 特殊性是确定层叠顺序的另一个因素，它基于选择器的复杂性。
   - 特殊性计算是基于选择器的类型、ID、类、属性、伪类和伪元素的数量。
   - 例如，`#idname` 的特殊性比 `.classname` 高，而 `.classname` 的特殊性又比 `element` 高。

4.优先级（Priority）
   - 当层叠冲突时，需要决定哪个规则应该应用。
   - 可以通过组合选择器、增加 ID 数量、使用 `!important` 声明等方法来提高规则的优先级。

5. 层叠示例
   - 内联样式：`<div style="color: red;">Text</div>`
   - ID 选择器：`#idname { color: blue; }`
   - 类选择器：`.classname { color: green; }`
   - 标签选择器：`div { color: yellow; }`
   - 继承：`<div> <p>Text</p > </div>`，其中 `<p>` 元素继承了 `<div>` 的 `color` 属性。

这些概念是 CSS 样式管理的基础，理解它们对于创建可维护和可扩展的样式表至关重要。通过合理利用继承和层叠，开发者可以创建出既一致又灵活的网页样式。

自定义属性（css变量）

CSS 自定义属性（也称为 CSS 变量或 Custom Properties）是 CSS 4 引入的一种特性，允许开发者定义可以在样式表中重复使用的变量。这些变量可以在任何地方使用，并且可以随时更新，从而影响使用它们的 CSS 规则。以下是一些常用的 CSS 自定义属性功能代码汇总：
1. 定义变量
   - `--variable-name: value;`: 定义一个变量 `variable-name` 并为其赋值 `value`。
   - 例如：`--main-color: blue;`

2. 使用变量
   - 在任何 CSS 声明中使用 `var()` 函数来引用变量。
   - 例如：`color: var(--main-color);`

3.嵌套变量
   - 可以在定义变量时嵌套其他变量。
   - 例如：`--border-radius: 5px;` 和 `--button-border: 2px solid var(--border-radius);`

4.变量作用域
   - 变量可以在不同的作用域中定义，例如在 `<style>` 标签内部、在 `<link>` 标签的 `href` 属性中，或者在 CSS 文件中。
   - 作用域会影响变量的可见性。在 `<style>` 标签内部定义的变量仅在该标签内可见。

5. 继承和覆盖
   - 变量可以被继承，也可以被覆盖。
   - 例如，`<div class="container">` 可能有一个 `--background-color` 变量，而 `<div class="box">` 继承了这个变量，但也可以通过 `.box { --background-color: red; }` 来覆盖它。

6. 全局和局部变量
   - 在 CSS 文件中定义的变量是全局的，可以在整个样式表中使用。
   - 在 `<style>` 标签内部定义的变量是局部的，只能在当前作用域内使用。

7. 默认值
   - 如果变量没有定义，可以使用 `var(--variable-name, default-value)` 来提供一个默认值。
   - 例如：`color: var(--main-color, black);`

8.动态变量
   - 通过 JavaScript，可以动态地设置或修改 CSS 变量的值。
   - 例如，使用 `document.documentElement.style.setProperty('--variable-name', 'new-value');`

9. 过渡和动画
   - CSS 变量可以用于创建过渡和动画效果。
   - 例如，`transition: var(--transition-property, all 0.5s);`

10. 与 CSS 类和 ID 结合使用
    - CSS 变量可以与类和 ID 结合使用，以创建更复杂的样式规则。
    - 例如，`#special { --special-color: red; }` 和 `.class { --class-color: blue; }`
这些自定义属性功能允许开发者更高效地管理和复用样式，从而提高样式表的可维护性和可读性。随着 CSS 的发展，自定义属性将继续成为前端开发的重要工具。

打印样式

CSS 提供了专门的打印样式控制，以确保网页内容在打印时能够以期望的方式呈现。以下是一些常用的 CSS 打印样式功能代码汇总：
1. 打印媒体查询
   - `@media print { /* CSS规则 */ }`: 定义仅在打印时应用的样式。
   - 例如：`@media print { .no-print { display: none; } }`，这将隐藏带有 `.no-print` 类的元素在打印时。

2. 打印样式重置
   - `@page`: 用于定义页面样式，包括页边距、页眉页脚等。
   - 例如：`@page { margin: 1cm; }`，这将设置页边距为 1cm。
   - 还可以使用 `@page :first` 来定义第一页的样式。

3. 隐藏在打印时不必要的内容
   - 可以使用 `.no-print` 类来隐藏不需要打印的内容。
   - 例如：`<div class="no-print">This will not be printed.</div>`

4. 控制页眉和页脚
   - `@page :first { @top-left { content: "Page 1"; } }`: 定义第一页的页眉内容。
   - `@page :left { @bottom-center { content: "Page " counter(page) " of " counter(pages); } }`: 定义左侧页脚的内容，包括页码。

5.调整字体大小
   - `@page { font-size: 12pt; }`: 设置页面上的默认字体大小。

6. 打印颜色和背景
   - `@page { background: #fff; }`: 设置页面背景色。
   - `@page { color: #000; }`: 设置页面文本颜色。

7. 自定义页眉和页脚
   - `@page { @top-left { content: url("logo.png"); } }`: 在页眉左侧插入图片。
   - `@page { @bottom-right { content: "Printed on " counter(page) " " current-date(); } }`: 在页脚右侧显示打印日期。

8. 调整页边距
   - `@page { margin: 2cm; }`: 设置页面边缘与打印内容之间的距离。

9. 打印方向
   - `@page { size: portrait; }`: 设置页面为纵向打印。
   - `@page { size: landscape; }`: 设置页面为横向打印。

10.页面编号
    - `@page { counter-increment: page; }`: 开始页面编号。
    - `@page { counter-increment: section; }`: 开始章节编号。
这些 CSS 打印样式功能可以确保网页内容在打印时以专业和一致的方式呈现。通过使用媒体查询和 `@page` 规则，开发者可以创建适用于打印的样式表，并确保网页的打印版本与屏幕版本区分开来。

补充