CSS3相关2.0

CSS Sprite

CSS Sprite 是一种将多个小图标或图片合并到一张大图中的技术，通过背景定位（background-position）来显示需要的部分。这种技术可以减少HTTP请求次数，提升网页加载性能。

1. CSS Sprite 的优点

减少HTTP请求：将多个图片合并为一张，减少服务器请求次数。
提升加载速度：减少网络延迟，加快页面加载。
减少图片大小：合并后的图片通常比多个小图片的总大小更小。
方便管理：只需维护一张大图，简化图片管理。

2. CSS Sprite 的实现步骤

2.1 合并图片

将多个小图标或图片合并为一张大图，例如：

+-------------------+
| 图标1 | 图标2 | 图标3 |
|-------------------|
| 图标4 | 图标5 | 图标6 |
+-------------------+

2.2 设置背景图

将合并后的大图设置为元素的背景图。

2.3 使用 background-position 定位

通过 background-position 属性显示需要的部分。

3. 示例

3.1 HTML 结构

html

<div class="sprite icon1"></div>
<div class="sprite icon2"></div>
<div class="sprite icon3"></div>

3.2 CSS 样式

css

.sprite {
    background-image: url('sprites.png'); /* 合并后的大图 */
    background-repeat: no-repeat; /* 禁止重复 */
    width: 50px; /* 每个图标的宽度 */
    height: 50px; /* 每个图标的高度 */
}

.icon1 {
    background-position: 0 0; /* 显示第一个图标 */
}

.icon2 {
    background-position: -50px 0; /* 显示第二个图标 */
}

.icon3 {
    background-position: -100px 0; /* 显示第三个图标 */
}

4. 工具推荐

以下工具可以帮助生成CSS Sprite：

在线工具：
- SpriteCow
- CSS Sprite Generator
构建工具插件：
- Webpack: webpack-spritesmith
- Gulp: gulp.spritesmith

5. 注意事项

图片间距：合并时留出适当间距，避免显示错误。

Retina屏幕：为高清屏准备2倍大小的Sprite图，并通过background-size缩放。

css

.sprite {
    background-image: url('sprites@2x.png');
    background-size: 150px 100px; /* 大图尺寸缩小一半 */
}

维护成本：新增或修改图标时需要重新生成Sprite图。

总结

CSS Sprite 是一种优化网页性能的有效技术，适用于图标较多且固定的场景。通过合并图片和背景定位，可以减少HTTP请求，提升加载速度。

DIV+CSS实现3栏布局（左右固定200px中间自适应）

使用DIV+CSS实现三栏布局（左右固定200px，中间自适应）是网页布局中的常见需求。以下是几种实现方法：

方法1：使用浮动（Float）

通过浮动实现左右固定宽度，中间自适应的布局。

HTML：

html

<div class="container">
    <div class="left">左侧栏</div>
    <div class="right">右侧栏</div>
    <div class="center">中间内容</div>
</div>

CSS：

css

.container {
    overflow: hidden; /* 清除浮动 */
}

.left, .right {
    width: 200px;
    height: 100vh; /* 高度占满视口 */
    background-color: #ccc;
}

.left {
    float: left; /* 左浮动 */
}

.right {
    float: right; /* 右浮动 */
}

.center {
    margin: 0 200px; /* 左右留出200px */
    background-color: #f0f0f0;
    height: 100vh;
}

方法2：使用Flexbox

通过Flexbox实现灵活的布局。

HTML：

html

<div class="container">
    <div class="left">左侧栏</div>
    <div class="center">中间内容</div>
    <div class="right">右侧栏</div>
</div>

CSS：

css

.container {
    display: flex;
    height: 100vh;
}

.left, .right {
    width: 200px;
    background-color: #ccc;
}

.center {
    flex: 1; /* 中间自适应 */
    background-color: #f0f0f0;
}

方法3：使用Grid布局

通过CSS Grid实现简洁的三栏布局。

HTML：

html

<div class="container">
    <div class="left">左侧栏</div>
    <div class="center">中间内容</div>
    <div class="right">右侧栏</div>
</div>

CSS：

css

.container {
    display: grid;
    grid-template-columns: 200px 1fr 200px; /* 左右固定200px，中间自适应 */
    height: 100vh;
}

.left, .right {
    background-color: #ccc;
}

.center {
    background-color: #f0f0f0;
}

方法4：使用绝对定位

通过绝对定位实现左右固定，中间自适应的布局。

HTML：

html

<div class="container">
    <div class="left">左侧栏</div>
    <div class="center">中间内容</div>
    <div class="right">右侧栏</div>
</div>

CSS：

css

.container {
    position: relative;
    height: 100vh;
}

.left, .right {
    position: absolute;
    top: 0;
    width: 200px;
    height: 100vh;
    background-color: #ccc;
}

.left {
    left: 0;
}

.right {
    right: 0;
}

.center {
    margin: 0 200px; /* 左右留出200px */
    background-color: #f0f0f0;
    height: 100vh;
}

方法5：使用表格布局

通过display: table实现三栏布局。

HTML：

html

<div class="container">
    <div class="left">左侧栏</div>
    <div class="center">中间内容</div>
    <div class="right">右侧栏</div>
</div>

CSS：

css

.container {
    display: table;
    width: 100%;
    height: 100vh;
}

.left, .center, .right {
    display: table-cell;
}

.left, .right {
    width: 200px;
    background-color: #ccc;
}

.center {
    background-color: #f0f0f0;
}

总结

以下是几种实现三栏布局的方法对比：

方法	优点	缺点
浮动（Float）	兼容性好	需要清除浮动
Flexbox	灵活，代码简洁	兼容性较差（IE9及以下不支持）
Grid布局	代码简洁，功能强大	兼容性较差（IE11及以下不支持）
绝对定位	实现简单	布局不够灵活
表格布局	兼容性好	语义化较差

推荐使用Flexbox或Grid布局，因为它们更现代、灵活且代码简洁。如果需要兼容旧版浏览器，可以选择浮动或表格布局。

CSS哪些样式可以继承，哪些不可以

CSS中，某些样式属性可以从父元素继承到子元素，而另一些属性则不会继承。了解哪些属性可以继承有助于更好地组织和管理样式。

1. 可继承的样式属性

