CSS与CSS3属性大揭秘：从基础到进阶

一、引言

在网页设计的广阔领域中，CSS（层叠样式表）和 CSS3 无疑占据着举足轻重的地位。CSS 作为控制网页样式和布局的核心技术，赋予了 HTML 页面丰富的视觉呈现，从简单的文本颜色、字体大小调整，到复杂的页面布局规划，它让网页从单调的信息载体转变为富有吸引力的交互平台。而 CSS3 作为 CSS 的升级版本，更是带来了革命性的变化，极大地拓展了网页设计的可能性。

CSS3 引入了众多强大的新特性，如灵活的选择器、炫酷的动画效果、创新的布局模式等，这些特性不仅让网页的视觉效果更加绚丽多彩，还显著提升了用户体验，使网页能够适应各种不同的设备和屏幕尺寸，实现真正的响应式设计。无论是打造简洁大气的企业官网，还是构建交互丰富的电商平台，亦或是充满创意的个人博客，CSS 和 CSS3 都是不可或缺的关键技术。

本文将深入探讨 CSS 和 CSS3 的各类属性，详细列出并逐一介绍每个属性的选项、给出具体案例，同时分析它们在不同浏览器中的兼容性，希望能帮助大家全面掌握这两项重要技术，为网页设计和开发工作提供有力支持。

二、CSS 基础属性详解

（一）文本属性

1. color：用于设置文本的颜色，常见的取值方式有颜色名称（如 red、blue 等）、十六进制值（如 #FF0000 表示红色）、RGB 值（如 rgb (255, 0, 0) 也表示红色）以及 HSL 值（如 hsl (0, 100%, 50%) 同样表示红色）等。例如，将段落文本颜色设置为绿色：

   p { color: green;}

2. font-family：用于指定文本的字体，取值可以是系统自带字体（如 Arial、Times New Roman 等），也可以是自定义字体（需要通过 @font - face 规则引入）。可以指定多个字体，浏览器会按照顺序依次查找并使用可用字体。例如：

   body { font-family: Arial, sans-serif;}

3. font-size：用于设置文本的大小，常见取值有像素（px）、百分比（%）、em 等单位。例如，将标题文本大小设置为 24 像素：

   h1 { font-size: 24px;}

4. font - weight：用于设置文本的粗细，常见取值有 normal（正常粗细）、bold（加粗）、bolder（更粗）、lighter（更细）以及具体的数字（如 100 - 900，400 等同于 normal，700 等同于 bold）。例如：

   strong { font - weight: bold;}

5. text - align：用于设置文本的水平对齐方式，取值有 left（左对齐，默认值）、right（右对齐）、center（居中对齐）、justify（两端对齐）。例如，将段落文本居中对齐：

   p { text - align: center;}

6. text - decoration：用于设置文本的装饰线，常见取值有 none（无装饰线）、underline（下划线）、overline（上划线）、line - through（删除线）。还可以搭配 dotted（虚线）、wavy（波浪线）等指定装饰线的样式，也能指定颜色。例如，去除链接的下划线：

   a { text - decoration: none;}

7. text - indent：用于控制文本首字母的缩进，取值为 css 中的长度单位，如 px、em 等。例如，将段落首行缩进 2 个字符（假设 1em 等于 1 个字符宽度）：

   p { text - indent: 2em;}

8. line - height：用于控制一行文字的高度，常见取值有 normal（由浏览器根据文字大小决定的一个默认值）、像素（px）、数字（参考自身 font - size 的倍数，很常用）、百分比（参考自身 font - size 的百分比）。例如，设置段落行高为字体大小的 1.5 倍：

   p { line - height: 1.5;}

兼容性：上述这些文本属性在现代浏览器（如 Chrome、Firefox、Safari、Edge 等）中都有良好的支持。对于较老版本的浏览器，如 IE 浏览器，除了一些 CSS3 新增的文本相关属性（如 text - shadow 等），基本的文本属性也都能支持，但在某些属性的具体表现上可能存在细微差异，例如在 IE6 中，设置 line - height 可能会出现一些与其他浏览器不一致的情况。在实际开发中，对于需要兼容 IE 浏览器的项目，可能需要进行一些额外的测试和调整。

（二）背景属性

