CSS 新世界 2021

摘要

好的，我将根据您提供的文本，总结内容、提取核心信息，并给出问答。

CSS 新世界

总结：

本书是一本关于 CSS 的进阶读物，重点讲解了 CSS3 及其之后版本的新特性，涵盖布局、视觉表现、设备适配以及开发者自定义能力等方面，旨在帮助前端开发者突破 CSS 技能瓶颈。

你能获得：

掌握 CSS 新特性的应用技巧，提升页面布局和视觉表现力。
了解 CSS 发展趋势和底层原理，为应对未来 Web 开发挑战做好准备。
掌握各种设备适配的技巧，提供更优质的用户体验。

核心内容：

1. 尺寸体系：

解释： CSS 新世界对尺寸体系进行了明确定义，区分了内在尺寸（由内容决定）和外在尺寸（由上下文决定）。尺寸相关关键字包括
```
fit-content
```
、
```
fill-available
```
、
```
min-content
```
和
```
max-content
```
。
详细解释：
- ```
fit-content
```
  ：使元素尺寸适应内容，类似 "shrink-to-fit"。
- ```
fill-available
```
  ：使元素填充可用空间。
- ```
min-content
```
  ：元素采用其内容的首选最小宽度。
- ```
max-content
```
  ：元素采用使其内容在一行上显示的最大宽度。
行动建议： 根据实际场景选择合适的尺寸关键字，掌握其特性可以更灵活地控制元素尺寸。

2. CSS 逻辑属性：

解释： 逻辑属性是与文档流方向相关的属性，如
```
margin-inline-start
```
、
```
margin-block-end
```
等，它们可以根据文档流方向自动调整表现。
详细解释：
- 逻辑属性配合
```
writing-mode
```
  和
```
direction
```
  属性使用，使样式更具灵活性。
- 逻辑属性适用于对称布局，可以简化代码，提高维护性。
举例： 在模拟微信对话布局中，可以只设置一侧的布局，另一侧通过
```
direction: rtl
```
反转即可。

3. 边框增强：

解释： CSS 在边框方面进行了增强，尤其是
```
border-image
```
属性，允许使用图像来创建更复杂的边框效果。
详细解释：
- ```
border-image
```
  属性通过九宫格方法将图像应用于边框，可以实现各种独特的边框样式。
- 此外，还可以使用
```
border-image
```
  属性与渐变结合，创建渐变边框。

4. position: sticky 声明

解释：
```
position: sticky
```
属性使元素在滚动到特定位置时固定，实现粘性定位效果。
详细解释：
- 元素在滚动到阈值位置前，表现为
```
relative
```
  定位，在达到阈值后，则固定在指定位置。
- 可以创建层次滚动效果，例如导航栏在滚动到顶部时保持固定。

5. 渐进增强：

解释： 利用属性值的语法差异、伪类或伪元素以及
```
@supports
```
规则等技巧，针对不同浏览器进行兼容性处理，实现 CSS 新特性的渐进增强。
详细解释：
- 使用新属性值时，老版本浏览器会忽略无法识别的语法，保证基本功能可用。
- ```
@supports
```
  规则允许根据浏览器对特定 CSS 特性的支持情况应用不同的样式。

6. 全局关键字:

解释： 使用
```
inherit
```
、
```
initial
```
、
```
unset
```
和
```
revert
```
可以更方便地控制 CSS 属性的继承和重置。
详细解释：
- ```
inherit
```
  ：强制属性从父元素继承值。
- ```
initial
```
  ：将属性重置为其初始值。
- ```
unset
```
  ：如果属性具有继承性，则设置为
```
inherit
```
  ，否则设置为
```
initial
```
  。
- ```
revert
```
  ：将属性恢复为浏览器默认样式。

7. all 属性:

解释：通过
```
all
```
属性能够便捷的一次性重置除个别属性外的样式。
详细解释：
- 通过使用
```
all: unset
```
  让元素表现和元素一致。