以下属性会从父元素继承到子元素：

1.1 文本相关属性

color：文本颜色。
font-family：字体族。
font-size：字体大小。
font-weight：字体粗细。
font-style：字体样式（如斜体）。
line-height：行高。
text-align：文本对齐方式。
text-indent：文本缩进。
text-transform：文本转换（如大写、小写）。
letter-spacing：字符间距。
word-spacing：单词间距。
white-space：空白处理方式。
direction：文本方向（如从左到右、从右到左）。

1.2 列表相关属性

list-style-type：列表项标记类型（如圆点、数字）。
list-style-position：列表项标记位置。
list-style-image：列表项标记图像。

1.3 其他属性

visibility：元素可见性。
cursor：鼠标指针样式。

2. 不可继承的样式属性

以下属性不会从父元素继承到子元素：

2.1 盒模型相关属性

width：宽度。
height：高度。
margin：外边距。
padding：内边距。
border：边框。
box-sizing：盒模型计算方式。

2.2 定位和布局相关属性

position：定位方式。
top、right、bottom、left：定位偏移。
display：显示方式。
float：浮动。
clear：清除浮动。
z-index：堆叠顺序。

2.3 背景相关属性

background-color：背景颜色。
background-image：背景图像。
background-position：背景位置。
background-repeat：背景重复方式。
background-size：背景尺寸。

2.4 其他属性

overflow：溢出处理方式。
opacity：透明度。
transform：变换效果。
transition：过渡效果。
animation：动画效果。

3. 强制继承

对于不可继承的属性，可以使用inherit关键字强制子元素继承父元素的样式。

示例：

css

.parent {
    border: 1px solid black;
}

.child {
    border: inherit; /* 强制继承父元素的边框样式 */
}

4. 示例

以下是一个继承和非继承属性的示例：

HTML：

html

<div class="parent">
    父元素
    <div class="child">子元素</div>
</div>

CSS：

css

.parent {
    color: blue; /* 可继承 */
    font-size: 16px; /* 可继承 */
    border: 1px solid black; /* 不可继承 */
    padding: 10px; /* 不可继承 */
}

.child {
    /* 继承 color 和 font-size */
    border: inherit; /* 强制继承边框 */
    padding: 5px; /* 不继承，单独设置 */
}

总结

可继承属性	不可继承属性
`color`	`width`
`font-family`	`height`
`font-size`	`margin`
`font-weight`	`padding`
`font-style`	`border`
`line-height`	`background-color`
`text-align`	`position`
`text-indent`	`display`
`text-transform`	`float`
`letter-spacing`	`overflow`
`word-spacing`	`opacity`
`white-space`	`transform`
`direction`	`transition`
`list-style-type`	`animation`
`list-style-position`
`list-style-image`
`visibility`
`cursor`

通过了解哪些属性可以继承，可以更好地组织CSS代码，避免重复定义样式。对于不可继承的属性，可以使用inherit关键字强制继承。

CSS有哪些基本选择器，权重是如何表示的

CSS选择器用于选择需要应用样式的HTML元素。选择器的类型和组合方式决定了样式的优先级（权重）。以下是CSS的基本选择器及其权重表示方法：

1. 基本选择器

1.1 元素选择器

作用：根据HTML标签名称选择元素。
语法：
css
```
元素名 { }
```
示例：
css
```
p {
    color: blue;
}
```

1.2 类选择器

作用：根据元素的class属性选择元素。
语法：
css
```
.类名 { }
```
示例：
css
```
.text-red {
    color: red;
}
```

1.3 ID选择器

作用：根据元素的id属性选择元素。
语法：
css
```
#id名 { }
```

示例：

css

#header {
    background-color: yellow;
}

1.4 通配选择器

作用：选择所有元素。
语法：
css
```
* { }
```
示例：
css
```
* {
    margin: 0;
}
```

1.5 属性选择器

作用：根据元素的属性选择元素。
语法：
css
```
[属性名] { }
[属性名="值"] { }
```

示例：

css

[type="text"] {
    border: 1px solid #ccc;
}

1.6 伪类选择器

作用：根据元素的状态或位置选择元素。
语法：
css
```
:伪类 { }
```
示例：
css
```
a:hover {
    color: green;
}
```

1.7 伪元素选择器

作用：选择元素的特定部分。
语法：
css
```
::伪元素 { }
```

示例：

css

p::first-line {
    font-weight: bold;
}

2. 组合选择器

2.1 后代选择器

作用：选择某个元素的后代元素。
语法：
css
```
A B { }
```
示例：
css
```
div p {
    font-size: 16px;
}
```

2.2 子选择器

作用：选择某个元素的直接子元素。
语法：
css
```
A > B { }
```
示例：
css
```
div > p {
    color: red;
}
```

2.3 相邻兄弟选择器

作用：选择某个元素的相邻兄弟元素。
语法：
css
```
A + B { }
```
示例：
css
```
h1 + p {
    margin-top: 0;
}
```

2.4 通用兄弟选择器

作用：选择某个元素的所有后续兄弟元素。
语法：
css
```
A ~ B { }
```
示例：
css
```
h1 ~ p {
    color: blue;
}
```

3. 选择器权重

选择器的权重决定了样式的优先级。权重由四个部分组成，分别是：

内联样式：(1, 0, 0, 0)
ID选择器：(0, 1, 0, 0)
类/属性/伪类选择器：(0, 0, 1, 0)
元素/伪元素选择器：(0, 0, 0, 1)

权重从左到右比较，数值大的优先级高。

权重计算示例：

css

#header .nav li a { } /* 权重：(0, 1, 1, 2) */
.nav li a { }         /* 权重：(0, 0, 1, 2) */
a { }                 /* 权重：(0, 0, 0, 1) */

4. 特殊规则

4.1 !important

作用：提升样式的优先级，覆盖其他规则。
示例：
css
```
p {
    color: red !important;
}
```

4.2 继承样式

作用：继承的样式权重最低，低于任何直接应用的样式。

示例：

css

body {
    color: blue; /* 继承样式 */
}
p {
    color: red; /* 直接样式 */
}

4.3 相同权重

规则：当权重相同时，后定义的样式优先。

示例：

css

p {
    color: red;
}
p {
    color: blue; /* 最终应用 */
}