1. background - color：用于设置元素的背景颜色，取值可以是颜色名称、十六进制值、RGB 值、RGBA 值等。例如，将页面背景设置为淡蓝色：

   body { background - color: #ADD8E6;}

2. background - image：用于设置元素的背景图像，取值为 url () 函数，括号内为图像的路径。可以是相对路径或绝对路径。例如，为一个 div 元素设置背景图片：

   div { background - image: url('image.jpg');}

3. background - repeat：用于控制背景图像的重复方式，取值有 repeat（默认值，在水平和垂直方向上重复）、no - repeat（不重复）、repeat - x（仅在水平方向上重复）、repeat - y（仅在垂直方向上重复）。例如，使背景图片仅在水平方向重复：

   body { background - image: url('pattern.png'); background - repeat: repeat - x;}

4. background - position：用于设置背景图像的位置，取值可以是方位名词（如 top left、center center 等）、精确单位（如 100px 50px，表示距离元素左上角水平 100px，垂直 50px 的位置）、百分比（如 50% 50%，表示在水平和垂直方向上都居中）。例如，将背景图片定位在元素的右下角：

   div { background - image: url('icon.png'); background - repeat: no - repeat; background - position: right bottom;}

5. background - attachment：用于设置背景图像是否随页面滚动，取值有 scroll（默认值，背景图像随页面滚动）、fixed（背景图像固定，不随页面滚动）。例如，使背景图像固定在页面：

   body { background - image: url('bg.jpg'); background - attachment: fixed;}

6. background - size：用于设置背景图像的尺寸，取值有长度值（如 width height，设置背景图像的宽度和高度）、百分比（相对于元素的尺寸）、cover（把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，可能会裁剪图像）、contain（把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域，可能会有空白）。例如，使背景图像完全覆盖元素：

   div { background - image: url('big.jpg'); background - size: cover;}

兼容性：background - color、background - image、background - repeat、background - position、background - attachment 这些属性在大多数现代浏览器中都有良好的兼容性。background - size 属性在 IE9 及以上版本的 IE 浏览器中得到支持，其他现代浏览器也都支持该属性。在实际开发中，对于一些不支持 background - size 属性的较老浏览器，可以通过其他方式（如使用 JavaScript 或者提供替代的背景样式）来进行兼容处理。

（三）边框属性

1. border - style：用于定义元素边框的样式，常见取值有 none（没有边框）、hidden（边框被隐藏，但边框所占空间仍然保留）、dotted（点状线）、dashed（虚线）、solid（实线）、double（双线）、groove（凹槽效果）、ridge（脊状效果）、inset（嵌入效果）、outset（突出效果）。例如，将 div 元素的边框设置为虚线：

   div { border - style: dashed;}

2. border - width：用于定义元素边框的宽度，取值可以是具体的像素值（如 2px）、相对单位（如 em），也可以使用 CSS 中定义的关键词（如 thin、medium、thick）。例如，设置 p 元素的边框宽度为 5 像素：

   p { border - width: 5px;}

3. border - color：用于定义元素边框的颜色，取值可以是颜色名称、十六进制值、RGB 值、RGBA 值等。例如，将 span 元素的边框颜色设置为绿色：

   span { border - color: #00FF00;}

4. border：是一个简写属性，允许在一个声明中设置元素的边框宽度、样式和颜色。例如：

   div { border: 2px solid red;}

5. border - radius：用于定义边框的圆角半径，取值可以是长度值（如 5px，表示四个角都为 5px 的圆角），也可以分别设置四个角的半径（如 border - top - left - radius、border - top - right - radius、border - bottom - left - radius、border - bottom - right - radius）。例如，将按钮的边框设置为圆角：

   button { border - radius: 5px;}

兼容性：border - style、border - width、border - color、border 这些基本的边框属性在所有主流浏览器中都有很好的兼容性。border - radius 属性在 IE9 及以上版本的 IE 浏览器中得到支持，其他现代浏览器也都支持该属性。对于不支持 border - radius 的较老浏览器，可以使用图片或者 JavaScript 来模拟圆角效果。在一些低版本的浏览器中，可能对某些特殊的边框样式（如 groove、ridge 等）的渲染效果与现代浏览器略有不同，但基本的实线、虚线等样式表现一致。

（四）盒模型属性

1. width：用于设置元素内容区域的宽度，取值可以是 auto（默认值，浏览器可计算出实际的宽度）、像素值（如 200px）、百分比（相对于父元素宽度的百分比，如 50%）。例如，将 div 元素的宽度设置为父元素的 50%：

   div { width: 50%;}

2. height：用于设置元素内容区域的高度，取值可以是 auto（默认值，浏览器可计算出实际的高度）、像素值（如 150px）、百分比（相对于父元素高度的百分比，如 70%）。例如，将一个盒子的高度设置为 150 像素：

   .box { height: 150px;}

3. padding：用于设置元素边框内部到内容区域之间的距离（内边距），取值可以是长度值（如 10px）、百分比（相对于父元素宽度的百分比）。padding 是一个复合属性，可以分别设置上、右、下、左内边距（如 padding - top、padding - right、padding - bottom、padding - left），也可以使用简写形式。例如，设置 div 元素的内边距为 10 像素：

   div { padding: 10px;}

4. margin：用于设置元素与其他元素之间的距离（外边距），取值可以是长度值（如 20px）、百分比（相对于父元素宽度的百分比）。margin 也是一个复合属性，可以分别设置上、右、下、左外边距（如 margin - top、margin - right、margin - bottom、margin - left），也可以使用简写形式。例如，将一个段落的外边距设置为上 20px，下 10px，左右自动居中：

   p { margin: 20px auto 10px;}

5. border：前面已介绍，它定义了元素的边框，包括边框的宽度、样式和颜色，在盒模型中用于界定元素的边界。

6. box - sizing：用于控制盒模型的计算方式，取值有 content - box（默认值，宽度和高度仅包含内容区域，内边距和边框会增加元素的实际大小）、border - box（宽度和高度包括内容区域、内边距和边框，内边距和边框不会增加元素的实际大小）。例如，使一个元素的宽度和高度包含内边距和边框：

   div { box - sizing: border - box;}

兼容性：width、height、padding、margin、border 这些属性在所有主流浏览器中都有良好的兼容性。box - sizing 属性在 IE8 及以上版本的 IE 浏览器中得到支持，其他现代浏览器也都支持该属性。在一些较老版本的浏览器中，如果不支持 box - sizing 属性，可能会导致盒模型的计算方式与预期不一致，在进行复杂布局时需要特别注意。可以通过使用 JavaScript 或者针对不同浏览器编写特定的样式来解决兼容性问题 。

三、CSS3 新增属性亮点

（一）边框与背景新特性

1. border - radius：这个属性用于创建圆角边框。取值可以是长度值（如 5px、10px 等），也可以是百分比（相对于元素自身的宽度和高度）。当设置为 50% 时，对于正方形元素可以创建圆形效果，对于长方形元素则创建椭圆形效果。例如，创建一个带有圆角的卡片：

   .card { border: 1px solid #ccc; border - radius: 10px; padding: 20px;}

2. box - shadow：用于添加元素的阴影效果。取值包括水平偏移量、垂直偏移量、模糊半径、扩散半径和阴影颜色。例如，为按钮添加阴影：

   button { box - shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);}

3. background - size：用于设置背景图像的大小。取值有长度值（如 width height，分别设置宽度和高度）、百分比（相对于元素的尺寸）、cover（把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，可能会裁剪图像）、contain（把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域，可能会有空白）。例如，使背景图像自适应元素大小：

   body { background - image: url('bg.jpg'); background - size: cover;}

4. background - origin：用于指定背景图像的定位区域，取值有 content - box（从内容区域开始定位）、padding - box（从内边距区域开始定位，默认值）、border - box（从边框区域开始定位）。例如：

   div { background - image: url('pattern.png'); background - origin: content - box;}

5. background - clip：用于规定背景的绘制区域，取值有 border - box（默认值，背景绘制到边框边缘）、padding - box（背景绘制到内边距边缘）、content - box（背景绘制到内容边缘）、text（背景被裁剪成文字的形状，仅在一些支持的浏览器中有效，常用于实现文字特效）。例如：

   h1 { background - color: #FF9900; background - clip: text; -webkit - background - clip: text; color: transparent;}

兼容性：border - radius 在 IE9 及以上版本以及所有现代浏览器中都有良好支持。box - shadow 在 IE9 及以上版本和其他主流现代浏览器中都能正常工作。background - size、background - origin、background - clip 在 IE9 及以上版本和其他现代浏览器中也都得到支持。但对于一些不支持 background - clip:text 的浏览器，无法实现相应的文字特效，需要提供替代方案或进行降级处理 。

（二）过渡与动画效果

1. transition：用于实现元素从一种状态到另一种状态的平滑过渡。它是一个复合属性，包含 transition - property（指定过渡的 CSS 属性，如 width、color 等，也可以使用 all 表示所有可过渡的属性）、transition - duration（指定过渡所需的时间，单位为秒 s 或毫秒 ms）、transition - timing - function（指定过渡的时间函数，如 ease、linear、ease - in、ease - out、ease - in - out 等，控制过渡的速度变化）、transition - delay（指定过渡开始前的延迟时间，单位为秒 s 或毫秒 ms）。例如，实现按钮的过渡效果：

   button { background - color: #007BFF; color: white; padding: 10px 20px; border: none; transition: background - color 0.3s ease, color 0.3s ease;}button:hover { background - color: #0056b3; color: lightgray;}

2. animation：用于创建复杂的动画效果。它同样是一个复合属性，包含 animation - name（指定动画的名称，需与 @keyframes 定义的动画名称一致）、animation - duration（指定动画的持续时间，单位为秒 s 或毫秒 ms）、animation - timing - function（指定动画的时间函数，与 transition 中的类似）、animation - delay（指定动画开始前的延迟时间，单位为秒 s 或毫秒 ms）、animation - iteration - count（指定动画的重复次数，可以是整数或 infinite 表示无限循环）、animation - direction（指定动画的播放方向，如 normal（正向播放，默认值）、reverse（反向播放）、alternate（交替播放，第一次正向，第二次反向，以此类推）、alternate - reverse（反向交替播放））、animation - fill - mode（指定动画结束后的状态，如 none（默认值，动画结束后回到初始状态）、forwards（动画结束后停留在结束状态）、backwards（动画开始前就应用起始关键帧的样式）、both（同时具有 forwards 和 backwards 的效果））、animation - play - state（指定动画的播放状态，如 running（播放，默认值）、paused（暂停））。例如，创建一个旋转的元素动画：

   @ keyframes rotateElement { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}.rotate { width: 100px; height: 100px; background - color: #FF5733; animation: rotateElement 2s linear infinite;}

兼容性：transition 和 animation 在 IE10 及以上版本以及其他主流现代浏览器中都有较好的支持。在 IE9 及以下版本中不支持这两个属性，对于需要兼容这些低版本浏览器的项目，可能需要使用 JavaScript 库（如 jQuery UI）来实现类似的动画和过渡效果 。

（三）2D 与 3D 转换

1. transform：在 2D 转换中，transform 属性可以实现元素的移动（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）等效果。例如，将一个元素向右移动 50 像素，向下移动 30 像素：

   div { transform: translate(50px, 30px);}

旋转元素 45 度：

div {  transform: rotate(45deg);}

将元素在 X 轴和 Y 轴方向上分别放大 1.5 倍：

div {  transform: scale(1.5, 1.5);}

在 X 轴方向上倾斜 30 度：

div {  transform: skewX(30deg);}

1. 在 3D 转换中，transform 同样强大。例如，使用 translate3d 实现元素在三维空间中的移动：

   div { transform: translate3d(20px, 30px, 50px);}

使用 rotate3d 实现元素绕 X 轴旋转 30 度：

div {  transform: rotate3d(1, 0, 0, 30deg);}

使用 scale3d 实现元素在三维空间中的缩放，如在 X、Y、Z 轴上各放大 2 倍：

div {  transform: scale3d(2, 2, 2);}

此外，还可以通过 perspective 属性为元素添加透视效果，使 3D 转换更加逼真。例如：

.container {  perspective: 800px;}.box {  transform: rotateY(45deg);}

兼容性：transform 属性在 IE9 及以上版本以及其他现代浏览器中都得到支持。但在 IE9 中，对一些 3D 转换效果的支持可能存在局限性，并且需要添加 - ms - 前缀。在实际开发中，对于需要兼容 IE9 的项目，可能需要对 3D 转换效果进行特殊处理或提供替代方案 。

（四）弹性盒与网格布局

1. display:flex：弹性盒布局是一种灵活的布局模式，它可以轻松实现水平和垂直方向的对齐、元素的自动排列和伸缩等功能。在弹性盒容器中，可以通过 justify - content 属性控制主轴方向上的对齐方式（如 flex - start（默认值，左对齐或上对齐）、flex - end（右对齐或下对齐）、center（居中对齐）、space - between（两端对齐，元素之间均匀分布空白）、space - around（元素周围均匀分布空白）），通过 align - items 属性控制交叉轴方向上的对齐方式（如 flex - start（顶部对齐）、flex - end（底部对齐）、center（居中对齐）、baseline（基线对齐）、stretch（拉伸，默认值，元素在交叉轴方向上拉伸以填满容器））。例如，创建一个简单的弹性盒导航栏：

   .nav { display: flex; justify - content: space - between; align - items: center; background - color: #333; color: white; padding: 10px;}.nav a { color: white; text - decoration: none; padding: 5px 10px;}

2. display:grid：网格布局是一种更为强大的布局方式，它将页面划分为一个二维的网格，通过 grid - template - columns 和 grid - template - rows 属性定义网格的列和行，通过 grid - column 和 grid - row 属性指定元素在网格中的位置。例如，创建一个复杂的页面布局：

   .container { display: grid; grid - template - columns: repeat(3, 1fr); grid - template - rows: auto 1fr auto; gap: 10px;}.header { grid - column: 1 / span 3;}.sidebar { grid - column: 1 / 2; grid - row: 2 / 3;}.content { grid - column: 2 / 4; grid - row: 2 / 3;}.footer { grid - column: 1 / span 3; grid - row: 3 / 4;}

兼容性：display:flex 在 IE10 及以上版本以及其他主流现代浏览器中都有良好的支持，在 IE10 中需要添加 - ms - 前缀。display:grid 在 IE11 及以上版本以及其他现代浏览器中得到支持，但在 IE11 中存在一些兼容性问题，例如对某些属性值的支持不完全。在实际开发中，对于需要兼容较低版本浏览器的项目，可能需要结合其他布局方式（如浮动布局）来实现类似的布局效果 。

四、属性选项与案例展示

（一）常见属性选项剖析

1. color 属性：取值极为丰富，除了前面提到的颜色名称、十六进制值、RGB 值、HSL 值外，还有一些特殊的取值方式。例如，currentColor 表示使用元素的当前文本颜色，这在一些需要保持颜色一致性的场景中非常有用。比如，当一个元素的文本颜色会根据用户操作或主题切换而改变时，其边框颜色或其他相关颜色如果设置为 currentColor，就会自动与文本颜色保持一致。示例代码如下：

   a { color: blue; border: 1px solid currentColor;}

2. font - family 属性：除了系统字体和自定义字体外，还可以使用一些通用字体族。如 serif（衬线字体族，字体笔画末端有装饰，在印刷品中常被用于正文，如 Times New Roman）、sans - serif（无衬线字体族，简洁现代，常用于标题和屏幕显示，如 Arial、Helvetica）、monospace（等宽字体族，每个字符宽度相同，常用于代码显示，如 Courier New）、cursive（手写体字体族，风格类似手写，给人亲切自然的感觉）、fantasy（奇幻字体族，通常具有独特的艺术风格，用于强调和装饰）。例如：

   body { font-family: sans - serif;}code { font-family: monospace;}

3. background - size 属性：在之前介绍的基础上，还可以使用具体的长度值来分别设置背景图像的宽度和高度。例如，将背景图像宽度设置为 200px，高度设置为 150px：

   div { background - image: url('image.jpg'); background - size: 200px 150px;}

4. transition 属性：transition - timing - function 的取值除了常见的 ease、linear、ease - in、ease - out、ease - in - out 外，还有 cubic - bezier () 函数。这个函数允许我们通过自定义贝塞尔曲线来精确控制过渡的速度变化。贝塞尔曲线有四个控制点，分别是起始点（0, 0）、第一个控制点（x1, y1）、第二个控制点（x2, y2）和结束点（1, 1）。通过调整 x1、y1、x2、y2 的值，可以创建出各种独特的过渡效果。例如，创建一个先慢后快的过渡效果：

   div { transition: width 2s cubic - bezier(0.1, 0.1, 0.1, 1);}

5. animation 属性：animation - direction 除了 normal、reverse、alternate、alternate - reverse 外，还可以结合 animation - iteration - count 来实现更复杂的动画播放逻辑。例如，当 animation - iteration - count 设置为 2，animation - direction 设置为 alternate 时，动画会先正向播放一次，再反向播放一次，总共播放两次。示例代码如下：

   @ keyframes fadeInOut { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; }}div { animation: fadeInOut 4s 2 alternate;}

（二）综合案例演示

假设我们要创建一个电商产品展示页面，通过综合运用 CSS 和 CSS3 属性来实现丰富的页面效果。

HTML 结构如下：

<!DOCTYPE html><html lang="zh - CN"><head>  <meta charset="UTF - 8">  <meta name="viewport" content="width=device - width, initial - scale = 1.0">  <title>电商产品展示</title>  <link rel="stylesheet" href="styles.css"></head><body>  <header>    <h1>时尚电子产品商城</h1>    <nav>      <ul>        <li><a href="#">首页</a></li>        <li><a href="#">产品分类</a></li>        <li><a href="#">促销活动</a></li>        <li><a href="#">购物车</a></li>      </ul>    </nav>  </header>  <main>    <section class="product - list">      <div class="product">        <img src="product1.jpg" alt="产品1">        <h2>智能手表</h2>        <p>一款功能强大的智能手表，具备健康监测、运动追踪等功能。</p>        <button>加入购物车</button>      </div>      <div class="product">        <img src="product2.jpg" alt="产品2">        <h2>无线耳机</h2>        <p>高品质无线耳机，音质出色，佩戴舒适。</p>        <button>加入购物车</button>      </div>      <div class="product">        <img src="product3.jpg" alt="产品3">        <h2>平板电脑</h2>        <p>大屏幕平板电脑，适合办公和娱乐。</p>        <button>加入购物车</button>      </div>    </section>  </main>  <footer>    <p>&copy; 2024 时尚电子产品商城 版权所有</p>  </footer></body></html>

CSS 样式如下：

/* 全局样式 */body {  font - family: Arial, sans - serif;  margin: 0;  padding: 0;  background - color: #f4f4f4;}/* 头部样式 */header {  background - color: #333;  color: white;  text - align: center;  padding: 20px 0;}h1 {  margin: 0;  font - size: 36px;  text - shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);}nav ul {  list - style - type: none;  margin: 0;  padding: 10px 0;}nav ul li {  display: inline;  margin: 0 20px;}nav ul li a {  color: white;  text - decoration: none;  transition: color 0.3s ease;}nav ul li a:hover {  color: #ff9900;}/* 产品列表样式 */.product - list {  display: grid;  grid - template - columns: repeat(3, 1fr);  gap: 20px;  padding: 20px;}.product {  background - color: white;  border: 1px solid #ccc;  border - radius: 10px;  box - shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);  text - align: center;  padding: 20px;  transition: transform 0.3s ease;}.product:hover {  transform: scale(1.05);}.product img {  width: 100%;  max - width: 300px;  height: auto;  border - radius: 5px;  background - size: cover;  background - position: center;}.product h2 {  font - size: 24px;  margin - top: 15px;}.product p {  color: #666;  margin: 10px 0;}button {  background - color: #007BFF;  color: white;  padding: 10px 20px;  border: none;  border - radius: 5px;  cursor: pointer;  transition: background - color 0.3s ease;}button:hover {  background - color: #0056b3;}/* 底部样式 */footer {  background - color: #333;  color: white;  text - align: center;  padding: 10px 0;}

在这个案例中：

• 头部部分使用了 text - shadow 属性为标题添加阴影效果，增强层次感；通过 transition 属性为导航链接添加颜色过渡效果，当鼠标悬停时链接颜色变化更加自然。

• 产品列表部分运用了 grid 布局，将产品整齐排列在三列中；使用 box - shadow 属性为产品盒子添加阴影，使其看起来更立体；通过 transform 属性和 transition 属性实现产品在鼠标悬停时的缩放动画效果，提升用户交互体验；为产品图片设置了 background - size 和 background - position 属性，确保图片自适应且居中显示；按钮同样使用了 transition 属性实现背景颜色的过渡效果 。

• 底部部分则简单设置了背景颜色和文本样式 。

五、媒体查询

媒体查询是 CSS3 的重要特性，它允许我们根据设备的特性（如屏幕宽度、高度、分辨率、方向等）来应用不同的样式，从而实现响应式网页设计，使网页能够在各种设备（如桌面电脑、平板电脑、手机等）上都能呈现出良好的显示效果。

（一）基本语法

媒体查询的基本语法如下：

@media mediatype and|not|only (media feature) {  /* CSS 样式 */}

• mediatype：媒体类型，是可选的，并且会（隐式地）应用all类型。常见的媒体类型有：

• all：适用于所有设备。

• print：用于打印机和打印预览。

• screen：主要用于屏幕，包括电脑屏幕、平板电脑、智能手机等。

• speech：主要用于语音合成器。

• and|not|only：逻辑操作符。

• and：将多个媒体特征以 “与” 的方式连接成一个媒体查询，只有当所有媒体特征都为true，查询条件才成立。例如：screen and (max-width: 800px)，表示在屏幕设备上且屏幕宽度小于等于 800px 时条件成立。

• not：取反媒体查询结果，媒体查询结果不成立时返回true，否则返回false。使用not运算符时必须指定媒体类型。例如：not screen and (min-height: 500px)，表示不是屏幕设备或者屏幕高度小于 500px 时条件成立。

• only：当整个表达式都匹配时，才会应用选择的样式，可以应用在防止某些较早版本的浏览器上产生歧义的场景。使用only时必须指定媒体类型。例如：only screen and (min-width: 600px)，表示只有在屏幕设备且屏幕宽度大于等于 600px 时才应用样式。

• media feature：媒体特征，必须用括号括起来。常见的媒体特征有：

• width：浏览器的宽度。

• height：浏览器的高度。

• max-width：最大宽度，例如(max-width: 600px)表示宽度小于等于 600px。

• min-width：最小宽度，例如(min-width: 400px)表示宽度大于等于 400px。

• device-width：设备宽度。

• device-height：设备高度。

• max-device-width：最大设备宽度。

• min-device-width：最小设备宽度。

• orientation：设备的窗口朝向，orientation: landscape表示横屏（宽度比高度大）；orientation: portrait表示竖屏（高度比宽度大） 。

• resolution：设备的分辨率，支持dpi（每英寸中物理像素个数）、dppx（每个px中的物理像素数，1dppx = 96dpi）和dpcm（每厘米上的物理像素个数）单位 。例如(min-resolution: 192dpi)表示分辨率大于等于 192dpi 。

（二）案例展示

1. 根据屏幕宽度改变背景颜色

   body { background-color: lightgray;}@media screen and (max-width: 600px) { body { background-color: pink; }}@media screen and (min-width: 601px) and (max-width: 900px) { body { background-color: lightblue; }}@media screen and (min-width: 901px) { body { background-color: lightgreen; }}

在这个案例中，当屏幕宽度小于等于 600px 时，页面背景颜色为粉色；当屏幕宽度在 601px 到 900px 之间时，背景颜色为浅蓝色；当屏幕宽度大于 900px 时，背景颜色为浅绿色。

1. 根据屏幕方向改变布局

   媒体查询示例 .container { display: flex; } .sidebar { width: 200px; background - color: #ccc; padding: 10px; } .content { flex: 1; padding: 10px; } @media screen and (orientation: portrait) { .container { flex - direction: column; } .sidebar { width: 100%; } }
   侧边栏

   主要内容区域

在上述代码中，正常情况下，页面是水平布局，侧边栏在左边，内容区域在右边。当屏幕切换为竖屏时，通过媒体查询@media screen and (orientation: portrait)，将布局改为垂直布局，侧边栏宽度变为 100%，位于内容区域上方。

（三）兼容性

媒体查询在现代浏览器（如 Chrome、Firefox、Safari、Edge 等）中都有很好的支持。对于 IE 浏览器，从 IE9 开始支持媒体查询。在 IE8 及以下版本中不支持媒体查询，如果需要兼容这些低版本浏览器，可以使用一些 JavaScript 库（如 Respond.js）来实现媒体查询的功能。在实际开发中，对于需要兼容低版本浏览器的项目，要充分考虑到媒体查询的兼容性问题，确保网页在各种浏览器中都能正常显示 。

六、总结与展望

CSS 和 CSS3 属性是网页设计和开发中不可或缺的重要组成部分。CSS 基础属性为网页构建了基本的样式框架，从文本的呈现、背景的设置，到边框和盒模型的定义，这些属性让网页具备了最基础的视觉结构和布局。而 CSS3 新增属性则极大地拓展了网页设计的边界，从创新的边框与背景效果，到令人惊叹的过渡、动画和转换效果，再到强大的弹性盒与网格布局，它们为网页带来了更加丰富的交互性和视觉吸引力，使网页能够在不同设备上呈现出完美的显示效果。

通过对各种属性选项的深入剖析和实际案例的展示，我们看到了这些属性在实际应用中的多样性和灵活性。它们可以根据不同的设计需求，创造出各种各样的网页效果，无论是简洁大气的风格，还是充满创意和动感的设计，都能通过合理运用 CSS 和 CSS3 属性来实现。

展望未来，CSS 的发展趋势令人期待。随着技术的不断进步，我们有望看到更多新的属性和功能的出现。例如，在布局方面，可能会有更智能、更便捷的布局方式，进一步简化复杂页面的设计和开发；在动画和交互效果上，将更加逼真和流畅，为用户带来更加沉浸式的体验；在兼容性方面，随着浏览器的不断更新和改进，CSS 属性的兼容性问题将逐渐得到更好的解决，开发者能够更加放心地使用新特性。同时，CSS 也将与其他前沿技术，如人工智能、虚拟现实等更加紧密地结合，为网页设计和开发带来全新的可能性，让我们的网络世界变得更加丰富多彩 。

六、浏览器兼容性攻略

（一）主流浏览器兼容性现状

在当今的网络环境中，Chrome、Firefox、Safari、Edge 等主流浏览器在对 CSS 和 CSS3 属性的支持上各有特点。

Chrome 浏览器基于 Blink 引擎，对 CSS 和 CSS3 的支持表现出色。它能够快速跟进 W3C 标准，对于大多数 CSS3 的新特性，如前面提到的动画、过渡、2D/3D 转换、弹性盒和网格布局等，都能提供良好的支持。在一些前沿的 CSS 特性上，Chrome 往往也是最早支持的浏览器之一，这使得开发者在使用新的 CSS 技术时，在 Chrome 浏览器中通常能获得较为稳定和完整的体验。

Firefox 浏览器基于 Gecko 引擎，同样积极支持 CSS 标准。它对 CSS3 属性的兼容性也相当不错，特别是在一些文本相关的 CSS3 属性和布局属性方面，有着良好的表现。例如，在实现复杂的排版效果和响应式布局时，Firefox 能够准确地渲染使用了 CSS3 属性的页面。不过，在某些特定的 CSS3 效果上，Firefox 的支持时间点可能会稍晚于 Chrome，但总体来说，差距不大。

Safari 浏览器基于 WebKit 引擎，在 Mac 和 iOS 设备上占据着重要地位。它对 CSS 和 CSS3 的支持也非常全面，尤其是在苹果生态系统中，Safari 能够完美地展现使用 CSS3 技术构建的网页效果。在一些与图形、动画相关的 CSS3 属性上，Safari 的渲染性能和效果都十分出色，为用户带来了流畅的视觉体验。

Edge 浏览器在早期基于 Trident 引擎时，对 CSS3 的支持相对较弱，但随着 Edge 切换到 Chromium 内核，它对 CSS 和 CSS3 属性的支持有了显著提升。如今，新版 Edge 在 CSS 兼容性方面已经与 Chrome 非常接近，能够支持大部分现代的 CSS 特性，这使得开发者在考虑浏览器兼容性时，对于 Edge 的支持难度大大降低。

然而，尽管这些主流浏览器对 CSS 和 CSS3 的支持在不断完善，但仍然存在一些差异。例如，在一些较新的 CSS 属性上，不同浏览器的支持程度可能不同，或者在某些属性的具体实现细节上存在细微差别。这些差异可能会导致同一网页在不同浏览器中显示效果不完全一致，这就需要开发者采取相应的措施来解决兼容性问题。

（二）解决兼容性问题的方法

1. 使用浏览器前缀：由于不同浏览器对 CSS3 属性的支持方式可能不同，一些 CSS3 属性需要添加特定的浏览器前缀才能在相应的浏览器中生效。例如，-webkit - 是 Chrome、Safari 等 WebKit 内核浏览器的前缀，-moz - 是 Firefox 浏览器的前缀，-ms - 是 IE 和旧版 Edge 浏览器的前缀，-o - 是 Opera 浏览器的前缀。以 transform 属性为例，如果要在不同浏览器中都实现元素的旋转效果，代码可能如下：

   div { -webkit - transform: rotate(45deg); /* Chrome, Safari / -moz - transform: rotate(45deg); / Firefox / -ms - transform: rotate(45deg); / IE / -o - transform: rotate(45deg); / Opera / transform: rotate(45deg); / 标准语法 */}

2. autoprefixer 插件：手动添加浏览器前缀不仅繁琐，而且容易出错。这时可以使用 autoprefixer 插件来自动处理这个问题。autoprefixer 是一个基于 PostCSS 的插件，它可以根据 Can I Use 网站上的浏览器支持数据，自动为 CSS 规则添加所需的浏览器前缀。使用时，首先需要安装 autoprefixer 和 PostCSS，可以通过 npm 进行安装：

   npm install autoprefixer postcss --save - dev

然后，在项目中配置 PostCSS，例如在项目根目录下创建 postcss.config.js 文件，并添加以下内容：

module.exports = {  plugins: [    require('autoprefixer')  ]};

这样，在构建项目时，autoprefixer 会自动分析 CSS 代码，并根据目标浏览器的配置添加相应的前缀，大大提高了开发效率和代码的可维护性 。

3. 特性检测：除了使用浏览器前缀和 autoprefixer 插件外，还可以通过特性检测来解决兼容性问题。特性检测是指在运行时检查浏览器是否支持某个特定的 CSS 属性或功能，如果支持则使用相应的 CSS 代码，否则提供替代方案。例如，检测浏览器是否支持 flexbox 布局：

if ('flex' in document.documentElement.style) {  // 支持flexbox布局，应用相应的CSS类  document.documentElement.classList.add('supports - flexbox');} else {  // 不支持flexbox布局，应用替代的CSS类  document.documentElement.classList.add('no - supports - flexbox');}

在 CSS 中，可以针对不同的类设置不同的样式：

.supports - flexbox.container {  display: flex;  justify - content: space - between;}.no - supports - flexbox.container {  /* 替代的布局方式，如使用float布局 */}

通过特性检测，可以确保网页在各种浏览器中都能提供基本的功能和合理的显示效果 。

七、css 单位和屏幕适配

（一）css 单位详解

1. 绝对单位

• px（像素）：是最常用的绝对单位，它表示屏幕上的一个物理像素点。在网页设计中，1px 通常对应屏幕上的一个点，但在高分辨率屏幕（如 Retina 屏）上，1 个 CSS 像素可能对应多个物理像素。例如，设置一个 div 的宽度为 200px：

  div { width: 200px;}

• pt（磅）：是一个物理长度单位，常用于印刷领域，1pt 等于 1/72 英寸。在网页中使用较少，因为它的大小不随屏幕分辨率变化，在不同屏幕上显示效果可能不一致。例如，设置字体大小为 12pt：

  p { font-size: 12pt;}

• cm（厘米）、mm（毫米）、in（英寸）：这些单位也都是物理长度单位，在网页设计中同样不常用。例如，设置一个元素的宽度为 5cm：

  div { width: 5cm;}

1. 相对单位

• em：相对于当前元素的字体大小。如果当前元素没有设置字体大小，则相对于父元素的字体大小。例如，当前元素字体大小为 16px，设置其宽度为 2em，则宽度为 32px（16px * 2）。em 单位常用于设置与字体相关的属性，如内边距、外边距等，能保证这些属性与字体大小成比例。例如：

  body { font-size: 16px;}div { font-size: 1.2em; /* 相对于body的字体大小，16px * 1.2 = 19.2px / padding: 1em; / 相对于自身的字体大小，19.2px */}

• rem：相对于根元素（html）的字体大小。无论元素嵌套多深，rem 总是相对于根元素的字体大小。这使得在进行响应式设计时，通过改变根元素的字体大小，就能方便地调整整个页面的布局和元素大小。例如，html 元素的字体大小为 16px，设置一个段落的字体大小为 1.5rem，则该段落字体大小为 24px（16px * 1.5）：

  html { font-size: 16px;}p { font-size: 1.5rem;}

• vw（视口宽度）、vh（视口高度）：相对于视口的大小。1vw 等于视口宽度的 1%，1vh 等于视口高度的 1%。在响应式设计中，vw 和 vh 非常有用，它们能让元素的大小根据视口的变化而自动调整。例如，设置一个标题的宽度为 50vw，无论在什么设备上，该标题的宽度始终是视口宽度的一半：

  h1 { width: 50vw;}

• %（百分比）：相对于父元素的大小。可以用于设置宽度、高度、内边距、外边距等属性。例如，设置一个 div 的宽度为父元素宽度的 70%：

  div { width: 70%;}

• ex：相对于当前字体中小写字母 “x” 的高度。由于不同字体的 “x” 高度不同，所以 ex 单位不太常用。例如，设置一个元素的高度为 2ex：

  div { height: 2ex;}

• ch：相对于当前字体中数字 “0” 的宽度。与 ex 类似，ch 单位也因字体而异，使用场景相对较少。例如，设置一个输入框的宽度为 10ch：

  input { width: 10ch;}

（二）屏幕适配技巧

1. 使用媒体查询实现响应式布局：媒体查询是实现屏幕适配的重要手段，通过它可以根据不同的屏幕尺寸、分辨率等条件，应用不同的 CSS 样式。例如，在小屏幕设备上（屏幕宽度小于 600px），将导航栏改为垂直排列：

   .nav { display: flex; justify - content: space - between;}@media (max - width: 600px) {.nav { flex - direction: column; }}

2. 基于 rem 单位的适配方案：通过动态设置根元素（html）的字体大小，然后使用 rem 单位来定义其他元素的大小，从而实现屏幕适配。例如，在 JavaScript 中根据屏幕宽度动态设置 html 的字体大小：

   (function (doc, win) { var docEl = doc.documentElement; var resizeEvt = 'orientationchange' in window? 'orientationchange' :'resize'; var recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false);})(document, window);

在 CSS 中使用 rem 单位：

html {  font - size: 100px;}div {  width: 2rem;  height: 1rem;}

1. viewport 元标签的应用：viewport 元标签用于控制页面在移动设备上的显示方式，通过设置 width、initial - scale、maximum - scale 等属性，可以实现页面在不同移动设备上的适配。例如：

width=device - width 表示宽度等于设备的宽度，initial - scale = 1.0 表示初始缩放比例为 1，maximum - scale = 1.0 表示最大缩放比例为 1，user - scalable = no 表示用户不能缩放页面 。

八、css 文本换行和盒模型滚动属性设置

（一）文本换行属性

1. word - break：用于指定怎样在单词内进行断行，取值有：

• normal：使用默认的断行规则，对于非 CJK（中日韩）文本，在半角空格或连字符处换行，不会在长单词中间换行；对于 CJK 文本，可以在任何一个 CJK 字体后换行。例如：

  p { word - break: normal;}

• break - all：对于非 CJK 文本，可在任意字符间断行。常用于处理英文长单词或长 URL，防止其溢出容器。例如：

  p { word - break: break - all;}

• keep - all：CJK 文本不会断行，非 CJK 文本表现同 normal。例如：

  p { word - break: keep - all;}

1. overflow - wrap（原 word - wrap）：用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行，取值有：

• normal：使用系统的默认换行行为，同 word - break: normal 时的非 CJK 文本换行规则 。例如：

  p { overflow - wrap: normal;}

• anywhere：在字符串之间的任意点来进行中断，仅当在其行上显示单词会导致溢出时，浏览器才会中断该单词。如果单词放在其行上时仍然溢出，它将在发生溢出的点处中断该单词。例如：

  p { overflow - wrap: anywhere;}

• break - word：如果行内没有多余的地方容纳该单词到结尾，则那些正常的不能被分割的单词会被强制分割换行。例如：

  p { overflow - wrap: break - word;}

1. white - space：用来设置如何处理元素中的空白和换行，取值有：

• normal：默认值，忽略文本中的多余空格和换行，只有文本存在
  或文本达到框的约束时，文本才会换行。例如：

  p { white - space: normal;}

• nowrap：忽略文本中的多余空格和换行，遇到框的宽度约束时不会自动换行，文本只有在有
  时才会换行。例如：

  p { white - space: nowrap;}

• pre：保留文本中的空白、换行符；遇到框的宽度约束时不会自动换行，文本存在
  或文本中有换行符时，文本才会换行，行为类似 HTML 中的

  标签。例如：
  
  p {  white - space: pre;}
  

• pre - wrap：保留文本中的空白、换行符；文本存在
  或文本中有换行符时，或者遇到框的宽度约束时，文本都会换行。例如：

  p { white - space: pre - wrap;}

• pre - line：会忽略文本中的空白符；文本存在
  或文本中有换行符时，或者遇到框的宽度约束时，文本都会换行。例如：

  p { white - space: pre - line;}

兼容性：word - break、overflow - wrap、white - space 这些属性在现代浏览器中都有良好的支持。在 IE 浏览器中，对于 word - break 属性，IE8 及以上版本支持，IE7 及以下版本不支持部分属性值；overflow - wrap 属性在 IE 浏览器中也有一定的兼容性问题，特别是早期版本；white - space 属性在 IE7 及以下版本中，对 pre - line 和 pre - wrap 这两个属性值不支持。在实际开发中，对于需要兼容低版本 IE 浏览器的项目，需要特别注意这些属性的兼容性 。

（二）盒模型滚动属性

1. overflow：用于控制当元素内容溢出其指定区域时的处理方式，取值有：

• visible：默认值，内容不会被修剪，会呈现在元素框之外。例如：

  div { overflow: visible;}

• hidden：内容会被修剪，并且其余内容是不可见的。例如：

  div { overflow: hidden;}

• scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容，无论内容是否溢出，都会在水平和垂直方向添加滚动条。例如：

  div { overflow: scroll;}

• auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容。当内容未超出盒子边界时，不显示滚动条；当内容超出水平或垂直范围时，相应方向出现滚动条。例如：

  div { overflow: auto;}

1. overflow - x：专门控制水平方向的滚动，取值与 overflow 类似，有 visible、hidden、scroll、auto。例如：

   div { overflow - x: scroll;}

2. overflow - y：专门控制垂直方向的滚动，取值与 overflow 类似，有 visible、hidden、scroll、auto。例如：

   div { overflow - y: auto;}

兼容性：overflow、overflow - x、overflow - y 属性在所有主流浏览器中都有良好的兼容性。在不同浏览器中，这些属性的表现基本一致，但在一些低版本的浏览器中，可能在滚动条的样式和一些细节处理上存在差异。例如，在 IE 浏览器中，滚动条的样式与其他现代浏览器有所不同，但功能上是一致的。在实际开发中，如果需要对滚动条的样式进行定制，可能需要考虑不同浏览器的兼容性 。

九、css 生成树渲染

在浏览器呈现网页的过程中，CSS 生成树渲染是至关重要的环节，它涉及多个步骤，共同协作将 HTML 和 CSS 转化为用户最终看到的可视化页面。其主要流程包括构建 DOM 树、生成 CSSOM 树、合成渲染树、布局和绘制这几个关键阶段。

（一）构建 DOM 树

当用户在浏览器中输入网址或点击链接后，浏览器首先会向服务器发送请求以获取 HTML 文件。获取到 HTML 文件后，浏览器便开始解析 HTML 代码。在解析过程中，它会将 HTML 代码转化为一系列的标签和文本，并创建 DOM（文档对象模型）节点来对应每个 HTML 元素，这些节点按照父子、兄弟等关系相互连接，最终构建出 DOM 树。例如，对于一个简单的 HTML 结构：

<!DOCTYPE html><html><head>    <title>示例页面</title></head><body>    <div>        <p>这是一段示例文本</p>    </div></body></html>

浏览器会将标签作为 DOM 树的根节点，和作为子节点，是的子节点，和则是的子节点，以此类推，形成一个清晰的层次结构，反映页面的组织方式 。

（二）生成 CSSOM 树

在解析 HTML 的同时，浏览器会处理 CSS 样式表，包括外部样式表（通过标签引入）、内部样式表（在标签内）和行内样式（直接写在 HTML 元素的 style 属性中）。浏览器会将接收到的 CSS 原始字节数据根据文件指定的编码转换为字符，再按照 CSS 的语法规则将这些字符转化为具有特定含义的令牌，如选择器、属性名、属性值等，最后把这些令牌构建成节点，从而生成 CSSOM（CSS 对象模型）树。CSSOM 树记录了每个元素的样式规则，为后续确定元素的最终样式提供依据。例如，对于如下 CSS 样式：

body {    background-color: lightblue;    font-family: Arial, sans-serif;}p {    color: red;    font-size: 16px;}

在 CSSOM 树中，会有对应body和p选择器的节点，节点中包含了它们各自的样式属性和值 。

（三）合成渲染树

当 DOM 树和 CSSOM 树都构建完成后，浏览器便开始将它们合并，生成渲染树。在这个过程中，浏览器从 DOM 树的根节点开始遍历每个节点，对于每个可见的节点，查找并应用其适配的 CSSOM 规则。需要注意的是，渲染树只包含可见元素及其对应的样式信息，像中的标签（如、等）以及被设置为display: none的元素不会被包含在渲染树中，而使用visibility: hidden或opacity: 0隐藏的元素，仍然会显示在渲染树上，因为它们虽然不可见，但仍然占据布局空间 。

（四）布局和绘制

渲染树生成后，浏览器会进行布局（Layout）计算，也称为回流（Reflow）。在这一阶段，浏览器会根据渲染树计算每个元素在屏幕上的准确位置和大小，这涉及到复杂的计算，包括元素的宽高、内外边距、定位方式等，布局过程是递归进行的，从根节点开始逐步计算每个子节点的位置和大小。例如，对于一个包含多个嵌套元素的页面，浏览器会先计算最外层元素的位置和大小，再依次计算内层元素相对于外层元素的位置和大小 。

完成布局计算后，浏览器进入绘制（Painting）阶段，也称为重绘（Repaint）。此时，浏览器会按照计算好的位置和样式，将元素绘制到屏幕上，这个过程通过图形处理单元（GPU）来完成，将像素信息显示出来，最终形成用户看到的页面。例如，对于一个设置了背景颜色、文本颜色和边框的按钮，浏览器会根据布局计算出的位置，将这些样式信息绘制到对应的屏幕区域 。

在整个 CSS 生成树渲染过程中，JavaScript 的运行也会对其产生影响。当页面中有 JavaScript 时，通常在 DOM 树和 CSSOM 树构建完成后运行。JavaScript 可以动态地操作 DOM 和 CSSOM，例如添加、删除节点或修改节点样式，而任何这样的操作都可能导致重新计算渲染树、布局和绘制。例如，通过 JavaScript 修改一个元素的width属性，这会导致布局的重新计算（回流），进而可能引发绘制的改变（重绘） 。

十、重绘和回流以及 css 性能优化

（一）重绘和回流的概念

回流（Reflow）：当浏览器渲染树中的元素尺寸、位置、布局、显示方式等属性发生变化，导致需要重新计算元素的几何属性（如宽度、高度、位置等），进而重新构建渲染树的过程，称为回流。回流是一个比较昂贵的操作，因为它涉及到对页面布局的重新计算。例如，当我们改变元素的宽度、高度、内边距、外边距、边框、字体大小、定位方式等，都会触发回流。比如：

// 获取一个元素const div = document.getElementById('myDiv');// 改变元素的宽度，会触发回流div.style.width = '200px';

1. 重绘（Repaint）：当元素的外观发生改变，但不影响其在文档流中的位置和布局时，浏览器会重新绘制该元素，这个过程称为重绘。重绘的开销相对回流较小，因为它不需要重新计算布局。例如，当我们改变元素的颜色、背景颜色、透明度、文本装饰等，只会触发重绘。比如：

   // 获取一个元素const p = document.getElementById('myP');// 改变元素的颜色，会触发重绘p.style.color ='red';

（二）减少重绘和回流的方法

1. 批量修改 DOM 和样式：避免频繁地单独修改 DOM 元素的属性，而是将多个修改操作合并在一起。例如，不要这样写：

   const div = document.getElementById('myDiv');div.style.width = '100px';div.style.height = '100px';div.style.backgroundColor = 'blue';

可以改为：

const div = document.getElementById('myDiv');const newStyle = {  width: '100px',  height: '100px',  backgroundColor: 'blue'};for (const prop in newStyle) {  div.style[prop] = newStyle[prop];}

或者使用classList来切换类名，一次性应用多个样式改变：

<style>.newStyle {    width: 100px;    height: 100px;    background - color: blue;  }</style><script>const div = document.getElementById('myDiv');// 添加新的类名，一次性应用多个样式div.classList.add('newStyle');</script>

1. 使用****requestAnimationFrame：在进行动画等频繁改变样式的操作时，使用requestAnimationFrame函数来代替setTimeout或setInterval。requestAnimationFrame会在浏览器下一次重绘之前执行回调函数，这样可以确保样式的改变在一次重绘中完成，减少不必要的重绘和回流。例如：

   function animate() { const div = document.getElementById('myDiv'); div.style.transform = 'translateX(10px)'; requestAnimationFrame(animate);}requestAnimationFrame(animate);

2. 将元素脱离文档流：在进行大量的样式修改或复杂的布局调整时，可以先将元素通过display: none等方式脱离文档流，此时对元素的任何修改都不会触发回流和重绘。修改完成后，再将元素重新添加到文档流中，这样只会触发一次回流和重绘。例如：

   const div = document.getElementById('myDiv');// 先将元素脱离文档流div.style.display = 'none';// 进行大量的样式修改div.style.width = '300px';div.style.height = '300px';div.style.backgroundColor = 'green';// 重新将元素添加到文档流div.style.display = 'block';

（三）CSS 性能优化策略

1. 优化选择器：尽量使用简单、高效的选择器。避免使用通配符选择器（如*）、后代选择器（如body div）和属性选择器（如[type="text"]），因为这些选择器的匹配性能较低。例如，使用#myDiv（ID 选择器）或.myClass（类选择器）来选择元素会比使用body div更高效。
2. 避免过度使用复杂的样式：复杂的样式（如多层嵌套的 CSS3 动画、大量的渐变效果等）会增加浏览器的计算负担，降低性能。尽量简化样式，使用简洁的设计。例如，减少不必要的阴影、滤镜等效果。
3. 使用硬件加速：利用 CSS3 的transform和opacity属性，这些属性在大多数浏览器中可以触发硬件加速，提高动画和过渡效果的性能。例如，使用transform: translate3d(0, 0, 0)来代替left和top属性进行元素的移动，这样可以利用 GPU 进行渲染，提升性能。
4. 合理使用缓存：对于一些不变的样式，可以使用缓存来避免重复计算。例如，对于一些全局的样式设置，可以在页面加载时一次性计算并应用，而不是每次重新计算。同时，对于一些外部样式表，可以通过设置合适的缓存策略，让浏览器在后续访问时直接从缓存中读取，减少加载时间 。