- 通过使用
```
all: revert
```
  可以让元素恢复成浏览器默认的样式。
- 受影响的样式包括 unicode-bidi 、 direction 以及 CSS 自定义属性

8. text-decoration 属性:

解释：在 CSS3 中，
```
text-decoration
```
属性的功能进行了扩展，成为了
```
text-decoration-line
```
、
```
text-decoration-style
```
和
```
text-decoration-color
```
的简写属性。
详细解释：
- 了解
```
text-decoration-line
```
  的多种属性，例如：underline(下划线)、overline(上划线)、line-through(中划线)
- 了解了 text-decoration 属性之后，如果文本想设置为波浪线，则只需要
```
text-decoration-style: wavy
```
  即可。

9. CSS 字体新特性：

解释：
```
font-family
```
、
```
@font-face
```
等CSS属性可以实现更细致的字体控制和加载管理。
详细解释：
- 可以使用
```
system-ui
```
  等全新的通用字体族。
- 使用 local() 函数与系统字体的调用
- 对 woff/woff2 字体等进行处理，从而提供更好的用户体验。
- 通过 font-display 属性与自定义字体的加载渲染，以优化加载体验。

10. Flexbox 布局增强

解释： Flexbox 布局是非常重要的内容，能够轻松的控制子项的顺序和排列，实现多种多样的对齐方案。
详细解释：
- 需要熟练掌握 flex-direction 属性，能够控制整体布局方向，以及 flex-wrap 属性。
- CSS 全新的对齐特性综述，能够灵活地对齐内容。
- 深入理解 flex 属性，学习最后一行不对齐的处理。

11. Grid 布局增强

解释： Grid 布局是非常重要的内容，能够轻松的对元素进行二维排版，并实现很多过去无法做到的事情。
详细解释：
- 可以灵活运用 grid-template-columns 和 grid-template-rows 属性，了解网格布局专用单位 fr 。
- 详细介绍 minmax() 和 fit-content() 函数，缩写属性 grid-template 。
- 深入了解 grid-auto-flow 属性和间隙设置属性 column-gap 和 row-gap 。

12. Houdini 新的未来

解释： CSS Houdini 通过开放底层的 API 给用户，从而使用户能够自定 CSS 属性，创建全新的布局方式。
详细解释：
- 了解 CSS Paint API ，CSS 变量让 CSS Paint API 如虎添翼
- 了解 CSS Properties & Values API ，CSS Parser API 。
- 详细了解 CSS Layout API 和 CSS Typed OM 。

问答

Q: 什么是 CSS 逻辑属性，有哪些使用场景？

A: CSS 逻辑属性是与文档流方向相关的属性，比如

margin-inline-start

等。它们的使用场景主要是在需要适配不同文档流方向的布局中，例如在支持 RTL 语言的网站上。

Q:

fit-content

、

stretch

、

min-content

和

max-content

这几个关键字有什么区别，应该如何选择？

A: 它们都用来控制元素尺寸：

```
fit-content
```
：元素尺寸适应内容，类似 "shrink-to-fit"。
```
stretch
```
：元素填充可用空间。
```
min-content
```
：元素采用其内容的首选最小宽度。
```
max-content
```
：元素采用使其内容在一行上显示的最大宽度。选择哪个关键字取决于你希望元素如何根据其内容和可用空间调整大小。

Q: 弹性布局最后一行不对齐应该如何处理？

A: 可以采用如下方案进行处理：

在 flex 容器中，每一行列数是固定的，则使用
```
margin
```
属性控制间距，实现对齐。
使用伪元素在列表的末尾创建一个 flex 子项，并设置
```
flex: auto
```
或
```
flex: 1
```
，将后续的元素推到下一行。
HTML 不能调整的时候，使用网格布局进行处理。

Q: 如何保证 Web 中的自定义字体始终清晰，不同设备的分辨率不一致，是否会有影响？