总结

选择器类型	示例	权重
内联样式	`style="color: red;"`	`(1, 0, 0, 0)`
ID选择器	`#header`	`(0, 1, 0, 0)`
类/属性/伪类选择器	`.nav`, `[type="text"]`, `:hover`	`(0, 0, 1, 0)`
元素/伪元素选择器	`p`, `::before`	`(0, 0, 0, 1)`
通配选择器	`*`	`(0, 0, 0, 0)`
继承样式	继承的样式	最低

通过合理使用选择器和权重规则，可以精确控制样式的优先级和应用范围。

CSS如何隐藏网页内容只让内容在屏幕阅读器上使用

在网页开发中，有时需要隐藏某些内容，使其在视觉上不可见，但仍然可以被屏幕阅读器（如供视障用户使用的辅助工具）读取。以下是几种常见的实现方法：

1. 使用 aria-hidden 和 aria-label

aria-hidden="true"：隐藏元素，使其对屏幕阅读器不可见。
aria-label：为元素提供屏幕阅读器可读的标签。

示例：

html

<button aria-label="关闭">
    <span aria-hidden="true">×</span>
</button>

解释：视觉上显示“×”符号，但屏幕阅读器会读取“关闭”。

2. 使用 sr-only 或 visually-hidden 类

通过CSS将内容隐藏在视觉上，但仍保留在DOM中供屏幕阅读器读取。

示例：

css

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

使用：

html

<p class="sr-only">这段内容只对屏幕阅读器可见。</p>

3. 使用 clip-path

通过裁剪元素使其在视觉上不可见，但仍保留在DOM中。

示例：

css

.visually-hidden {
    clip-path: inset(100%);
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

使用：

html

<p class="visually-hidden">这段内容只对屏幕阅读器可见。</p>

4. 使用 opacity 和 z-index

通过设置透明度为0并将元素置于底层，使其在视觉上不可见。

示例：

css

.screen-reader-only {
    opacity: 0;
    position: absolute;
    z-index: -1;
}

使用：

html

<p class="screen-reader-only">这段内容只对屏幕阅读器可见。</p>

5. 使用 display: none 或 visibility: hidden 的注意事项

display: none：元素完全从渲染树中移除，屏幕阅读器也无法读取。
visibility: hidden：元素在视觉上隐藏，但仍占据空间，屏幕阅读器也无法读取。

不推荐：

html

<p style="display: none;">这段内容对屏幕阅读器不可见。</p>
<p style="visibility: hidden;">这段内容对屏幕阅读器不可见。</p>

6. 使用 aria-describedby 或 aria-labelledby

通过关联隐藏内容与可见元素，使屏幕阅读器能够读取隐藏内容。

示例：

html

<button aria-labelledby="button-label">
    <span id="button-label" class="sr-only">提交表单</span>
    提交
</button>

7. 使用 role 属性

通过role属性明确元素的语义，帮助屏幕阅读器理解内容。

示例：

html

<div role="alert" class="sr-only">这是一条重要的提示信息。</div>

8. 综合示例

以下是一个综合使用多种方法的示例：

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>
    <style>
        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            border: 0;
        }
    </style>
</head>
<body>
    <button aria-label="关闭">
        <span aria-hidden="true">×</span>
    </button>

    <p class="sr-only">这段内容只对屏幕阅读器可见。</p>

    <div role="alert" class="sr-only">这是一条重要的提示信息。</div>
</body>
</html>

总结

隐藏网页内容但让屏幕阅读器可读的常用方法包括：

使用 sr-only 或 visually-hidden 类。
使用 aria-hidden 和 aria-label。
使用 clip-path 或 opacity。
避免使用 display: none 或 visibility: hidden。

这些方法可以确保内容对视觉用户隐藏，同时为屏幕阅读器用户提供必要的信息。

CSS基本语句构成

CSS（层叠样式表）的基本语句由选择器和声明块组成，用于定义HTML元素的样式。以下是CSS基本语句的构成和详细说明：

1. 基本结构

CSS语句的基本结构如下：

css

选择器 {
    属性: 值;
    属性: 值;
}

选择器：用于选择需要应用样式的HTML元素。
声明块：包含一对大括号{}，内部是一个或多个声明。
声明：由属性和值组成，用冒号:分隔，以分号;结尾。

2. 选择器

选择器用于指定需要应用样式的HTML元素。常见的选择器类型包括：

2.1 元素选择器

根据HTML标签名称选择元素。
示例：
css
```
p {
    color: blue;
}
```

2.2 类选择器

根据元素的class属性选择元素。
示例：
css
```
.text-red {
    color: red;
}
```

2.3 ID选择器

根据元素的id属性选择元素。

示例：

css

#header {
    background-color: yellow;
}

2.4 属性选择器

根据元素的属性选择元素。

示例：

css

[type="text"] {
    border: 1px solid #ccc;
}

2.5 伪类选择器

根据元素的状态或位置选择元素。
示例：
css
```
a:hover {
    color: green;
}
```

2.6 伪元素选择器

选择元素的特定部分。

示例：

css

p::first-line {
    font-weight: bold;
}

2.7 组合选择器

通过组合多个选择器选择元素。
- 后代选择器：A B
- 子选择器：A > B
- 相邻兄弟选择器：A + B
- 通用兄弟选择器：A ~ B
示例：
css
```
div p {
    font-size: 16px;
}
```

3. 声明块

声明块包含一个或多个声明，每个声明由属性和值组成。

3.1 属性

属性是要设置的样式名称，如color、font-size、margin等。
示例：
css
```
p {
    color: blue;
}
```

3.2 值

值是属性的具体设置，如颜色值、尺寸值等。
示例：
css
```
p {
    font-size: 16px;
}
```

4. 注释

CSS注释用于解释代码，不会影响样式。注释以/*开头，以*/结尾。

示例：

css

/* 这是一个注释 */
p {
    color: red; /* 设置文字颜色为红色 */
}

5. 示例

以下是一个完整的CSS示例：

css

/* 选择所有段落元素 */
p {
    color: blue; /* 设置文字颜色为蓝色 */
    font-size: 16px; /* 设置字体大小为16像素 */
}

/* 选择类名为text-red的元素 */
.text-red {
    color: red; /* 设置文字颜色为红色 */
}

