《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 关键字。