A: 使用合适的

text-rendering

属性和

font-smooth

属性。在低分辨率设备上，也可以考虑使用特定的字体或调整字号来优化显示效果。同时要使用可变字体，适配各种设备。

Q: 如何在 CSS 中实现类似于 if...else 的逻辑判断？

A: 可以借助 CSS 变量的边界特性实现，就是使用 initial 关键字。

思维导图

目标读者

本书的目标读者是具有一定 CSS 基础，希望深入了解 CSS3 及其之后版本新特性的前端开发者。适合那些希望突破 CSS 技能瓶颈，掌握更多高级技巧和解决实际问题的思路的开发者。本书也适合对 CSS 布局、视觉表现和用户体验有较高要求的开发者，以及希望了解 CSS 未来发展趋势的技术爱好者。

作者背景

张鑫旭是一位经验丰富的前端工程师，拥有超过十年的从业经验，专注于 CSS 和 Web 前端技术的研究与实践。他不仅是一位资深开发者，还是一位活跃的技术博主和作家，致力于分享前端知识和经验，帮助开发者提升技能。张鑫旭对 CSS 有着深刻的理解和独到的见解，擅长将复杂的技术问题以通俗易懂的方式进行讲解，深受广大前端开发者的喜爱。他的作品不仅注重技术细节，更强调实际应用和解决问题的思路，为前端开发者提供了宝贵的参考。

历史背景

在 CSS2.1 时代，Web 页面主要用于展示图文内容，对复杂布局的需求不高。随着 Ajax 技术的兴起和 Web 应用的日益复杂，传统的 CSS 已经无法满足需求。CSS3 及其之后版本的新特性应运而生，旨在构建更加丰富的 Web 应用程序，并支持更复杂、更具弹性的布局、更丰富的视觉表现、更多样的浏览设备以及开发者 CSS 自定义能力。

摘要

CSS 新世界

总结：

你能获得：

核心内容：

1. 尺寸体系：

2. CSS 逻辑属性：

3. 边框增强：

4. position: sticky 声明

5. 渐进增强：

6. 全局关键字:

7. all 属性:

8. text-decoration 属性:

9. CSS 字体新特性：

10. Flexbox 布局增强

11. Grid 布局增强

12. Houdini 新的未来

问答

Q: 什么是 CSS 逻辑属性，有哪些使用场景？

Q:
fit-content
、
stretch
、
min-content
和
max-content
这几个关键字有什么区别，应该如何选择？

Q: 弹性布局最后一行不对齐应该如何处理？

Q: 如何保证 Web 中的自定义字体始终清晰，不同设备的分辨率不一致，是否会有影响？

Q: 如何在 CSS 中实现类似于 if...else 的逻辑判断？

思维导图

目标读者

作者背景

历史背景

章节摘要

音频

CSS 新世界 2021

摘要

CSS 新世界

总结：

你能获得：

核心内容：

1. 尺寸体系：

2. CSS 逻辑属性：

3. 边框增强：

4. position: sticky 声明

5. 渐进增强：

6. 全局关键字:

7. all 属性:

8. text-decoration 属性:

9. CSS 字体新特性：

10. Flexbox 布局增强

11. Grid 布局增强

12. Houdini 新的未来

问答

Q: 什么是 CSS 逻辑属性，有哪些使用场景？

Q: fit-content、stretch、min-content 和 max-content 这几个关键字有什么区别，应该如何选择？

Q: 弹性布局最后一行不对齐应该如何处理？

Q: 如何保证 Web 中的自定义字体始终清晰，不同设备的分辨率不一致，是否会有影响？

Q: 如何在 CSS 中实现类似于 if...else 的逻辑判断？

思维导图

目标读者

作者背景

历史背景

章节摘要

音频

Q:
fit-content
、
stretch
、
min-content
和
max-content
这几个关键字有什么区别，应该如何选择？