/* 选择ID为header的元素 */
#header {
    background-color: yellow; /* 设置背景颜色为黄色 */
}

/* 选择所有链接元素，并在悬停时改变颜色 */
a:hover {
    color: green; /* 设置悬停时文字颜色为绿色 */
}

总结

CSS基本语句由选择器和声明块组成：

选择器：用于选择HTML元素。
声明块：包含一个或多个声明，每个声明由属性和值组成。

通过合理使用选择器和声明，可以灵活地控制网页的样式和布局。

浏览器如何判断元素是否匹配某个CSS选择器

浏览器判断元素是否匹配某个CSS选择器的过程称为选择器匹配。这个过程是浏览器渲染页面时的重要步骤，直接影响页面渲染的性能。以下是浏览器判断元素是否匹配CSS选择器的基本流程：

1. 选择器的解析

浏览器首先将CSS选择器解析为一个选择器树。选择器树的每个节点代表一个简单的选择器（如类选择器、ID选择器、标签选择器等），节点之间的关系表示选择器的组合方式（如后代选择器、子选择器、相邻兄弟选择器等）。

示例：

css

/* 选择器 */
div.container > ul.list li.item

/* 解析后的选择器树 */
- div.container
  - > ul.list
    - li.item

2. 从右到左匹配

浏览器采用从右到左的方式匹配选择器。这是因为从右到左匹配可以减少需要检查的元素数量，提高匹配效率。

示例：

对于选择器div.container > ul.list li.item，浏览器的匹配步骤如下：

找到所有匹配li.item的元素。
检查这些元素的父元素是否匹配ul.list。
检查ul.list的父元素是否匹配div.container。

3. 匹配规则

浏览器根据选择器的类型和组合方式，逐级检查元素是否匹配选择器的每个部分。

3.1 简单选择器

标签选择器：检查元素的标签名。
css
```
div { }
```
类选择器：检查元素是否包含指定的类。
css
```
.container { }
```
ID选择器：检查元素的ID是否匹配。
css
```
#header { }
```
属性选择器：检查元素是否具有指定的属性或属性值。
css
```
[type="text"] { }
```
伪类选择器：检查元素的状态或位置。
css
```
:hover { }
:nth-child(2) { }
```
伪元素选择器：匹配元素的特定部分。
css
```
::before { }
```

3.2 组合选择器

后代选择器：检查元素是否在某个祖先元素内。
css
```
div span { }
```
子选择器：检查元素是否是某个父元素的直接子元素。
css
```
div > span { }
```
相邻兄弟选择器：检查元素是否是某个元素的相邻兄弟元素。
css
```
h1 + p { }
```
通用兄弟选择器：检查元素是否是某个元素的后续兄弟元素。
css
```
h1 ~ p { }
```

4. 匹配优化

为了提高匹配效率，浏览器会采用一些优化策略：

索引和缓存：浏览器会为ID、类、标签等选择器建立索引，减少需要检查的元素数量。
短路匹配：如果某个选择器部分不匹配，浏览器会立即停止匹配，避免不必要的检查。

5. 示例分析

以下是一个选择器匹配的完整示例：

HTML：

html

<div class="container">
    <ul class="list">
        <li class="item">Item 1</li>
        <li class="item">Item 2</li>
    </ul>
</div>

CSS：

css

div.container > ul.list li.item {
    color: red;
}

匹配过程：

找到所有li元素，检查是否包含item类。
对于每个匹配的li.item，检查其父元素是否是ul.list。
对于每个匹配的ul.list，检查其父元素是否是div.container。
如果所有条件都满足，则应用样式。

6. 性能注意事项

避免复杂选择器：复杂的选择器会增加匹配时间，影响性能。

css

/* 不推荐 */
body div#header ul.nav li a { }

/* 推荐 */
.nav-link { }

减少通用选择器：*会匹配所有元素，影响性能。

css

/* 不推荐 */
* { margin: 0; }

/* 推荐 */
body, h1, p { margin: 0; }

总结

浏览器通过从右到左的方式解析和匹配CSS选择器，逐级检查元素是否满足选择器的条件。为了提高性能，应尽量避免使用复杂选择器和通用选择器，优先使用类选择器和ID选择器。

写高效CSS需要考虑到哪些问题

编写高效的CSS不仅可以提升网页性能，还能提高代码的可维护性和可读性。以下是编写高效CSS时需要考虑的关键问题：

1. 选择器性能

避免过度嵌套：嵌套过深的选择器会增加匹配时间。

css

/* 不推荐 */
div ul li a {
    color: red;
}

/* 推荐 */
.nav-link {
    color: red;
}

避免通用选择器：*会匹配所有元素，影响性能。

css

/* 不推荐 */
* {
    margin: 0;
}

/* 推荐 */
body, h1, p {
    margin: 0;
}

使用类选择器：类选择器的性能优于标签选择器和ID选择器。

css

/* 不推荐 */
div#header {
    background: blue;
}

/* 推荐 */
.header {
    background: blue;
}

2. 减少重复代码

使用CSS变量：通过变量统一管理颜色、字体等值。

css

:root {
    --primary-color: #3498db;
}
.button {
    background-color: var(--primary-color);
}

使用混合（Mixins）：在预处理器（如Sass）中定义可重用的代码块。

scss

@mixin border-radius($radius) {
    border-radius: $radius;
}
.box {
    @include border-radius(10px);
}

3. 减少样式表大小

压缩CSS文件：使用工具（如CSSNano）压缩CSS文件，减少文件大小。
删除未使用的CSS：使用工具（如PurgeCSS）删除未使用的样式。

4. 使用高效的布局方式

Flexbox和Grid：优先使用Flexbox和Grid布局，避免使用浮动和定位。
css
```
.container {
    display: flex;
    justify-content: space-between;
}
```
避免过多使用position: absolute：绝对定位会增加布局复杂性，影响性能。

5. 优化字体和图片

使用Web字体优化：通过font-display: swap避免字体加载时的布局偏移。

css

@font-face {
    font-family: 'MyFont';
    src: url('myfont.woff2') format('woff2');
    font-display: swap;
}

压缩图片：使用工具（如ImageOptim）压缩图片，减少加载时间。

6. 避免过度使用!important

问题：!important会覆盖其他样式，增加维护难度。
解决方案：通过提高选择器特异性或重构样式表来避免使用!important。

7. 模块化和可维护性

BEM命名规范：使用BEM（Block-Element-Modifier）命名规范，提高代码可读性和可维护性。
css
```
.block { }
.block__element { }
.block--modifier { }
```

拆分样式表：将样式表拆分为多个模块化文件，便于管理和维护。

css

/* base.css */
body {
    font-family: Arial, sans-serif;
}

/* components/button.css */
.button {
    background-color: blue;
}

8. 响应式设计

移动优先：先编写移动端样式，再通过媒体查询逐步增强大屏幕样式。

css

/* 移动端样式 */
.container {
    padding: 10px;
}

/* 大屏幕样式 */
@media (min-width: 768px) {
    .container {
        padding: 20px;
    }
}

使用相对单位：使用em、rem、%等相对单位，确保布局自适应。

9. 浏览器兼容性

前缀处理：使用Autoprefixer自动添加浏览器前缀。

css

.box {
    display: flex;
}
/* 自动添加前缀后 */
.box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

渐进增强：先确保基本功能在所有浏览器中可用，再通过高级特性增强体验。

10. 测试和优化

性能测试：使用工具（如Lighthouse）测试CSS性能，找出瓶颈。
浏览器测试：在不同浏览器和设备上测试样式，确保兼容性。

总结

编写高效的CSS需要关注选择器性能、代码复用、文件大小、布局方式、字体和图片优化、模块化设计、响应式设计、浏览器兼容性以及测试和优化。通过遵循这些最佳实践，可以显著提升CSS的性能和可维护性。

如何优化网页的打印样式

优化网页的打印样式可以确保网页在打印时呈现清晰、易读的格式。以下是优化打印样式的常用方法和技巧：

1. 使用打印样式表

通过@media print媒体查询定义打印样式，确保打印时的布局和样式与屏幕显示不同。

示例：

css

/* 默认样式 */
body {
    font-size: 16px;
    color: #333;
}

/* 打印样式 */
@media print {
    body {
        font-size: 12pt;
        color: #000;
    }
}

2. 隐藏不必要的内容

打印时隐藏不必要的元素（如导航栏、广告、按钮等），只保留核心内容。

示例：

css

@media print {
    nav, .ad-banner, .button {
        display: none;
    }
}

3. 调整布局

打印时通常使用纵向布局，因此需要调整宽度、边距和浮动。

示例：

css

@media print {
    .container {
        width: 100%;
        margin: 0;
        padding: 0;
        float: none;
    }
}

4. 优化字体和颜色

使用易读的字体（如serif字体）。
将颜色转换为黑白或灰度，确保打印效果清晰。

示例：

css

@media print {
    body {
        font-family: "Times New Roman", serif;
        color: #000;
        background: none;
    }
    a {
        color: #000;
        text-decoration: underline;
    }
}

5. 处理链接

在打印时显示链接的URL，方便读者查看。

示例：

css

@media print {
    a::after {
        content: " (" attr(href) ")";
        font-size: 90%;
    }
}

6. 分页控制

使用page-break属性控制分页，避免内容被不恰当地分割。

示例：

css

@media print {
    h1, h2, h3 {
        page-break-after: avoid; /* 避免标题后分页 */
    }
    .page-break {
        page-break-before: always; /* 强制分页 */
    }
}

7. 调整图片和背景

避免打印背景图片和颜色，节省墨水。
确保图片在打印时清晰可见。

示例：

css

@media print {
    body {
        background: none;
    }
    img {
        max-width: 100%;
        height: auto;
    }
}

8. 设置页眉和页脚

使用@page规则设置页面的页眉和页脚。

示例：

css

@page {
    size: A4;
    margin: 2cm;
    @top-center {
        content: "网页标题";
    }
    @bottom-right {
        content: "第 " counter(page) " 页";
    }
}

9. 测试打印效果

使用浏览器的打印预览功能测试样式，确保打印效果符合预期。

10. 完整示例

以下是一个完整的打印样式优化示例：

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>
    <style>
        /* 默认样式 */
        body {
            font-size: 16px;
            color: #333;
            font-family: Arial, sans-serif;
        }
        nav, .ad-banner, .button {
            display: block;
        }

        /* 打印样式 */
        @media print {
            body {
                font-size: 12pt;
                color: #000;
                font-family: "Times New Roman", serif;
                background: none;
            }
            nav, .ad-banner, .button {
                display: none;
            }
            a::after {
                content: " (" attr(href) ")";
                font-size: 90%;
            }
            img {
                max-width: 100%;
                height: auto;
            }
            h1, h2, h3 {
                page-break-after: avoid;
            }
            .page-break {
                page-break-before: always;
            }
        }

        @page {
            size: A4;
            margin: 2cm;
            @top-center {
                content: "网页标题";
            }
            @bottom-right {
                content: "第 " counter(page) " 页";
            }
        }
    </style>
</head>
<body>
    <nav>导航栏</nav>
    <div class="ad-banner">广告</div>
    <h1>网页标题</h1>
    <p>这是一个示例段落。<a href="https://example.com">这是一个链接</a>。</p>
    <img src="example.jpg" alt="示例图片">
    <div class="page-break"></div>
    <h2>第二部分</h2>
    <p>这是另一个示例段落。</p>
    <button class="button">按钮</button>
</body>
</html>

总结

通过使用打印样式表、隐藏不必要内容、调整布局、优化字体和颜色、处理链接、控制分页等方法，可以显著提升网页的打印效果。测试和优化是确保打印样式符合预期的关键步骤。

移动端CSS布局

移动端CSS布局需要适应不同屏幕尺寸和设备特性，确保页面在各种设备上都能良好显示。以下是移动端CSS布局的常用技术和最佳实践：

1. 响应式布局（Responsive Design）

响应式布局通过媒体查询（Media Queries）和弹性布局（Flexbox、Grid）实现页面在不同设备上的自适应。

1.1 媒体查询（Media Queries）

作用：根据屏幕宽度、设备方向等条件应用不同的样式。

示例：

css

/* 默认样式 */
body {
    font-size: 16px;
}

/* 屏幕宽度小于600px时的样式 */
@media (max-width: 600px) {
    body {
        font-size: 14px;
    }
}

1.2 视口设置（Viewport）

作用：控制页面的缩放和布局宽度。

示例：

html

<meta name="viewport" content="width=device-width, initial-scale=1.0">

1.3 弹性布局（Flexbox）

作用：创建灵活的布局，适应不同屏幕尺寸。

示例：

css

.container {
    display: flex;
    flex-wrap: wrap;
}
.item {
    flex: 1 1 100%;
}

1.4 网格布局（Grid）

作用：创建复杂的二维布局。

示例：

css

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

2. 移动端布局技巧

2.1 流式布局（Fluid Layout）

作用：使用百分比或vw/vh单位定义宽度和高度，使布局随屏幕尺寸变化。

示例：

css

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

2.2 弹性图片

作用：图片随容器大小缩放。

示例：

css

img {
    max-width: 100%;
    height: auto;
}

2.3 隐藏内容

作用：在小屏幕上隐藏不必要的内容。

示例：

css

@media (max-width: 600px) {
    .desktop-only {
        display: none;
    }
}

2.4 触摸优化

作用：优化按钮和链接的触摸体验。

示例：

css

button, a {
    min-width: 48px;
    min-height: 48px;
}

3. 移动端布局框架

使用现成的CSS框架可以快速实现移动端布局，常见的框架包括：

3.1 Bootstrap

特点：响应式网格系统、预定义组件。

示例：

html

<div class="container">
    <div class="row">
        <div class="col-sm-6">左侧内容</div>
        <div class="col-sm-6">右侧内容</div>
    </div>
</div>

3.2 Foundation

特点：灵活的网格系统、移动优先设计。

示例：

html

<div class="grid-container">
    <div class="grid-x">
        <div class="cell small-6">左侧内容</div>
        <div class="cell small-6">右侧内容</div>
    </div>
</div>

3.3 Tailwind CSS

特点：实用工具类，高度可定制。

示例：

html

<div class="flex flex-wrap">
    <div class="w-full sm:w-1/2">左侧内容</div>
    <div class="w-full sm:w-1/2">右侧内容</div>
</div>

4. 移动端布局最佳实践

4.1 移动优先设计

原则：先设计移动端布局，再逐步增强大屏幕样式。

示例：

css

/* 移动端样式 */
body {
    font-size: 14px;
}

/* 大屏幕样式 */
@media (min-width: 768px) {
    body {
        font-size: 16px;
    }
}

4.2 避免固定宽度

原则：使用相对单位（如%、em、rem、vw、vh）代替固定宽度。

示例：

css

.container {
    width: 90%;
    max-width: 1200px;
}

4.3 优化字体大小

原则：使用相对单位（如rem）定义字体大小，确保文字在不同设备上可读。

示例：

css

body {
    font-size: 1rem;
}
h1 {
    font-size: 2rem;
}

4.4 测试多设备

原则：使用开发者工具或真实设备测试布局，确保兼容性。

5. 示例：移动端响应式布局

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>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }
        .container {
            display: flex;
            flex-wrap: wrap;
        }
        .item {
            flex: 1 1 100%;
            padding: 10px;
            box-sizing: border-box;
        }
        @media (min-width: 600px) {
            .item {
                flex: 1 1 50%;
            }
        }
        @media (min-width: 900px) {
            .item {
                flex: 1 1 33.33%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item" style="background-color: #f0f0f0;">项目1</div>
        <div class="item" style="background-color: #e0e0e0;">项目2</div>
        <div class="item" style="background-color: #d0d0d0;">项目3</div>
    </div>
</body>
</html>

总结

移动端CSS布局需要结合响应式设计、弹性布局、流式布局等技术，确保页面在不同设备上都能良好显示。通过合理使用媒体查询、Flexbox、Grid等工具，可以创建高效、灵活的移动端布局。

CSS display

CSS的display属性用于控制元素的显示方式，决定了元素在页面中的布局行为。以下是常见的display属性值及其作用：

1. 常见属性值

1.1 block

作用：元素显示为块级元素，独占一行，可以设置宽度、高度、内外边距。
常见元素：<div>、<p>、<h1>-<h6>、<ul>等。

示例：

css

div {
    display: block;
    width: 100%;
    height: 50px;
    background-color: red;
}

1.2 inline

作用：元素显示为行内元素，不独占一行，宽度和高度由内容决定，无法设置宽度、高度、上下边距。
常见元素：<span>、<a>、<strong>、<em>等。

示例：

css

span {
    display: inline;
    color: blue;
}

1.3 inline-block

作用：元素显示为行内块级元素，不独占一行，但可以设置宽度、高度、内外边距。
常见用途：用于创建水平排列的布局。

示例：

css

div {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: green;
}

1.4 none

作用：元素不显示，且不占据页面空间。
常见用途：用于动态隐藏元素。
示例：
css
```
div {
    display: none;
}
```

1.5 flex

作用：元素显示为弹性盒子容器，子元素可以通过弹性布局灵活排列。
常见用途：用于创建响应式布局。

示例：

css

.container {
    display: flex;
    justify-content: space-between;
}

1.6 grid

作用：元素显示为网格容器，子元素可以通过网格布局排列。
常见用途：用于创建复杂的二维布局。

示例：

css

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

1.7 table、table-row、table-cell

作用：元素显示为表格、表格行或表格单元格。
常见用途：用于模拟表格布局。

示例：

css

.table {
    display: table;
}
.row {
    display: table-row;
}
.cell {
    display: table-cell;
}

2. 其他属性值

2.1 inline-flex

作用：元素显示为行内弹性盒子容器。

示例：

css

.container {
    display: inline-flex;
}

2.2 inline-grid

作用：元素显示为行内网格容器。

示例：

css

.container {
    display: inline-grid;
}

2.3 list-item

作用：元素显示为列表项，通常与<li>元素一起使用。

示例：

css

div {
    display: list-item;
    list-style-type: square;
}

2.4 inherit

作用：继承父元素的display属性值。
示例：
css
```
div {
    display: inherit;
}
```

2.5 initial

作用：将display属性重置为默认值（通常是inline）。
示例：
css
```
div {
    display: initial;
}
```

2.6 unset

作用：如果属性可继承，则继承父元素值，否则重置为initial。
示例：
css
```
div {
    display: unset;
}
```

总结

属性值	作用	常见用途
`block`	块级元素，独占一行	布局容器、段落、标题等
`inline`	行内元素，不独占一行	文本修饰、链接等
`inline-block`	行内块级元素，可设置宽高	水平排列的布局
`none`	隐藏元素，不占据空间	动态隐藏元素
`flex`	弹性盒子容器	响应式布局
`grid`	网格容器	复杂二维布局
`table`系列	表格布局	模拟表格结构
`inline-flex`	行内弹性盒子容器	行内弹性布局
`inline-grid`	行内网格容器	行内网格布局
`list-item`	列表项	自定义列表项
`inherit`	继承父元素的`display`值	继承父元素布局行为
`initial`	重置为默认值（通常是`inline`）	恢复默认行为
`unset`	继承或重置为默认值	根据上下文恢复行为

display属性是CSS布局的核心，合理使用可以创建灵活、高效的页面布局。

CSS预处理器优缺点

CSS预处理器通过扩展CSS功能，提升了开发效率和代码可维护性，但也存在一些缺点。以下是常见的CSS预处理器（如Sass、Less、Stylus）的优缺点：

优点

变量支持

优点：允许定义变量存储颜色、字体等值，便于统一管理和修改。

示例：

scss

$primary-color: #3498db;
body {
    background-color: $primary-color;
}

嵌套语法

优点：支持嵌套规则，减少代码重复，提高可读性。

示例：

scss

nav {
    ul {
        margin: 0;
        li {
            display: inline-block;
        }
    }
}

混合（Mixins）

优点：可定义可重用的代码块，减少重复代码。

示例：

scss

@mixin border-radius($radius) {
    border-radius: $radius;
}
.box {
    @include border-radius(10px);
}

函数和运算

优点：支持数学运算和自定义函数，增强样式表的动态性。
示例：
scss
```
.container {
    width: 100% / 3;
}
```

模块化

优点：支持将样式拆分为多个文件，便于管理和维护。
示例：
scss
```
@import 'variables';
@import 'mixins';
```

继承

优点：允许选择器继承其他选择器的样式，减少代码冗余。

示例：

scss

.button {
    padding: 10px;
}
.submit-button {
    @extend .button;
    background-color: green;
}

兼容性

优点：支持自动添加浏览器前缀，提升兼容性。

示例：

scss

.box {
    @include transform(rotate(30deg));
}

缺点

学习成本

缺点：需要学习新的语法和工具，增加学习曲线。

编译步骤

缺点：需要将预处理器代码编译为CSS，增加了构建流程的复杂性。

调试困难

缺点：编译后的CSS可能与源代码不一致，调试时难以定位问题。

性能开销

缺点：编译过程可能增加构建时间，尤其在大项目中。

过度嵌套

缺点：过度使用嵌套可能导致生成的CSS选择器过于复杂，影响性能。

工具依赖

缺点：需要依赖特定的编译工具（如Sass、Less编译器），增加项目配置复杂度。

总结

优点	缺点
变量支持，便于维护	学习成本较高
嵌套语法，提高可读性	需要编译步骤，增加复杂性
混合（Mixins），减少重复代码	调试困难，难以定位问题
函数和运算，增强动态性	编译过程可能增加性能开销
模块化，便于管理	过度嵌套可能导致性能问题
继承，减少代码冗余	依赖特定工具，增加配置复杂度
自动添加浏览器前缀，提升兼容性

CSS预处理器适合中大型项目，能显著提升开发效率和代码质量，但在小型项目或简单场景中可能增加不必要的复杂性。

CSS加载权重

CSS加载权重（优先级）决定了当多个规则冲突时，浏览器应用哪个样式。权重由选择器的类型和组合决定，以下是权重的计算规则：

权重等级

CSS选择器的权重分为四个等级，从高到低依次为：

内联样式：直接在HTML元素的style属性中定义的样式，权重最高。
html
```
<div style="color: red;">内联样式</div>
```
ID选择器：通过#id选择器定义的样式。
css
```
#myId {
    color: blue;
}
```
类选择器、属性选择器、伪类选择器：包括.class、[type="text"]、:hover等。
css
```
.myClass {
    color: green;
}
```
元素选择器、伪元素选择器：如div、p、::before等。
css
```
div {
    color: black;
}
```

权重计算

权重由四部分组成：(内联样式, ID选择器, 类/属性/伪类选择器, 元素/伪元素选择器)，具体计算方式如下：

内联样式：(1, 0, 0, 0)
ID选择器：(0, 1, 0, 0)
类/属性/伪类选择器：(0, 0, 1, 0)
元素/伪元素选择器：(0, 0, 0, 1)

权重值从左到右比较，数值大的优先级高。例如：

css

#myId .myClass div {
    color: red; /* 权重：(0, 1, 1, 1) */
}
.myClass div {
    color: blue; /* 权重：(0, 0, 1, 1) */
}
div {
    color: green; /* 权重：(0, 0, 0, 1) */
}

最终应用的是#myId .myClass div的样式。

!important规则

!important可以提升样式的优先级，覆盖其他规则。

css

div {
    color: red !important; /* 优先级最高 */
}

继承样式

继承的样式权重最低，低于任何直接应用的样式。

css

body {
    color: blue; /* 继承样式 */
}
div {
    color: red; /* 直接样式 */
}

div内的文本颜色为红色。

相同权重规则

当权重相同时，后定义的样式优先。

css

div {
    color: red;
}
div {
    color: blue; /* 最终应用 */
}

总结

CSS加载权重由选择器类型决定，优先级从高到低为：内联样式 > ID选择器 > 类/属性/伪类选择器 > 元素/伪元素选择器。!important可提升优先级，相同权重时后定义的样式优先。

CSS position属性值

CSS的position属性用于定义元素的定位方式，常见的属性值包括：

static

默认值：元素按正常文档流排列，不受top、right、bottom、left和z-index影响。
示例：
css
```
div {
    position: static;
}
```

relative

相对定位：元素相对于其正常位置进行偏移，不影响其他元素布局。

示例：

css

div {
    position: relative;
    top: 10px;
    left: 20px;
}

absolute

绝对定位：元素相对于最近的已定位祖先元素（非static）进行定位，若无则相对于初始包含块。

示例：

css

div {
    position: absolute;
    top: 50px;
    left: 100px;
}

fixed

固定定位：元素相对于视口定位，滚动页面时位置不变。

示例：

css

div {
    position: fixed;
    top: 0;
    right: 0;
}

sticky

粘性定位：元素在滚动到特定位置时变为固定定位，结合relative和fixed特性。

示例：

css

div {
    position: sticky;
    top: 10px;
}

inherit

继承：元素继承父元素的position值。
示例：
css
```
div {
    position: inherit;
}
```

initial

初始值：将position属性重置为默认值static。
示例：
css
```
div {
    position: initial;
}
```

unset

未设置：若属性可继承，则继承父元素值，否则重置为initial。
示例：
css
```
div {
    position: unset;
}
```

总结

position属性用于控制元素的定位方式，常用值包括static、relative、absolute、fixed和sticky，分别适用于不同的布局需求。

为什么要初始化CSS样式

初始化CSS样式的主要原因如下：

统一浏览器默认样式

不同浏览器对HTML元素的默认样式（如边距、字体大小等）存在差异，初始化CSS可以确保网页在各浏览器中表现一致。

提升开发效率

通过初始化样式，开发者可以从一个统一的基准开始，避免反复调整默认样式，减少代码量，提升开发效率。

增强可维护性

统一的样式基准使代码更易维护，尤其在团队协作中，开发者能更快理解并修改样式。

避免样式冲突

初始化样式可以防止默认样式与自定义样式冲突，确保自定义样式按预期生效。

优化用户体验

通过初始化样式，确保网页在不同设备和浏览器上呈现一致，提升用户体验。

常见的初始化方法

Normalize.css：保留有用的默认样式，修复浏览器间的差异。
Reset.css：彻底重置所有默认样式，从头开始定义。
自定义初始化：根据项目需求手动设置初始样式。

示例代码

css

/* Reset.css 示例 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Normalize.css 示例 */
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
}

总结

初始化CSS样式有助于统一浏览器表现、提升开发效率、增强可维护性、避免样式冲突，并优化用户体验。

CSS动画如何在动作结束时保持该状态不变

在 CSS 动画中，默认情况下，动画结束后元素会恢复到初始状态。如果希望动画结束后保持最终状态不变，可以使用 animation-fill-mode 属性。

使用 animation-fill-mode: forwards

animation-fill-mode: forwards 可以让元素在动画结束后保持最后一帧的状态。

示例：

css

.box {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: move 2s forwards; /* 动画结束后保持最终状态 */
}

@keyframes move {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(200px);
    }
}

效果：动画结束后，元素会停留在 translateX(200px) 的位置。

animation-fill-mode 的其他值

none（默认）：动画结束后，元素恢复到初始状态。
backwards：在动画开始前，元素应用第一帧的状态。
both：结合 forwards 和 backwards，动画开始前应用第一帧状态，结束后保持最后一帧状态。

示例：

css

.box {
    animation: move 2s both; /* 结合 forwards 和 backwards */
}

结合 animation-delay 使用

如果动画有延迟（animation-delay），animation-fill-mode: backwards 可以在延迟期间应用第一帧状态。

示例：

css

.box {
    animation: move 2s 1s backwards; /* 延迟 1 秒，期间应用第一帧状态 */
}

@keyframes move {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

使用 JavaScript 动态添加类

如果需要更灵活地控制动画状态，可以通过 JavaScript 动态添加类来实现。

示例：

html

<div class="box"></div>
<button onclick="addClass()">保持状态</button>

css

.box {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: transform 2s;
}

.box.final-state {
    transform: translateX(200px);
}

javascript

function addClass() {
    document.querySelector('.box').classList.add('final-state');
}

使用 @keyframes 定义最终状态

在 @keyframes 中明确定义最终状态，确保动画结束后元素保持该状态。

示例：

css

@keyframes move {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(200px);
    }
}

注意事项

性能优化：使用 animation-fill-mode: forwards 时，浏览器会保留动画的最后一帧，可能会增加内存占用。
兼容性：animation-fill-mode 在现代浏览器中支持良好，但在旧版本浏览器（如 IE9 及以下）中不支持。
结合其他属性：可以结合 animation-iteration-count（动画次数）和 animation-direction（动画方向）实现更复杂的效果。

总结

方法	适用场景	注意事项
`animation-fill-mode: forwards`	动画结束后保持最终状态	现代浏览器支持良好
`animation-fill-mode: both`	结合`forwards` 和 `backwards`	适用于有延迟的动画
JavaScript 动态添加类	需要灵活控制动画状态时	适合复杂交互场景
`@keyframes` 定义最终状态	明确动画的最终状态	适用于简单动画

根据具体需求选择合适的方法，可以让 CSS 动画在动作结束时保持状态不变。

CSS3相关2.0 ​

CSS Sprite ​

DIV+CSS实现3栏布局（左右固定200px中间自适应） ​

CSS哪些样式可以继承，哪些不可以 ​

CSS有哪些基本选择器，权重是如何表示的 ​

CSS如何隐藏网页内容只让内容在屏幕阅读器上使用 ​

CSS基本语句构成 ​

浏览器如何判断元素是否匹配某个CSS选择器 ​

写高效CSS需要考虑到哪些问题 ​

如何优化网页的打印样式 ​

移动端CSS布局 ​

CSS display ​

CSS预处理器优缺点 ​

CSS加载权重 ​

CSS position属性值 ​

为什么要初始化CSS样式 ​

CSS动画如何在动作结束时保持该状态不变 ​

CSS3相关2.0

CSS Sprite

DIV+CSS实现3栏布局（左右固定200px中间自适应）

CSS哪些样式可以继承，哪些不可以

CSS有哪些基本选择器，权重是如何表示的

CSS如何隐藏网页内容只让内容在屏幕阅读器上使用

CSS基本语句构成

浏览器如何判断元素是否匹配某个CSS选择器

写高效CSS需要考虑到哪些问题

如何优化网页的打印样式

移动端CSS布局

CSS display

CSS预处理器优缺点

CSS加载权重

CSS position属性值

为什么要初始化CSS样式

CSS动画如何在动作结束时保持该状态不变