CSS - freeCodeCamp.org

如何使用 CSS 使文本垂直居中

Miya Liu — Mon, 09 Sep 2024 10:19:00 +0000

原文： How to Center Text Vertically with CSS

如果你在 div 中包含一些文本，而没有其他内容，那么 div 的高度将与文本的高度相匹配。但是，假设你有一些文本和一张图片，文本将在 div 的底部对齐，这通常不是你想要的。

在本文中，你将学习几种将文字在 div 或其他元素中垂直居中的方法。

如何使用 Line Height 使文本居中

这种方法有一定的局限性，但如果你使用 height 属性将元素设置为固定高度，这种方法还是很有用的。

line-height 属性决定浏览器渲染文本时方框的高度。默认情况下，该值被设置为略大于 1，以实现合适的文本行间距。

如果将元素的 height 和 line-height 设置为相同值，文本将垂直居中：

.my-element {
  height: 3rem;
  line-height: 3rem;
}

使用 line-height 垂直居中文本

不过，使用这种方法有一个重要的注意事项。只有当文本可以在一行中显示时，这种方法才有效。

如果文本确实换行了，你会看到第一行垂直居中。因为你设置的 line-height 与元素的 height 相同，所以换行的文本行现在会溢出元素。

换行的文本溢出容器

如果这听起来太死板，请继续往下看。接下来，你将看到如何使用 Flexbox 将文本和元素内的其他内容垂直居中。

如何使用 Flexbox 将文本居中

更好、更通用的解决方案是使用 flexbox 布局，并将对齐项设置为居中。

使用 Flexbox（flex 容器）的元素可以按行或列布局元素（flex 项）。Flexbox 布局有两条假想线贯穿其中。第一条是主轴，项目将沿着它放置。对于 flexbox row，主轴是水平轴。

横轴垂直于主轴。你可以使用横轴来定义 flex 容器内元素的垂直对齐方式。

水平 flexbox 布局中的主轴和横轴

以下是应用 flexbox 布局并将文本垂直居中所需的 CSS：

.my-element {
    /* Use a flexbox layout */
    display: flex;

    /* Make a horizontal flexbox (the default) */
    flex-direction: row;

    /* The important part: vertically center the items */
    align-items: center;
}

这将创建一个水平的 flexbox 布局（flex-direction: row 并非严格要求，因为它是默认设置）。align-items 属性决定了项目沿横轴或纵轴的对齐方式。有几种不同的值可以使用，这里可以使用 center 将文本垂直居中。

使用 align-items: center 对齐文本

这样做效果很好，甚至可以处理多行文本。如果元素内有其他内容，如图片，所有内容都将垂直对齐。

文本与其他内容垂直对齐

如何使用 CSS Grid 使文本居中

你也可以使用 CSS grid 将内容垂直居中。

对于包含要居中的文本的单个 div，你可以将其转化为一行一列的网格布局。

.my-element {
    display: grid;
    align-items: center;
}

在网格布局中，align-items 属性指定了单元格内内容沿列（垂直）轴的对齐方式。这将垂直对齐 div 元素中的文本。

使用 1x1 网格布局使文本垂直居中

如果包含文本的元素已经是网格布局的一部分，可以将 align-items: center 应用于整个网格，或者如果只想控制一个网格单元格的垂直对齐方式，可以使用 align-self: center。

总结

现在你知道如何将文本垂直居中了吧。下次再看到关于将 div 居中的推文时，你就可以用新学到的 CSS 知识回复了！

媒体查询与容器查询——该使用哪个以及何时使用？

Miya Liu — Wed, 17 Jul 2024 04:02:14 +0000

原文： Media Queries vs Container Queries – Which Should You Use and When?

随着 Web 的发展，不断有新工具和新理念问世，旨在让我们的 Web 开发工作变得更加轻松。这意味着我们必须选择是坚持旧的方法还是完全弃用它们转而使用新工具。但这是否总需要一种非此即彼的解决方案呢？

在这种情况下，理想的做法是了解两种概念——比较它们的优缺点，然后决定它们最合适的应用场景。本文将对 CSS 媒体查询和容器查询做这样的探讨。

响应式和内在网页设计

在 2010 年以前，Web 开发人员可以轻松创建主要在桌面上运行的网站。这种情况直到 Ethan Marcotte 提出了响应式 Web 设计（RWD）的概念才有所改变。根据 MDN 的定义，响应式 Web 设计是一种面向多设备 Web 设计方式。这促使了媒体查询作为 RWD 的一个组成部分被采用。

但最近出现了一种趋势，即 Jen Simmons 定义的内在网页设计——创建上下文感知组件的需求。容器查询正是实现这一目标的工具。

什么是媒体查询

媒体查询是一种基于满足特定条件来应用指定样式的规则。它们通常用于确保网站在各种设备上具有响应性，通过查询视口宽度来实现。

媒体查询的特点是一个 @media 规则，后跟一个括号中的条件及大括号内的表达式，如果满足条件则将应用该表达式。因此，如果我们想根据设备的视口宽度更改 div 的背景色，可以这样操作：

/* 移动设备 */
@media (max-width: 480px) {
  .mysite {
    background-color: red;
  }
}

在上述示例中，我们要求当视口宽度达到最大 480px 时，将类名为 mysite 的

的背景色设置为红色。

提示：max-width 用于假设一个桌面优先的设计，并在向下调整时定位更小的设备。如果是移动优先的设计，我们会使用 min-width 来定位更大的屏幕。

什么是容器查询

容器查询是一种基于父容器的大小来应用指定样式的规则。它们为 Web 开发者们长期以来希望能响应页面内个别容器变化的需求提供了解决方案，而不仅仅是整个视口的变化。

.header {
   container: mysite / inline-size;
}

@container mysite (min-width: 600px) {
   .maincard {
	   grid-template-column: 1fr 1fr;
    }
   .item {
       background-color: green;
    }
}

如上代码所示，我们首先定义了一个容器，我们希望对其子元素做出改变。在我们的例子中，我们希望对 header 容器内的 class 为 item 的元素进行更改。你可以通过给容器命名（可选）和指定类型来做到这一点。

接下来，使用 @container 规则，我们检查条件并在满足条件时应用一些样式。对于最小宽度 600px，我们希望背景色为绿色并设置两个网格列。

提示：你不直接定义一个容器以对该容器本身进行更改，而是对其子元素进行更改。这意味着如果我们想对 header 容器本身进行更改，我们必须将它嵌套在另一个容器中，例如容器 A，并查询 A 以影响其子元素——header。

媒体查询和容器查询比较

现在，我们了解了两者的工作原理，让我们看看它们在实际中的表现。下面的 CodePen 示例展示了一个四个元素的布局。前两个使用容器查询设置样式，而后两个使用媒体查询设置样式。你可以调整视口大小，查看元素如何响应。

媒体查询和容器查询 CodePen 示例：项目灵感来自 Miriam Suzanne。

参见 CodePen 上 Ophy Boamah (@ophyboamah) 的 MQ vs CQ (来源 MS)。

媒体查询和容器查询的主要区别

基于视口 vs. 基于容器

媒体查询基于视口（整个浏览器窗口）的大小应用样式。这意味着布局根据整体屏幕大小进行调整，使其适合在不同设备（如手机、平板电脑和桌面）上进行设计调整。

而容器查询基于包含它们的容器元素的大小应用样式。这使得单个组件可以根据自身大小，而不是视口大小来调整其外观，使它们在网页的不同部分中具有高度的灵活性和可重用性。

模块化和灵活性

由于媒体查询依赖于视口大小，它们在创建真正模块化的组件时可能不太有效。调整页面某个部分的样式可能会无意中影响其他部分，尤其是在复杂的布局中。此外，在组件需要在较大布局中独立适应的情况下，它们可能会显得不足。这会导致 CSS 变得难以维护。

相比之下，容器查询通过允许基于容器大小定义样式来促进模块化和灵活性。这意味着你可以创建自包含、可适应的组件，并且可以在网站的不同部分重复使用而不会导致意外变化，从而增强了它们的可重用性。

这使得设计更加自适应，组件可以调整自己的布局和外观，这在现代、基于组件的设计系统中非常有用。

复杂性和维护

在大型项目中，管理大量媒体查询会变得很麻烦。随着断点和特殊情况的增加，CSS 会变得复杂且难以维护。随着时间的推移，这可能会导致代码库膨胀且管理起来困难。

容器查询可以简化大型项目中 CSS 的维护。通过保持样式遵从组件和上下文，CSS 变得更加有序和模块化。这减少了管理全局断点的复杂性，使其更易于维护，从而生成一个更有组织的代码库。

你应该使用哪个以及什么时候使用

媒体查询 vs 容器查询（图片来源：web.dev）

我们在前几节讨论的内容旨在帮助你做出明智的决定。在了解了这两个概念的比较和对比之后，现在考虑以下因素：

理解和舒适度

你对每个概念的理解如何？容器查询相对较新，但如果你花时间学习和实验，就像媒体查询一样，其学习曲线并不令人望而生畏。所以在生产中使用你理解并且更熟悉的那个，会让你的生活更轻松。

项目需求和复杂性

你正在使用的设计方法是什么，你的项目有多复杂？因为有时候你项目的设计方法会决定哪一种最适合你的需求。而且，项目越复杂，维护代码就越难，你需要使用那些你可以管理的。

未来趋势和协作

响应式设计的未来看起来越来越内在化。我们正在逐渐转向基于组件内容的响应性变化，容器查询在这里表现最佳。

但媒体查询似乎在短时间内不会消失，所以你可以一起使用它们，以实现跨多个设备的完美响应。

总结

容器查询允许在 CSS 中创建可重用组件的潜力令人兴奋——但它可能还没有准备好完全取代媒体查询。

目前，我们最好的选择是一起使用它们，并根据实际情况来选择其中一个。通过进一步实验以了解两种方法各自的优缺点，可以确保做出正确的决定。

这里有一些有用的资源：

CSS 过渡与动画手册——如何用 CSS 为元素制作动画

Mingxun Liu — Thu, 20 Jun 2024 10:31:22 +0000

原文： CSS Transition vs Animation Handbook – How to Animate Elements in CSS

CSS 过渡（Transition）和动画（Animation）为更改元素的样式提供了平滑、渐进的方式，但是它们的工作方式有些不同。

这是它们之间的主要区别：

CSS 过渡	CSS 动画
创建一个从一个 CSS 值到另一个值平滑的过渡。你需要触发器去运行 CSS 过渡。例如，你可以使用 `:hover` 伪类在用户指针悬停在元素上时运行过渡。过渡只有两个状态：初始态和最终态。你不能创建中间步骤。只运行一次。最适合用在基础样式的更改。	从一个 CSS 关键帧到另一个关键帧的样式变更动画。 CSS 动画不需要触发器。动画允许你创建多种状态。你可以运行多次动画迭代——甚至是无数次。最适合使用在动态样式的更改。

本手册通过一些例子去解释两种动画技术，以便你理解它们之间的异同。

什么是 CSS 过渡？

CSS 过渡提供了一种平滑、渐进的方式去更改指定的 CSS 属性值。

这样，CSS 过渡会使变化在指定时间段内平滑地发生，而不是让浏览器去立即更改某个属性值。

例如，假设你希望当悬停时更改一个元素的尺寸。在这个例子中，你有两个选项：

不使用 CSS 过渡实现更改。
使用 CSS 过渡从元素的初始尺寸平滑地过渡到它的新状态。

让我们看些这两个选项的例子。

不使用 CSS 过渡如何在鼠标悬停时更改图片的尺寸

img {
  width: 40%;
}

img:hover {
  width: 100%;
}

试着编辑它

因为我们没有使用 CSS 过渡，上面的代码立即将图片的尺寸从初始宽度（40%）更改为新的宽度（100%）。

使用 CSS 过渡，你可以获得更愉悦的体验。让我们看看下面的示例。

使用 CSS 过渡如何在鼠标悬停时更改图片的尺寸

img {
  width: 40%;
  transition: width 3s ease-out 0.4s;
}

img:hover {
  width: 100%;
}

试着编辑它

从 width: 40% 到 width: 100%，transition 属性在图片上应用了一个平滑、渐进的过渡。

CSS 过渡属性的种类

我们有两种 CSS 过渡属性：

必需过渡属性
可选过渡属性

让我们来讨论一下这两者。

什么是必需 CSS 过渡属性

创建 CSS 过渡的两个必需属性：

transition-property
transition-duration

什么是 `transition-property`？

CSS 的 transition-property 指定你希望从初始态过渡到新状态的 CSS 属性。

什么是 `transition-duration` ？

CSS 的 transition-duration 属性定义了浏览器完成所选择元素过渡的时间长度。换句话说，transition-duration 设置从开始到结束所需的全部时间。

注意以下几点：

transition-duration 属性只接受毫秒（ms）或秒（s）的时间形式。
0 秒（0s）是 transition-duration 的默认值。因此，如果你不定义 transition-duration 属性，将不会有过渡事件发生。
transition-duration 只接受 0 或正数值。如果你提供其他任何值浏览器将忽略它。

必需 CSS 过渡属性的示例

下面是两个必需 CSS 过渡属性的一些示例。

如何在 3 秒内完成元素宽度的过渡

img {
  width: 40%;
  transition-property: width;
  transition-duration: 3s;
}

img:hover {
  width: 100%;
}

试着编辑它

在上面片段中我们做了什么：

transition-property 告诉浏览器把 img 的 width 从它的初始值（40%）过渡到它的新状态（100%）。
使用 transition-duration 属性定义过渡从开始到结束持续 3 秒（3s）的时间。

因此，浏览器将在 3 秒（3s）内从老值到新值间平滑地过渡，而不是立即把图片从初始宽度（40%）更改到新尺寸（100%）。

如何在 5 秒内完成字体尺寸的过渡

p {
  font-size: 1rem;
  transition-property: font-size;
  transition-duration: 5s;
}

p:hover {
  font-size: 7rem;
}

试着编辑它

在上面片段中我们做了什么：

transition-property 告知浏览器过渡 p 元素的 font-size。
使用 transition-duration 属性定义过渡从开始到结束持续 5 秒（5s）的时间。

因此，浏览器将在 5 秒（5s）内从老值到新值间平滑地过渡，而不是立即把 p 的初始字体尺寸（1rem）更改到新尺寸（7rem）。

现在让我们讨论一下可选 CSS 过渡属性。

什么是可选 CSS 过渡属性

这是两个可选 CSS 过渡属性：

transition-timing-function
transition-delay

什么是 `transition-timing-function`？

CSS 的 transition-timing-function 属性定义了所选元素实现过渡的时机（速度）。

换句话说，transition-timing-function 指定了在持续时间内的不同时间间隔实现过渡的速度。

transition-timing-function 属性接受的值如下：

ease：开始时过渡缓慢，然后加快速度，并缓慢结束。ease 是属性 transition-timing-function 的默认值。它等价于 cubic-bezier(0.25,0.1,0.25,1)。
ease-in：开始时过渡很慢，随后逐渐增加速度。它等价于 cubic-bezier(0.42,0,1,1)。
ease-out：开始很快，结束时很慢。它等价于 cubic-bezier(0,0,0.58,1)。
ease-in-out：开始和结束很慢。它等价于 cubic-bezier(0.42,0,0.58,1)。
linear：在整个过渡的持续时间内使用一致的速度开始和结束过渡。它等价于 cubic-bezier(0,0,1,1)。
cubic-bezier(p1, p2, p3, p4)：允许你定义三次贝塞尔曲线的值。

什么是 `transition-delay`？

CSS 的 transition-delay 属性定义了浏览器在开始过渡前需要等待多长时间。

注意以下几点：

transition-delay 必须使用毫秒（ms）或秒（s）的形式。
0s 是 transition-delay 的默认值，这会使过渡在浏览器将其应用到 HTML 元素时立即开始。
一个负值会使过渡从指定时间立即开始。举例来说，假设一个元素的 transition-delay 值设为 -3s，过渡将在 3 秒时立即执行。
一个正值会使过渡等待指定的延迟时间后开始。举例来说，假设一个元素的 transition-delay 值设为 3s，这次过渡将延迟 3 秒后开始。

可选 CSS 过渡属性的示例

下面是两个可选 CSS 过渡属性的一些示例。

如何使用 ease-out 速度完成元素宽度的过渡

img {
  width: 40%;
  transition-property: width;
  transition-duration: 3s;
  transition-timing-function: ease-out;
}

img:hover {
  width: 100%;
}

试着编辑它

在上面片段中我们做了什么：

transition-property 告知浏览器过渡 img 元素的宽度。
我们使用 transition-duration 属性定义过渡从开始到结束 3 秒（3s）的持续时间。
我们使用 transition-timing-function 属性快速地开始过渡然后缓慢地结束。

如何使用 linear 速度完成元素宽度的过渡

img {
  width: 40%;
  transition-property: width;
  transition-duration: 3s;
  transition-timing-function: linear;
}

img:hover {
  width: 100%;
}

试着编辑它

在上面片段中我们做了什么：

transition-property 告知浏览器过渡 img 元素的宽度。
我们使用 transition-duration 属性定义过渡从开始到结束 3 秒（3s）的持续时间。
transition-timing-function 属性告诉浏览器将这个元素从初始宽度过渡到新尺寸时，采用恒定的过渡速度。

如何使用 2 秒的延迟完成元素宽度的过渡

img {
  width: 40%;
  transition-property: width;
  transition-duration: 3s;
  transition-timing-function: linear;
  transition-delay: 2s;
}

img:hover {
  width: 100%;
}

试着编辑它

在上面片段中我们做了什么：

transition-property 告知浏览器过渡 img 元素的宽度。
我们使用 transition-duration 属性定义过渡从开始到结束 3 秒（3s）的持续时间。
transition-timing-function 使用一个恒定的速度完成 img 元素宽度的过渡。
我们使用 transition-delay 属性在过渡的开始添加 2 秒（2s）的延迟。

现在，我们了解了 CSS 过渡的属性，我们可以讨论一下它的缩写语法。

CSS 过渡属性的缩写

我们使用 transition 属性作为 transition-property、transition-duration、transition-timing-function 和 transition-delay 属性的缩写。

换句话说，我们不再这样写：

img {
  transition-property: width;
  transition-duration: 3s;
  transition-timing-function: linear;
  transition-delay: 2s;
}

你可以使用 transition 属性替换让你的代码更短，像这样：

img {
  transition: width 3s linear 2s;
}

试着编辑它

这是 transition 属性的语法：

transition:    ;

注意你可以使用 transition 去定义多个 CSS 过渡属性的状态。

看这个例子：

img {
  width: 40%;
  opacity: 0.4;
  transition: width 3s linear, opacity 4s ease-out, transform 5s;
}

img:hover {
  width: 100%;
  opacity: 1;
  transform: rotate(45deg);
}

试着编辑它

上面的片段使用逗号（,）去分隔我们应用在 img 元素上的每个过渡属性。

那么，现在你了解了 CSS 过渡是什么、它如何工作，我们来探讨一些 CSS 动画。

什么是 CSS 动画？

CSS 动画 提供了一个平滑、渐进的方式从一个关键帧到另一个关键帧为元素的样式增加动画。

CSS 动画的组成

CSS 动画由两部分组成：

关键帧
动画属性

什么是 CSS `@keyframes`？

@keyframes 定义了你想要浏览器某关键时刻（帧）平滑地应用在元素上的样式。

CSS `@keyframes` 的语法

CSS at 规则中 @keyframes 由以下组成：

一个 @keyframes 关键字
一个 @keyframes 名字
零个或多个关键帧块
关键帧选择器
关键帧样式声明

看这个插图：

剖析 CSS @keyframes

一个 CSS @keyframes 由一个关键字、一个名字、一个关键帧块组成。

CSS @keyframes 的示例

下面是 CSS @keyframes 的示例

如何定义 `change-color` 的关键帧

@keyframes change-color {
  /* 最初的关键帧 */
  0% {background-color: purple;}
  /* 最后的关键帧 */
  100% {background-color: yellow;}
}

在上面片段中我们做了什么：

我们创建了一个 @keyframes 命名为 change-color。
我们定义了一个关键帧，供浏览器在关联元素的动画处于 0% 持续时间时应用。
我们定义了一个关键帧，供浏览器在关联元素的动画处于 100% 持续时间时应用。

注意：

你可以把你的 @keyframes 按照你希望的随意命名。
0% 等价于关键字 from，100% 等价于关键字 to。也就是说，上面的代码片段等价于下面的：

@keyframes change-color {
  /* 最初的关键帧 */
  from {background-color: purple;} 
  /* 最后的关键帧 */
  to {background-color: yellow;} 
}

一个动画的开始和结束状态（from 和 to）是可选的。
假设你省略了 @keyframes 的开始或结束状态，这种情况下，浏览器将使用元素的现有样式作为起始/结束状态。
!important 在关键帧中无效，浏览器会忽略任何带有 !important 的关键帧声明。

让我们看另一个例子。

如何定义 `shape-image` 的关键帧

@keyframes shape-image {
  0% { width: 40%; border: 5px solid blue;}
  40% { width: 70%; border: 1px solid red; border-radius: 50%;}
  75% { width: 50%; border: 30px solid green;}
  100% { width: 100%; border: 7px solid purple;}
}

在上面片段中我们做了什么：

我们创建了 @keyframes 规则集命名为 shape-image。
我们定义了 4 个关键帧，供浏览器在关联元素的动画处于指定关键时刻时应用。

提示： 在 JavaScript 中使用 CSSKeyframesRule 接口访问 CSS @keyframes。

那么，现在我们知道了 CSS @keyframes 规则集，我们可以讨论另一个 CSS 动画的组成部分了—— animation 属性。

什么是 CSS animation 属性？

CSS animation 属性 告知浏览器你希望应用在指定元素上的动画。

换句话说，CSS animation 描述了动画的属性，例如它的名字、持续时间、方向、迭代次数。

下面是 CSS 动画的 9 种属性：

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-play-state
animation-fill-mode
animation

让我们逐个讨论一下。

什么是 CSS `animation-name` 属性？

CSS animation-name 属性定义了你希望应用在指定元素上的 @keyframes 包含的样式的名字。

看这个例子：

div {
  width: 150px;
  height: 150px;
  animation-name: change-color;
}

@keyframes change-color {
  from {background-color: purple;}
  to {background-color: yellow;}
}

在上面片段中我们做了什么：

animation-name 指定了我们希望应用到 div 元素上的 @keyframes。
我们创建了一个名为 change-color 的 @keyframes 规则集。
我们定义了 div 元素的动画在 0% 和 100% 时两个关键帧给浏览器使用。

提示： 你可以使用关键字 none 不激活动画。

什么是 CSS `animation-duration` 属性？

CSS animation-duration 属性定义了完成一个动画循环的事件。

注意以下几点：

animation-duration 属性只接受毫秒（ms）或秒（s）的时间形式。
animation-duration 值只接受 0 或是整数。否则，浏览器将忽略这条声明。
0 秒（0s）是 animation-duration 的默认值。
假设 0s 是 animation-duration 的值。在这种情况下，浏览器仍将通过触发 animationStart 和 animationEnd 事件来执行动画。但是由 animation-fill-mode 值决定动画是否可见。比如，你设置 animation-fill-mode 为 none，动画则是不可见的。

让我们看一些 animation-duration 属性的例子。

如何在 3 秒内完成更改元素的颜色的动画

div {
  width: 150px;
  height: 150px;
  animation-name: change-color;
  animation-duration: 3s;
}

@keyframes change-color {
  from {background-color: purple;}
  to {background-color: yellow;}
}

试着编辑它

在上面片段中我们做了什么：

animation-name 属性指定了我们希望用在 div 元素上的 @keyframes。
animation-duration 属性设置了动画一个循环的运行时间在 3 秒（3s）内。
我们创建了 change-color 关键帧规则集。
我们定义了 div 元素的动画在 0% 和 100% 时两个关键帧给浏览器使用。

因此，浏览器将创建一个从第一帧到最后持续 3 秒的平滑的 change-color 动画。

如何在 7 秒内完成更改图片边框和宽度的动画

img {
  animation-name: shape-image;
  animation-duration: 7s;
}

@keyframes shape-image {
  0% { width: 40%; border: 5px solid blue;}
  40% { width: 70%; border: 1px solid red; border-radius: 50%;}
  75% { width: 50%; border: 30px solid green;}
  100% { width: 100%; border: 7px solid purple;}
}

试着编辑它

在上面片段中我们做了什么：

animation-name 属性指定了我们希望应用到 img 元素的 @keyframes。
animation-duration 属性设置动画一个循环的运行时长为 7 秒（7s）。
我们创建了 shape-image 的关键帧规则集。
我们定义了四个关键帧，以便浏览器在图像动画达到指定关键时刻时应用。

因此，浏览器将从 shape-image 的第一帧到最后一帧创建一个流畅的 7 秒的动画。

什么是 CSS `animation-timing-function` 属性？

CSS 的 animation-timing-function 属性定义了动画在整个持续时间内的实现时机（速度）。

换句话说，animation-timing-function 属性指定了动画在其持续时间内各个间隔的实现速度。

animation-timing-function 属性接受的值如下：

ease：慢慢地开始动画，然后加速，并慢慢地结束动画。ease 是 animation-timing-function 属性的默认值。它等价于 cubic-bezier(0.25, 0.1, 0.25, 1)。
ease-in：用一个递增的速度慢慢地开始动画。它等价于 cubic-bezier(0.42, 0, 1, 1)。
ease-out：动画开始很快，然后慢慢的结束动画。它等价于 cubic-bezier(0, 0, 0.58, 1)。
ease-in-out：慢慢地开始并慢慢地结束动画。它等价于 cubic-bezier(0.42, 0, 0.58, 1)。
linear：在整个动画持续时间内使用一致的速度开始、结束动画。它等价于 cubic-bezier(0, 0, 1, 1)。
cubic-bezier(p1, p2, p3, p4)：允许你定义三次贝塞尔曲线的值。

然我们看一些 animation-timing-function 属性的例子。

如何使用线性速度完成更改元素宽度的动画

div {
  width: 150px;
  height: 150px;
  background-color: purple;
  animation-name: change-width;
  animation-duration: 7s;
  animation-timing-function: linear;
}

@keyframes change-width {
  from {width: 50px;}
  to {width: 100%;}
}

试着编辑它

在上面片段中我们做了什么：

animation-name 属性制定了我们希望应用到 div 元素的 @keyframes。
animation-duration 属性设置动画一个循环的运行时长为 7 秒（7s）。
linear 函数应用一个一致的速度到 div 元素的动画上。
我们创建一个名为 change-width 关键帧规则集。
我们为浏览器定义了两个关键帧，分别在 div 动画的持续时间为百分之零（0%）和百分之一百（100%）时应用。

因此，浏览器将从 change-width 的第一帧到最后一帧创建一个流畅的 7 秒的动画。

让我们看另一个例子。

如何使用 ease-in-out 和线性速度完成更改元素宽度的动画

div {
  width: 150px;
  height: 150px;
  color: white;
  animation-name: change-width;
  animation-duration: 7s;
}

.first-div {
  background-color: purple;
  animation-timing-function: ease-in-out;
}

.second-div {
  background-color: orange;
  animation-timing-function: linear;
}

@keyframes change-width {
  from {width: 50px;}
  to {width: 100%;}
}

试着编辑它

在上面片段中我们做了什么：

animation-name 属性制定了我们希望应用到 div 元素的 @keyframes。
animation-duration 属性设置动画一个循环的运行时长为 7 秒（7s）。
我们使用 ease-in-out 函数在 first-div 上应用一个慢慢开始并慢慢结束的动画。
linear 函数在 second-div 上用一个一致的速度的动画。
我们创建了名为 change-width 的关键帧规则集。
我们为浏览器定义了两个关键帧，分别在 div 动画的持续时间为百分之零（0%）和百分之一百（100%）时应用。

因此，浏览器将从 change-width 的第一帧到最后一帧创建一个流畅的 7 秒的动画。

什么是 CSS `animation-delay` 属性？

CSS 的 animation-delay 属性定义了浏览器在开始动画之前需要等待多长时间。

换句话说，使用 animation-delay 去指定动画是应该立即开始、从指定时间开始、还是稍后（一段延迟之后）开始。

注意以下几点：

animation-delay 属性必须是毫秒（ms）或是秒（s）作为单位。
0s 是 animation-delay 的默认值，这会使动画在浏览器将其应用到 HTML 元素时立即开始。
一个负值会使动画从指定时间立即开始。举例来说，假设一个元素的 animation-delay 值设为 -3s，动画将在 3 秒时立即开始。
一个正值会使动画等待指定时间过后开始。举例来说，假设一个元素的 animation-delay 值设为 3s，这次动画将延迟 3 秒后开始。

让我们看一些 animation-delay 属性的例子。

如何 4 秒延迟后完成更改元素宽度的动画

div {
  width: 150px;
  height: 150px;
  color: white;
  animation-name: change-width;
  animation-duration: 7s;
}

.first-div {
  background-color: purple;
  animation-timing-function: ease-in-out;
}

.second-div {
  background-color: orange;
  animation-timing-function: linear;
  animation-delay: 4s;
}

@keyframes change-width {
  from {width: 50px;}
  to {width: 100%;}
}

试着编辑它

在上面片段中我们做了什么：

animation-name 属性制定了我们希望应用到 div 元素的 @keyframes。
animation-duration 属性设置动画一个循环的运行时长为 7 秒（7s）。
我们使用 ease-in-out 函数在 first-div 上应用一个慢慢开始并慢慢结束的动画。
linear 函数在 second-div 上用一个一致的速度的动画。
animation-delay 属性在开始 second-div 的动画时应用了一个 4 秒（4s）的延迟。
我们创建了名为 change-width 的关键帧规则集。
我们为浏览器定义了两个关键帧，分别在 div 动画的持续时间为百分之零（0%）和百分之一百（100%）时应用。

因此，浏览器会延迟 second-div 的动画四秒，而立即开始 first-div 的动画。

下面是 animation-delay 属性的另一个例子。

如何从动画序列的第四秒开始完成更改元素宽度的动画

div {
  width: 150px;
  height: 150px;
  color: white;
  animation-name: change-width;
  animation-duration: 7s;
}

.first-div {
  background-color: purple;
  animation-timing-function: ease-in-out;
}

.second-div {
  background-color: orange;
  animation-timing-function: linear;
  animation-delay: -4s;
}

@keyframes change-width {
  from {width: 50px;}
  to {width: 100%;}
}

试着编辑它

在上面片段中我们做了什么：

animation-name 属性制定了我们希望应用到 div 元素的 @keyframes。
animation-duration 属性设置动画一个循环的运行时长为 7 秒（7s）。
我们使用 ease-in-out 函数在 first-div 上应用一个慢慢开始并慢慢结束的动画。
linear 函数在 second-div 上用一个一致的速度的动画。
animation-delay 属性使 second-div 的动画从动画序列的第四秒开始。
我们创建了名为 change-width 的关键帧规则集。
我们为浏览器定义了两个关键帧，分别在 div 动画的持续时间为百分之零（0%）和百分之一百（100%）时应用。

因此，浏览器会在第四秒立即开始 second-div 的动画。

什么是 CSS `animation-iteration-count` 属性？

CSS 的 animation-iteration-count 属性定义了浏览器应重复动画的次数。

注意以下几点：

1 是 animation-iteration-count 的默认值。
animation-iteration-count 属性接受非整数值，0.5 告诉浏览器播放单个动画循环的一半。
animation-iteration-count 不接受赋值。
infinite 意味着浏览器将一直重复这个动画。

下面是一些例子。

如何完成两次更改元素宽度的动画

div {
  width: 70px;
  height: 50px;
  background-color: purple;
  animation-name: change-width;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 2;
}

@keyframes change-width {
  from {width: 70px;}
  to {width: 100%;}
}

试着编辑它

在上面片段中我们做了什么：

animation-name 属性制定了我们希望应用到 div 元素的 @keyframes。
animation-duration 属性设置动画一个循环的运行时长为 5 秒（5s）。
我们使用 ease-in-out 函数在 div 上应用一个慢慢开始并慢慢结束的动画。
animation-iteration-count 属性告诉浏览器运行这个动画两次。
我们创建了名为 change-width 的关键帧规则集。
我们为浏览器定义了两个关键帧，分别在 div 动画的持续时间为百分之零（0%）和百分之一百（100%）时应用。

因此，浏览器将运行 div 的动画两次。

下面是另一个 animation-iteration-count 属性的例子。

如何无限重复更改元素宽度的动画

div {
  width: 70px;
  height: 50px;
  animation-name: change-width;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes change-width {
  from {width: 70px; background-color: purple;}
  to {width: 100%; background-color: orange;}
}

试着编辑它

在上面片段中我们做了什么：

animation-name 属性制定了我们希望应用到 div 元素的 @keyframes。
animation-duration 属性设置动画一个循环的运行时长为 5 秒（5s）。
我们使用 ease-in-out 函数在 div 上应用一个慢慢开始并慢慢结束的动画。
animation-iteration-count 属性告诉浏览器无限次地运行这个动画。
我们创建了名为 change-width 的关键帧规则集。
我们为浏览器定义了两个关键帧，分别在 div 动画的持续时间为百分之零（0%）和百分之一百（100%）时应用。

因此，浏览器将无限次地运行 div 的动画。

什么是 CSS `animation-direction` 属性？

animation-direction 属性指定动画的第一次迭代是正向还是反向。它还定义浏览器是否应该改变后续迭代的方向。

animation-direction 可接受的值：

normal：正常的方向播放动画（也就是正向），normal 是 animation-direction 的默认值。
reverse：相反的方向播放动画（反向）。
alternate：第一次动画循环正向播放，后续迭代在方向与正向之间交替。
alternate-reverse：第一次动画循环反向播放，后续迭代在正向与反向之间交替。

下面是一些例子。

如何每次都以反向开始完成改变元素宽度的动画

div {
  width: 70px;
  height: 50px;
  animation-name: change-width;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: reverse;
}

@keyframes change-width {
  from {width: 70px; background-color: purple;}
  to {width: 100%; background-color: orange;}
}

试着编辑它

在上面片段中我们做了什么：

animation-name 属性制定了我们希望应用到 div 元素的 @keyframes。
animation-duration 属性设置动画一个循环的运行时长为 5 秒（5s）。
我们使用 ease-in-out 函数在 div 上应用一个慢慢开始并慢慢结束的动画。
animation-iteration-count 属性告诉浏览器无限次地运行这个动画。
animation-direction 属性让每次动画反向开始。
我们创建了名为 change-width 的关键帧规则集。
我们为浏览器定义了两个关键帧，分别在 div 动画的持续时间为百分之零（0%）和百分之一百（100%）时应用。

下面是 animation-direction 属性的另一个例子。

如何交替动画方向地完成更改元素宽度的动画

div {
  width: 70px;
  height: 50px;
  animation-name: change-width;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes change-width {
  from {width: 70px; background-color: purple;}
  to {width: 100%; background-color: orange;}
}

试着编辑它

在上面片段中我们做了什么：

animation-name 属性制定了我们希望应用到 div 元素的 @keyframes。
animation-duration 属性设置动画一个循环的运行时长为 5 秒（5s）。
我们使用 ease-in-out 函数在 div 上应用一个慢慢开始并慢慢结束的动画。
animation-iteration-count 属性告诉浏览器无限次地运行这个动画。
animation-direction 属性让每次动画都交替方向。
我们创建了名为 change-width 的关键帧规则集。
我们为浏览器定义了两个关键帧，分别在 div 动画的持续时间为百分之零（0%）和百分之一百（100%）时应用。

什么是 CSS `animation-play-state` 属性？

CSS 的 animation-play-state 属性定义了浏览器是在运行还是暂停特定动画。

animation-play-state 属性接受的值：

running：指定浏览器运行动画。running 是 animation-play-state 的默认值。
paused：指定浏览器暂停动画。

看这个例子：

div {
  width: 70px;
  height: 50px;
  animation-name: change-width;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

div:hover {
  animation-play-state: paused;
}

@keyframes change-width {
  from {width: 70px; background-color: purple;}
  to {width: 100%; background-color: orange;}
}

试着编辑它

在上面片段中我们做了什么：

animation-name 属性制定了我们希望应用到 div 元素的 @keyframes。
animation-duration 属性设置动画一个循环的运行时长为 5 秒（5s）。
我们使用 ease-in-out 函数在 div 上应用一个慢慢开始并慢慢结束的动画。
animation-iteration-count 属性告诉浏览器无限次地运行这个动画。
animation-direction 属性让每次动画都交替方向。
我们在 div 的 hover 伪类上使用了 animation-play-state，以便在用户将鼠标移到 div 元素上时暂停动画。
我们创建了名为 change-width 的关键帧规则集。
我们为浏览器定义了两个关键帧，分别在 div 动画的持续时间为百分之零（0%）和百分之一百（100%）时应用。

什么是 CSS `animation-fill-mode` 属性？

CSS 的 animation-fill-mode 属性定义了浏览器在动画运行之前（或之后）应该应用于元素的样式。

animation-fill-mode 可接受的值：

none：浏览器将不会在动画运行之后或之前应用样式。none 是 animation-fill-mode 的默认值。
forwards：当动画结束，元素将保留最后动画帧的样式声明。（注意：animation-direction 和 animation-iteration-count 属性将决定最后一帧。）
backwards：在 animation-delay 期间，动画将保留最初动画帧的样式声明。（注意：animation-direction 属性决定第一帧。）
both：浏览器将同时应用 forwards 和 backwards 规则。因此，动画属性将在两个方向上扩展。

下面是一些例子：

如何在动画结束为元素增加样式

div {
  width: 70px;
  height: 50px;
  background-color: green;
  animation-name: change-width;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes change-width {
  from {width: 70px; background-color: purple;}
  to {width: 100%; background-color: orange;}
}

试着编辑它

在上面片段中我们做了什么：

animation-name 属性制定了我们希望应用到 div 元素的 @keyframes。
animation-duration 属性设置动画一个循环的运行时长为 5 秒（5s）。
我们使用 ease-in-out 函数在 div 上应用一个慢慢开始并慢慢结束的动画。
animation-fill-mode 将告诉浏览器当动画结束时保留最后的关键帧样式声明。
我们创建了名为 change-width 的关键帧规则集。
我们为浏览器定义了两个关键帧，分别在 div 动画的持续时间为百分之零（0%）和百分之一百（100%）时应用。

下面是 animation-fill-mode 属性的另一个例子。

如何在动画延迟这段时间增加样式

div {
  width: 70px;
  height: 50px;
  background-color: green;
  animation-name: change-width;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-delay: 3s;
  animation-fill-mode: backwards;
}

@keyframes change-width {
  from {width: 70px; background-color: purple;}
  to {width: 100%; background-color: orange;}
}

试着编辑它

在上面片段中我们做了什么：

animation-name 属性制定了我们希望应用到 div 元素的 @keyframes。
animation-duration 属性设置动画一个循环的运行时长为 5 秒（5s）。
我们使用 ease-in-out 函数在 div 上应用一个慢慢开始并慢慢结束的动画。
animation-fill-mode 将告诉浏览器在 animation-delay 期间保留最开始的关键帧样式声明。
我们创建了名为 change-width 的关键帧规则集。
我们为浏览器定义了两个关键帧，分别在 div 动画的持续时间为百分之零（0%）和百分之一百（100%）时应用。

让我们看 animation-fill-mode 属性的第三个例子。

如何在动画延迟时和完成动画后增加样式

div {
  width: 70px;
  height: 50px;
  background-color: green;
  animation-name: change-width;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-delay: 3s;
  animation-fill-mode: both;
}

@keyframes change-width {
  from {width: 70px; background-color: purple;}
  to {width: 100%; background-color: orange;}
}

试着编辑它

在上面片段中我们做了什么：

animation-name 属性制定了我们希望应用到 div 元素的 @keyframes。
animation-duration 属性设置动画一个循环的运行时长为 5 秒（5s）。
我们使用 ease-in-out 函数在 div 上应用一个慢慢开始并慢慢结束的动画。
animation-fill-mode 将告诉浏览器同时应用 forwards 和 backwards 两条规则。
我们创建了名为 change-width 的关键帧规则集。
我们为浏览器定义了两个关键帧，分别在 div 动画的持续时间为百分之零（0%）和百分之一百（100%）时应用。

什么是 CSS `animation` 属性？

我们使用 animation 属性作为它们的缩写：

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-play-state
animation-fill-mode

换句话说，不需要写这些：

div {
  animation-name: change-width;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-delay: 2s;
  animation-iteration-count: 3;
  animation-direction: alternate;
  animation-play-state: running;
  animation-fill-mode: both;
}

另外，你也可以使用 animation 属性缩短你的代码，像是这样：

div {
  animation: 5s ease-in-out 2s 3 alternate both running change-width;
}

试着编辑它

这是 animation 属性的语法：

animation: animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state animation-name;

注意：

时间值的排列方式很重要。浏览器将第一个时间值视为 animation-duration，而将第二个时间值分配给 animation-delay。
最好将 animation-name 放在最后，不然，浏览器可能赋值 animation-name 到其他属性。
你可以使用 animation 属性应用多个 @keyframes 规则集到一个元素。看这个例子：

div {
  width: 70px;
  height: 70px;
  background-color: green;
  animation: 
    5s ease-in-out 3s 3 alternate both change-width, 
    5s 3s infinite alternate both change-shape, 
    5s 3s infinite rotate-hue;
}

@keyframes change-width {
  from {width: 70px; background-color: purple;}
  to {width: 100%; background-color: orange;}
}

@keyframes change-shape {
  from {border-radius: 0%; border: 1px solid blue;}
  to {border-radius: 50%; border: 7px solid green;}
}

@keyframes rotate-hue {
  from {filter: hue-rotate(0deg);}
  to {filter: hue-rotate(360deg);}
}

试着编辑它

上方的片段使用逗号分隔了三个 @keyframes 并应用到 div 元素上。

注意： 我们用了 hue-rotate() 函数去改变了色调。

CSS 过渡和动画的重要知识要点

你不能为所有的 CSS 属性增加动画。可以去看看 MDN 的可动画化的 CSS 属性文章，以查看可以进行动画处理的属性列表。
CSS 过渡和动画对于大多数 CSS 属性来说是昂贵的操作，除了 opacity 和 transform。
应该注意 CSS 过渡可能通过元素的堆叠顺序引起布局的重绘问题，

总结

在这这篇文章中，我们讨论了 CSS 过渡和动画之间的不同，也用了一些例子来讨论应该如何使用它。

感谢阅读！

这还有些有用的 React Typescript 资源

我写了一本有关如何创建 NPM 包的书！

这是一本对初学者友好的书，你可以像是专家一样从零开始去创建、测试、发布一个NPM包。

可以在 Amazon 上找到这本书

CSS Flexbox 手册——附带实用示例的完整指南

huqi — Thu, 28 Mar 2024 04:53:00 +0000

原文： The CSS Flexbox Handbook – Complete Guide with Practical Examples

Flexbox 是一个有用的工具，用于为网页创建美观且响应式的布局。在本指南中，你将学习像专业人士一样开始使用 CSS Flexbox 所需的一切知识。我们还将学习大量练习示例。

如果你是初学者 web 开发人员，本指南对你来说是一份完美的资源。如果你是经验丰富的开发人员，想要提高响应式网页设计技能，它也会很有用。

什么是 Flexbox
使用 Flexbox 有什么好处
主轴和交叉轴
Flex 容器和 Flex 项
了解 Flex 和 Inline-flex
display: flex
display: inline-flex
Flex 容器属性
flex-direction 属性
flex-wrap 属性
flex-flow 缩写属性
justify-content 属性
Talign-items 属性
align-content 属性
place-content 属性
Flex 项属性
order 属性
align-self 属性
flex-grow 属性
flex-shrink 属性
flex-basis 属性
flex 缩写属性
Flexbox 间隙
如何使用 Flexbox 将元素居中
通过 Flexbox 游戏练习
CSS Flexbox 中有 Bug 吗
总结

什么是 Flexbox

Flexbox 是“Flexible Box Layout”的缩写。它是一个 CSS 布局模型，可以简化复杂布局的创建。它提供了一种灵活的方式来对齐元素并在容器元素内分配空间。

Flexbox 布局模型是双向的。这意味着你可以按行、列或两者排列元素。稍后会详细介绍。

使用 Flexbox 有什么好处

在 Flexbox 出现之前，创建复杂的布局和响应式网页非常艰难。你需要 CSS 浮动和位置属性的组合。这需要许多变通方法和技巧。

但使用 Flexbox，你现在可以面对更少的困难，使用更少的代码行数来实现以下操作：

使用justify-content 和 align-items 等属性对齐和居中元素。
无需编写大量媒体查询即可开发响应式布局。
在不改变 HTML 结构的情况下重新排序元素。
创建相同高度的列，无需任何额外的 HTML 元素或背景图片。

现在，你了解了 Flexbox 是什么，以及可以使用它做的一些事情。让我们看看你如何使用它。

主轴和交叉轴

关于 Flexbox，你首先需要了解的是轴的概念。每个 Flex 容器（ display 属性设置为 flex 或 inline-flex 的元素）都有一个主轴和一个交叉轴。

主轴是水平的还是垂直的，具体取决于 flex-direction 的值。如果你不熟悉 flex-direction , 不用担心。你即将学会它。

flex-direction 为 row 时的交叉轴和主轴

在这个示例中，主轴是水平的，交叉轴是垂直的。

以下是主轴垂直且交叉轴水平的示例。

flex-direction 为 column 时的主轴和交叉轴

Flex 容器和 Flex 项

要使用 Flexbox 的所有属性，你需要将元素的 display 属性设置为 flex 或 inline-flex。

这会将元素变成 flex 容器，并且该元素的子元素变成 flex 项。

举个例子:

  
	Flex Item 1  
    Flex Item 2  
        
    	This paragraph is not a flex item

.container {  
  display: flex;
}

.container 元素现在是一个 Flex 容器。这三个 div 元素是 .container 元素的直接子元素，这使得它们成为 Flex 项。

但第三个 div 内的段落元素不是 Flex 项。这是因为它不是 .container 元素的直接子元素。

了解 `Flex` 和 `Inline-flex`

你可以使用 flex 和 inline-flex 使元素成为 Flex 容器。不同之处在于它们与周围元素的交互方式。

`display: flex`

这使得 Flex 容器的行为类似块级元素。Flex 容器占据其父元素的整个可用宽度。它会在新的一行开始，并且其后的元素也会在新的一行开始。

例如:



/* Flex Container */

.container {
	display: flex;
}

当你使用 display: flex 时，Flex 容器的行为类似于块元素`

.container 元素占据了主体（其父元素）的整个可用宽度。

`display: inline-flex`

这使得 Flex 容器的行为就像一个内联元素。这允许其他内联元素（如按钮）与其并排。使用前面的示例，这就是当你将 display 从 flex 更改为 inline-flex 时元素的排列方式。

当你使用 display: inline-flex 时，Flex 容器的行为类似于 inline-elements。

Flex 容器不占据其父容器的整个宽度。它仅使用其内容所需的水平空间。

在 StackBlitz 上 练习使用 flex 和 inline-flex

Flex 容器属性

Flex 容器属性允许你控制 Flex 容器内 Flex 项的布局和对齐方式。

注意: 你可以将这些属性应用于 Flex 容器，而不是 Flex 项。

以下是 Flex 容器属性:

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
place-content

`flex-direction` 属性

flex-direction 属性定义了 Flex 项的显示方向。它设置了 Flex 容器的主轴。该属性可以采用以下四个值中的任意一个：

row (默认值)
column
row-reverse
column-reverse

现在，让我们看一些示例，看看它是如何工作的。

在下面的代码片段中，我们有一个名为 names-container 的容器，其中包含四个名字：

  
	1. JILL  
	2. JOHN  
	3. JANE  
	4. JACK

让我们看看使用 flex-direction 属性来排列这些名字的不同方式。

`flex-direction: row`

这会从左到右水平显示 Flex 项。

.names-container {  
	display: flex;  
    flex-direction: row;  
    /* Other styles here... */
}

示例：flex-direction: row

`flex-direction: column`

这会从上到下垂直显示 Flex 项。

示例：flex-direction: column

`flex-direction: row-reverse`

这与 row 值相反。它从右到左显示 Flex 项。

示例：flex-direction: row-reverse

`flex-direction: column-reverse`

这与 column 值相反。它从下到上显示 Flex 项。

示例：flex-direction: column-reverse

在 StackBlitz 上 练习使用 flex-direction

关于反向值和无障碍的注意事项

当你使用 row-reverse 和 column-reverse 时，有些事情你需要记住。正如你已经看到的，这两个值会影响屏幕上元素的视觉顺序。

但是这些元素在 HTML 中的顺序保持不变，而这些元素在 HTML 中的顺序就是屏幕阅读器和键盘导航控件使用的顺序。

在示例中，当你使用 row-reverse 时，你首先在屏幕上看到 Jack 的名字，然后是 Jane、John 和 Jill。

但是对于使用屏幕阅读器的人来说，他们将会按照 HTML 中的出现顺序而不是屏幕上的顺序来听到这些名字。在这种情况下，他们将首先听到 Jill 的名字，然后是 John、Jane 和 Jack。

`flex-wrap` 属性

有时，Flex 容器内的空间不足以容纳 Flex 项。

在这种情况下，你可以使用 flex-wrap 属性来选择是让 Flex 项溢出还是另起一行。

flex-wrap 属性接受以下任何值：

nowrap (默认值)
wrap
wrap-reverse

要看到 flex-wrap 的效果，让我们向 names-container 添加超过四个的名字：

  
	1. JILL  
	2. JOHN  
	3. JANE  
	4. JACK  
	5. SARA  
	6. SETH  
	7. SEAL

`flex-wrap: nowrap`

这会使所有的 Flex 项都保持在单行中，无论是在行还是列中。如果在 Flex 容器中没有足够的空间，它允许 Flex 项溢出。请看下面的示例：

.names-container {  
	display: flex;  
	flex-direction: row;  
	flex-wrap: nowrap;  
	/* Other styles here... */
}

因为 flex-wrap 被设置为 nowrap，所以 Flex 项溢出

在这个例子中，由于空间不足，三个名字溢出容器。

`flex-wrap: wrap`

当空间不足时，这会将 Flex 项换行或推到下一行。

当 flex-wrap 设置为 wrap 时，Flex 项会换行或移动到下一行

`flex-wrap: wrap-reverse`

这与 wrap 相反。它将溢出的项目移动到下一行，但方向相反。

例如，在名字容器上使用 wrap-reverse 将溢出项移动到下一个顶行，而不是下面的下一行。

示例： flex-wrap: wrap-reverse

在 StackBlitz 上 练习使用 flex-wrap

`flex-flow` 缩写属性

flex-flow 属性是 flex-direction 和 flex-wrap 属性的缩写。这意味着当你使用 flex-flow 时，只需要一行代码即可同时应用这两个属性。

请参阅下面使用名字容器的示例。你可以为容器指定 flex-direction 和 flex-wrap 属性。

.names-container {  
	display: flex;  
	flex-direction: column;  
    flex-wrap: wrap;
}

或者你可以使用 flex-flow 缩写来获得相同的结果。

.names-container {  
	display: flex;  
	flex-flow: column wrap;
}

示例： flex-flow: column wrap

在 StackBlitz 上 练习使用 flex-flow

`justify-content` 属性

justify-content 属性处理 Flex 容器主轴上 Flex 项的对齐方式。

你可以使用它来处理主轴上空间的分配方式。该属性可以取以下任何值：

flex-start (默认值)
flex-end
center
space-between
space-around
space-evenly

`justify-content: flex-start`

这将把 Flex 项放置在 flex-direction 的起始位置。这将把 Flex 项放置在 flex-direction 的起始位置。如果主轴是水平的，并且 flex-direction 的属性值是 row（就像下面的示例），它会将 Flex 项对齐到左侧。如果主轴是垂直的（flex-direction 的属性值是 column），它会将 Flex 项对齐到顶部。

在names-container的例子中，justify-content: flex-start 的效果如下：

.names-container {  
	display: flex;  
	justify-content: flex-start;  
	/* Other styles here... */
}

示例：justify-content: flex-start

`justify-content: flex-end`

这会将 Flex 项放置在主轴的 flex-direction 的末尾。

示例：justify-content: flex-end

`justify-content: center`

这会将 Flex 项目放置在 Flex 容器主轴的中心。

示例：justify-content: center

`justify-content: space-between`

这会将第一个 Flex 项放置在主轴的起始位置，并将最后一个项放置在主轴的末尾。然后，主轴上的空间在这些元素之间均匀分布。（校对者注：space-between并不改变元素本身大小，它的作用只是将元素之间的间距均匀划分了）

示例：justify-content: space-between

`justify-content: space-evenly`

这会在 Flex 项之间均匀分配空间。这意味着每项前后的空间都相同。（校对者注：space-between模式中，首项和末项在没有其他CSS设置的前提下，与Flex容器的左外边距/右外边距为0，即在Flex容器中与最左端和最右端“顶格”。而space-evenly则是保证每一个Flex项左侧和右侧的边距均是相等的，即Flex项之间的间距和Flex项与Flex容器边界的间距都相等，该模式下Flex项与Flex容器的左右边界也存在间距。）

示例：justify-content: space-evenly

`justify-content: space-around`

这也会在 Flex 项之间均匀分配空间。这里的关键区别在于，第一个项之前和最后一个项之后的空间是 Flex 项之间空间的一半。

示例：justify-content: space-around

在 StackBlitz 上 练习使用 justify-content

`align-items` 属性

align-items 属性处理 Flex 项在 Flex 容器交叉轴上的对齐方式。它可以采用以下任意值：

stretch (默认值)
flex-start
flex-end
center
baseline

`align-items: stretch`

这会拉伸 Flex 项以填充 Flex 容器内的空间。

看下面的示例，使用一个新的名字容器（names-container），其中包含不同大小的名字卡片：

.names-container {  
	display: flex;  
    align-items: stretch;  
    /* Other styles here... */
}

示例：align-items: stretch

`align-items: flex-start`

这会将 Flex 项放置在 Flex 容器的交叉轴的起始位置。如果交叉轴是垂直的，如下例所示， align-items: flex-start 会将项放置在顶部。

.names-container {  
	display: flex;  
	align-items: flex-start;  
	/* Other styles here... */
}

示例：align-items: flex-start

`align-items: flex-end`

这会将 Flex 项放置在 Flex 容器的交叉轴的末尾位置。如果交叉轴是垂直的，如下例所示， align-items: flex-end 会将项放置在底部。

.names-container {  
	display: flex;  
    align-items: flex-end;  
    /* Other styles here... */
}

示例：align-items: flex-end

`align-items: center`

这会将 Flex 项在 Flex 容器的交叉轴的中心对齐。

.names-container {  
	display: flex;  
	align-items: center;  
	/* Other styles here... */
}

示例：align-items: center

`align-items: baseline`

当你使用 baseline 值时，Flex 项目的排列方式是使它们的基线对齐。请参阅下面的示例：

.names-container {  
	display: flex;  
	align-items: baseline;  
	/* Other styles here... */
}

基线用白色虚线表示

在 StackBlitz 上 练习使用 align-items

`align-content` 属性

当你有一个带有换行（或多个 Flex 行）的 Flex 容器时，你可能需要对这些行进行对齐以根据需要分配空间。这时你可以使用 align-content 。该属性可以取以下任何值：

stretch (默认值)
flex-start
flex-end
center
space-between
space-evenly
space-around

在下面的示例中，names-container中有 11 个名字，并且names-container的 flex-wrap 值为 wrap。这意味着你可以应用 align-content 属性来改变 Flex 行的对齐方式。

`align-content: stretch`

这会拉伸 Flex 行以填充 Flex 容器交叉轴内的空间。

.names-container {  
	display: flex;  
	flex-wrap: wrap;  
	align-items: stretch;  
	/* Other styles here... */
}

示例：align-content: stretch

`align-content: flex-start`

这将把 Flex 行放置在容器的交叉轴起始位置。例如，如果交叉轴像 names-container 一样是垂直的，它就会将 Flex 行放置在顶部。

示例：align-content: flex-start

`align-content: flex-end`

这会将 Flex 行放置在容器的交叉轴末尾位置。

示例：align-content: flex-end

`align-content: center`

这会将 Flex 行放置在容器的交叉轴中心位置。

示例：align-content: center

`align-content: space-between`

这会将第一行放置在交叉轴的起始位置。它还会将最后一行放置在交叉轴的末尾位置。然后，交叉轴上的空间会均匀分配给这些行。

示例：align-content: space-between

`align-content: space-evenly`

这会在 Flex 行之间均匀分配空间。这意味着每行前后的空间都是相同的。

示例：align-content: space-evenly

`align-content: space-around`

这也会在 Flex 行之间均匀分配空间。这里的主要区别在于，第一行之前和最后一行之后的空间是 Flex 行之间空间的一半。

示例：align-content: space-around

在 StackBlitz 上 练习使用 align-content

`place-content` 属性

如果你需要同时使用 justify-content 和 align-content 属性，你可以使用 place-content 缩写属性。

它可以接受一个或两个值。当你给它一个单一值时，浏览器会为 justify-content 和 align-content 应用相同的值。

当你为 place-content 提供两个值时，第一个值将用于 align-content ，第二个值将用于 justify-content。

让我们看一个示例:

无需这样写:

.names-container {  
	display: flex;  
	flex-wrap: wrap;  
	align-content: flex-end;  
	justify-content: flex-start;  
	/* Other content */
}

你可以改为写下面的代码，效果相同：

.names-container {  
	display: flex;  
	flex-wrap: wrap;  
	place-content: flex-end flex-start;  
	/* Other content */
}

示例：使用 place-content 缩写

在 StackBlitz 上 练习使用 place-content

Flex 项属性

Flex 容器的每个直接子元素都是 Flex 项。到目前为止，你已经学习了 Flex 容器的属性。

Flexbox 还有一些属性，你可以应用到单个 Flex 项上。它们包括以下内容：

order
align-self
flex-grow
flex-shrink
flex-basis
flex

`order` 属性

order 属性确定 Flex 项的出现顺序。

你给这个属性的赋值必须是一个数字。一个数字较小的 Flex 项将出现在数字较大的 Flex 项之前。

在 HTML 代码中，四个名字的顺序如下:

Jill
John
Jane
Jack


	1. JILL
	2. JOHN
	3. JANE
	4. JACK

你可以使用 order 属性改变屏幕上的出现顺序。请参阅下面的示例。

以下是没有 order 属性时它们的显示方式:

添加 order 属性之前的名字卡片

现在，当你添加以下 order 属性时，它们的显示方式如下所示：

.names-container {  
	display: flex;
}

#jill {  
	order: 2;  
    background-color: #fe4f46;
}

#john {  
	order: 4;  
    background-color: #fcd65c;
}

#jane {  
	order: 1;  
    background-color: 
    #00bab4;
}

#jack {  
	order: 3;  
    background-color: #003f54;
}

order 属性改变了出现顺序

在 StackBlitz 上 练习使用 order 属性

警告: 尽管屏幕上的出现顺序改变了，但 HTML 中的顺序保持不变。而屏幕阅读器使用的是 HTML 中的顺序。如果可能，最佳实践是在 HTML 中改变顺序，而不是使用 Flexbox 进行更改。

`align-self` 属性

你可以使用 align-self 属性为一个 Flex 项单独设置不同的对齐方式。

它的工作方式与 align-items 属性相同。不同之处在于， align-items 适用于所有 Flex 项，而 align-self 属性仅适用于特定项。

例如:

.names-container {  
	display: flex;  
    align-items: center;  
    /* Other styles */    
}

#jill {
	align-self: flex-start;
}

示例：align-self 带有 flex-start 值

在这个示例中，names-container 的 align-items 属性设置为 center，这会使所有名字都居中对齐。

但是使用 align-self 属性，你可以用 flex-start 将 Jill 的名字卡片对齐到顶部。

在 StackBlitz 上 练习使用 align-self 属性

`flex-grow` 属性

当你将容器的 display 设置为 flex 时，通常会在排列项之后有一些额外的空间。请参阅下面的示例：

.names-container {  
	display: flex;  
    justify-content: 
    flex-start;  
 	/* Other styles */
 }

Flex 容器有足够的空间容纳 Flex 项

浏览器会将多余的空间视为 1 的值。这意味着当你为其中一个 Flex 项的 flex-grow 设置为 0.5 时，浏览器会将剩余空间的一半添加到该项的大小中。

#jill {
	flex-grow: 0.5;
}

flex-grow 属性使 Jill 的大小大于其初始大小

如果你给 仅一个 Flex 项 设置了 flex-grow 值为 1 ，浏览器将把所有额外的空间都分配给该项。

注意： 如果容器中只有一个项具有 flex-grow 值，则任何值为 1 或更大的值都会使其占据所有额外空间。

例如，下面两个代码片段对 Jill 的卡片具有相同的效果：

#jill {  
	flex-grow: 1;
}

#jill {  
	flex-grow: 99;
}

当容器中只有一个卡片的 flex-grow 为 1 或以上时

当你为多个元素添加 flex-grow 值会发生什么？

浏览器将按比例为它们共享额外的空间。

例如，当你给 Jane 设置 flex-grow 为 3，给 Jack 设置 flex-grow 为 1 时，浏览器将以 3:1 的比例分享额外的空间。

这意味着额外空间的总值变为 4（3+1）。Jane 将获得额外空间的 3/4，而 Jack 将获得 1/4。

额外的空间按比例在 Jane 和 Jack 之间共享

在 StackBlitz 上 练习使用 flex-grow 属性

`flex-shrink` 属性

flex-shrink 属性与 flex-grow 相反。

当你希望在存在额外空间时增加 Flex 项的大小时，你可以使用 flex-grow。但是，当 Flex 容器中的空间不足时，你可以使用 flex-shrink 来减小 Flex 项的大小。

请参阅下面的示例:

.numbers-container {  
	display: flex;  
	justify-content: flex-start;  
	/* Other styles */
}

#one {  
	flex-shrink: 2;  
	background-color: #fe4f46;
}

第一张卡片缩小，为其他卡片腾出空间

在这个示例中，四个数字每个的宽度都设置为 150px（总共 600px）。但 numbers-container 的宽度只有 400px，这是不够的。

卡片必须缩小以适应可用空间。但是 flex-shrink 的值为 2 的数字 1 ，元素大小缩小到了其他数字的 1/2。

如果你不希望一个 Flex 项缩小怎么办？

为了防止 Flex 项收缩，给它一个 flex-shrink 值为 0。

例如，当你为 Number 1 指定 flex-shrink 为 0 时，它将保持 150px 的宽度。其他 Flex 项将缩小以适应剩余空间。

第一个卡片不会缩小，因为它的 flex-shrink 值为 0。

在 StackBlitz 上 练习使用 flex-shrink 属性

`flex-basis` 属性

你可以使用 flex-basis 属性来设置特定 Flex 项的默认长度。这取决于 flex-direction ，可以是宽度或高度。

如果 flex-direction 是 row 或 row-reverse ，则 flex-basis 的值就成为 Flex 项的初始宽度。

如果 flex-direction 是 column 或 column-reverse ，那么 flex-basis 的值就成为 Flex 项的初始高度。

例如:

.names-container {  
	display: flex;  
	flex-direction: column;  
	/* Other styles */
}

div {  
	height: 20px;
}

#jane {  
	flex-basis: 60px;
}

示例：flex-basis 设置 item 的高度

在这个示例中，div 的高度设置为 20px。但 Jane 得到的 flex-basis 值为 60px。这会覆盖所有 div 的 20px。

注意：Jane 的 flex-basis 值为 60px，因为 flex direction 是 column。这意味着主轴是垂直的。

下面是另一个示例。这次，flex-direction 是 row。这意味着 flex-basis 将设置 Flex 项的宽度。

.names-container {  
	display: flex;  
	flex-direction: row;  
    /* Other styles */
}

div {  
	width: 70px;
}

#jane {  
	flex-basis: 140px;
}

示例：flex-basis 设置 item 的宽度

虽然所有其他 div 的宽度均为 70px，但 Jane 的宽度由 flex-basis 设置为 140px。

在 StackBlitz 上 练习使用 flex-basis 属性

`flex` 缩写属性

你可以使用 flex 作为 flex-grow、flex-shrink 和 flex-basis 属性的缩写。

例如，无需这样写：

.flex-item {  
	flex-grow: 2;  
	flex-shrink: 0;  
	flex-basis: 50px;
}

你可以像这样使用缩写，它会产生相同的效果：

.flex-item {  
	flex: 2 0 50px;
}

flex 属性最多可以接受三个值。值的顺序很重要。浏览器将第一个值分配给 flex-grow，第二个值分配给 flex-shrink，第三个值分配给 flex-basis。

flex 的默认值是 1 0 auto。

这意味着如果你给 flex 一个值为 2，浏览器将使用 2 作为 flex-grow。然后它将 flex-shrink 设置为 0，将flex-basis 设置为 auto。

在 StackBlitz 上 练习使用 flex 属性

如何使用 Flexbox 将元素居中

让许多前端开发人员头疼的问题之一是元素居中。 Flexbox 对此提供了一个完美的解决方案。

涉及两个步骤：

通过将 display 设置为 flex 使父元素成为 Flex 容器。
将 justify-content 和 align-items 都设置为 center。

就是这样！你的元素将完美居中！

例如:

  
	JOHN

.name-container {  
	display: flex;  
	justify-content: center;  
	align-items: center;  
	/* Other Styles */
}

示例：使用 Flexbox 居中一个元素

无论你是试着居中文本、图像，还是整个导航栏，这都能完美运行。

Flexbox 间隙

你可以使用 gap 属性来调整 flex 项之间的间距。

注意： 你将 gap 属性应用于 Flex 容器，而不是 Flex 项。

gap 可以取两个值：第一个值用于行之间的间距，第二个值用于列之间的间距。

例如:

.names-container {  
	display: flex;  
	flex-wrap: wrap;  
	gap: 50px 10px; 
	/* row-gap column-gap */
}

示例：为 gap 属性指定两个值

如果你想要的行和列之间的间距相同，你可以使用单个值。浏览器将为行和列都应用相同的值。

例如:

.names-container {  
	display: flex;  
	flex-wrap: wrap;  
	gap: 10px; 
	/* Other Styles */
}

示例：行距和列距仅使用一个值

如果你需要仅在行之间应用特定的间隙值，你还可以使用属性 row-gap 。如果你需要仅在列之间添加间隙，则使用 column-gap 。

例如：仅在行之间添加间距：

.names-container {  
	display: flex;  
	flex-wrap: wrap;  
	row-gap: 20px; 
	/* Other Styles */
}

示例：使用 row-gap

例如: 仅在列之间添加间距：

.names-container {  
	display: flex;  
	flex-wrap: wrap;  
	column-gap: 20px; 
	/* Other Styles */
}

示例：使用 column-gap

在 StackBlitz 上 练习使用 gap 属性

通过 Flexbox 游戏练习

想要以交互方式练习 Flexbox？看看以下游戏。它们以有趣且引人入胜的方式提供亲身体验 Flexbox 的实践练习。

CSS Flexbox 中有 Bug 吗

虽然 CSS Flexbox 是一个强大的布局工具，但它有一些可能会让你感到意外的 bug 。

一个常见的例子是 某些 HTML 元素无法充当 flex 容器。这些元素包括

网页布局 - 如何使用 CSS 中的 Grid 和 Flex 创建响应式网页

freeCodeCamp.org — Thu, 07 Dec 2023 13:30:00 +0000

原文： Web Layouts – How to Use CSS Grid and Flex to Create a Responsive Web Page

你网页的布局对于你的网站就像建筑物的平面图一样重要。没有它们你只是在空中建造城堡。

当你要创建或设计一个网站或应用时，首先要做的是决定布局。这很重要，因为在这个布局中，你可以指定元素的排列方式，以便以预期的方式和层级对它们进行评估。

基本上，每个网页布局的目标是减少混乱，增强可用性，并最终为用户提供愉快的体验。布局的一些主要元素包括导航、菜单和内容。

在网页和前端开发中，在开始构建之前先确定一个布局可以帮助你决定使用哪个CSS布局模块：Flexbox还是Grid。

在本文中，我们将学习这些工具的具体含义，并通过构建一个简单而美观的登录页面来了解它们的最佳使用方式。

我们将要构建的内容

登录页设计

请在Codepen上查看这个项目。

项目的功能性

网页布局：创建一个美观的登录页面
移动设备响应式设计

前置准备

掌握基本的HTML和CSS的基本知识
一个像VS Code这样的集成开发环境（文本编辑器）
一个网络浏览器（Chrome、FireFox）

步骤

为您的项目创建一个文件夹，并在集成开发环境中打开它。
在您的项目文件夹中创建 index.html 和 style.css 文件。
创建一个用于存储图像的 assets 文件夹。
在 index.html 文件中，创建HTML的基本结构，并在标签内链接您的 CSS 文件和字体 URL。

资源

字体: https://fonts.googleapis.com/css2?family=Epilogue:wght@500;700&family=Poppins:wght@400;500;700&display=swap
桌面图像: https://i.postimg.cc/0Nt97Bhf/image-hero-desktop.png
移动设备图像: https://i.postimg.cc/ZnYfhwwW/image-hero-mobile.png
客户 Logo (Databiz): https://i.postimg.cc/gJ9Y84m6/client-databiz.png
客户 Logo (Audiophile): https://i.postimg.cc/15DDqYSD/client-audiophile.png
客户 Logo (Meet): https://i.postimg.cc/5ybQqfbv/client-meet.png
客户 Logo (Maker): https://i.postimg.cc/g2NsxByN/client-maker.png

如何使用 Flexbox

通常情况下，HTML 元素根据其默认的显示样式进行对齐。这意味着，在没有使用 CSS 进行外部样式设置的情况下，块级元素如 p 和 div 会在新行上开始。而行内元素如 input 和 span 则会在同一行上并排显示。

然而，Flexbox 的概念允许您轻松地将这些元素在水平或垂直方向上放置，通常称为一维布局。为了实现这一点，至少需要两个元素：弹性容器（flex container）和弹性子元素（flex item）。分别代表父元素和子元素。

在响应式设计中，Flexbox 的目的是允许容器及其子元素填充定义的空间或根据设备的尺寸进行收缩。

弹性盒子的方向和轴线

flex-direction 是 CSS Flexbox 的一个重要属性，因为它决定了弹性子元素的排列方向。它通过指定弹性容器的主轴来实现这一点。

有两个主要的轴线，叫主轴和交叉轴，主轴是指弹性子元素在弹性容器中排列的方向，而交叉轴始终是主轴的对立面轴线。

尝试使用数学中的 x 轴和 y 轴的概念来理解 Flexbox 可能会有一些问题。这主要是因为在 Flexbox 中，主轴可以是垂直或水平的，具体取决于 flex-direction 的值。

flex-direction 属性接受的值包括 row（默认值）、row-reverse、column 和 column-reverse。在本项目中，我们将关注 row 和 column。

flex-direction: row

当 flex-direction 属性的值为 row 时，主轴是水平的，交叉轴是垂直的，如上图所示。这意味着弹性子元素将水平排列。

由于 row 是默认值，如果将容器设置为 flex，但未指定 flex-direction，则弹性子元素将自动排列为一行。

flex-direction: column

当 flex-direction 属性的值为 column 时，主轴是垂直的，交叉轴是水平的，如上图所示。这意味着弹性项目将垂直排列。

如何构建导航栏

既然我们了解了 Flexbox 的工作原理，让我们开始构建我们的导航栏。首先，我们将提供其中的内容，即菜单项和Logo。我们将为它们提供描述性的类，以便在 CSS 文件中轻松引用它们。


      snap
      
        Features
        Company
        Careers
        About
      
      
        Login
        Register

下面的图片是上述代码的输出结果。因为

都是块级元素，所以其中指定的每个项目都将显示在新的一行上。

Flexbox 布局的显示属性是在父容器上声明的，并影响子元素。这意味着如果你有一个杂货清单的无序列表，无法直接在这种情况下将 display: flex 应用于
，因为它们是子元素。相反，要将它们显示为 flex 布局，你需要首先创建一个父容器，并将其应用于该容器。

在下面的 CSS 代码中，我们定义了项目的字体样式和大小，以及导航栏Logo的样式。我们还将导航栏元素及其内部的一些元素设置为 flex 布局。
```
* {
  font-family: "Epilogue", sans-serif;
  font-size: 0.85rem;
}

.logo {
  font-size: 1.3rem;
}

nav,
.cta-btns,
.menu-items {
  display: flex;
}
```
导航栏初始化样式

下面的图片是上述代码的输出结果。元素已经以 flex 方式显示。然而，由于我们没有指定 flex-direction，它们会自动排列成一行。

但是，正如你在下面使用标尺（红线）看到的那样，flex 子元素的对齐并不如预期。让我们通过学习另一个重要的 flex 元素来修复这个问题。

如何使用 align-items 属性

这是一个控制 flex 子元素在交叉轴上排列的 Flexbox 属性。它接受的值有 flex-start、flex-end 和 center，具体取决于元素的对齐需求。下面的图片展示了每个值的工作方式。

从上面的图片可以看出，如果我们希望确保
内的 flex 子元素正确对齐，我们必须在该元素上添加 align-items 属性，并将其值设为 center。因此，我们需要在我们的 flex 容器上添加一个 align-items 属性，并将其值设为 center，如下所示的 CSS 代码：
```
nav,
.cta-btns,
.menu-items {
  display: flex;
  align-items: center;
}
```
导航栏的对齐方式

如你可以在下面的图片中看到，flex 子元素现在已经按照预期对齐了。

但是再次出现了一些问题。我们希望在导航栏上正确地将项目展开：将 Logo 放在极左边，登录和注册放在极右边，其余项目放在中间。

我们可以使用 justify-content 属性来实现这一点。让我们接下来学习一下它，然后再进行实现。

如何使用 justify-content 属性

这是一个控制 flex 子元素在主轴上排列的 Flexbox 属性。它还定义了浏览器如何在 flex 容器内在 flex 项目之间分配空间，以及在 flex 项目周围分配空间。

为了实现响应式布局，justify-content 属性有助于分配剩余的多余空间，即在 flex 子元素排列完成后剩下的空间。

justify-content 样式

从与 justify-content 属性的各个值相关联的样式中，我们可以看到底部两个值更接近我们想要实现的效果。

我们可以选择使用 space-around 或 space-between，并在两侧添加一些内边距来将子元素推离边缘。我们还可以将 list-style 属性的值设为 none，以去除列表项前面的点。
```
li {
  list-style: none;
}

nav {
  justify-content: space-between;
}
```
导航栏的 justify-content

justify-content 导航栏输出效果

现在我们已经将子元素放置在所需的位置上，我们需要在它们之间创建一些小的间距。在这种情况下，我们将给每个列表项设置 margin-right: 1rem。我们还设置其他样式，例如字体大小、颜色以及为注册项设置边框。
```
nav {
  margin: 0 1.5rem 1.5rem 1.5rem;
  justify-content: space-between;
}

.logos-section {
  display: flex;
}

.menu-items li,
.cta-btns li {
  font-size: 0.7rem;
  margin-right: 1rem;
  color: hsl(0, 0%, 41%);
}

.cta-btns li:nth-last-child(1) {
  border: 1px solid gray;
  padding: 0.2rem 0.7rem;
  border-radius: 0.3rem;
}
```
完整的导航栏设计

带有样式的导航栏

在实现以上代码后，这是我们导航栏的最终外观。这也标志着我们 Flexbox 部分的结束。接下来，我们将使用 CSS Grid 构建我们网页的最后一部分。

如何使用 CSS Grid

CSS Grid 是一个改变生活的工具，用于创建网页布局。它可以帮助您创建简单和复杂的布局。主要区别在于 Flexbox 用于一维元素的排列，而 CSS Grid 则能够进行二维排列。

在 Flexbox 中学到的轴的概念在 CSS Grid 中仍然适用。您可以使用 CSS Grid 同时在主轴和交叉轴上排列元素。

总的来说，Flexbox 可以使您在水平方向（行）或垂直方向（列）上排列元素。而 CSS Grid 则可以同时在垂直和水平方向上对元素进行对齐。

CSS Grid 布局仅在父元素或容器上声明。实际上，它的所有子元素都成为网格项。一旦确定了目标容器，您可以为其添加 display: grid; 属性来声明它为网格容器。通过 grid-template-rows 和 grid-template-columns 属性，可以分别确定网格行和列的大小。

如何构建主页

就像我们在导航栏中所做的那样，让我们从在 HTML 文件中的
部分定义我们的内容开始。

根据我们的目标图像，我们有两个主要的部分：左侧部分将包含文本和标志，而右侧部分将有一个主要图片。这是我们项目的网页视图。

让我们先定义我们的内容。具有 class 为 "text-side" 的部分包含：标题、段落文本、按钮和标志。具有 class 为 "img-side" 的部分只包含一张图片。
```
      
        Make 
remote work
        
          Get your team in sync, no matter your location. Streamline processes,
          create team rituals, and watch productivity soar.
        
        
        
          
          
          
          
        
      
      
        
      
    
```
主页部分的HTML代码

在主 main 部分中，我们创建了两个所需的部分，并为它们提供了描述性的 id：text-side 和 img-side。

在 text-side 内部，我们添加了一个标题、段落文本、按钮和一个用于显示客户标志的 div。而对于 img-side，我们只需要显示图像。
```
/* Client Logos */
.clients-logos img {
  width: 5rem;
  margin-right: 1rem;
}

.clients-logos {
  margin-top: 4rem;
}

.clients-logos img:nth-child(2) {
  width: 3rem;
}

/* Main */
main h1 {
  font-size: 3rem;
}

main p {
  font-size: 0.7rem;
  width: 18rem;
  color: hsl(0, 0%, 41%);
  line-height: 0.9rem;
}

main button {
  background-color: hsl(0, 0%, 8%);
  color: #fff;
  border: none;
  font-size: 0.7rem;
  padding: 0.6rem 1rem;
  border-radius: 0.4rem;
  margin-top: 1rem;
}

#text-side {
  margin-top: 3rem;
}
/* Hero Image */
.img-side img {
  width: 20rem;
}
```
主页部分的CSS代码

在我们的 CSS 文件中，我们需要为客户Logo的 div 和其子元素设置样式。我们还为标题和段落设置了字体大小。接下来，我们将为按钮设置样式，并为图像分配一个宽度。

上面的图片展示了在定义内容并仅对标题、按钮和标志进行样式设置后，我们的网页将呈现的样子。也就是说，我们还没有将容器声明为网格。由于我们这里几乎所有的元素都是块级元素，所以我们看到它们垂直堆叠在一起。

网格模板行和列

grid-template-columns 属性用于指定网格中列的数量和宽度，通过定义网格容器的列来指定轨道（track）的大小和线名（line names）。

grid-template-rows 属性与之相反。它用于指定网格中行的数量和高度，通过定义网格容器的行来指定轨道（track）的大小和线名（line names）。

正如您在下面的图片中所看到的，grid-template-rows 将元素从设备屏幕的顶部排列到底部。而 grid-template-columns 则将元素从设备屏幕的左侧排列到右侧。

对于我们的项目，我们将使用 grid-template-columns，因为我们希望将两个部分并排排列，让每个部分占据整体项目宽度的相等部分。我们通过将其作为属性分配给与之前指定为网格显示的容器相同的元素来实现这一点。

现在，我们已经通过使用 grid-template-columns 将
标签内的两个部分等分布局好了，接下来还有两件事情要做。

我们需要通过将两个元素定位在页面中央，使它们水平对齐，图像左侧有多余的空白空间，左右两侧均匀分布。我们还需要通过将它们定位在页面中央，使它们垂直对齐，底部有多余的空白空间，上下均匀分布。

在CSS网格中对齐和调整

好消息是，为了在 CSS Grid 布局中实现我们期望的对齐方式，我们不需要学习任何新概念。因为幸运的是，正如我们之前学到的那样，align-items 和 justify-content 并不仅适用于 Flexbox。你也可以使用它们来在水平和垂直方向上定位元素。
```
main {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  height: 70vh;
  align-items: center;
  justify-content: center;
  margin-left: 8rem;
}
```
对齐和居中的CSS代码

正如你在上面的代码中所看到的，我们只需要在父标签（网格容器）上将 align-items 和 justify-content 属性的值都设置为 center。

为了确保我们能看到完美居中的效果，我们还需要为该部分指定一个高度。下面的图片是我们项目的最终输出结果。

如何使其具有响应性

到目前为止，我们所构建的都是针对网页的。但考虑到希望在移动设备上访问登陆页面的用户，我们必须确保我们的项目在较小的屏幕上可访问。在我们的情况下，我们关注的屏幕尺寸是大于300像素但小于480像素的范围。

正如您在下面的代码中所看到的，我们正在隐藏我们的导航项，并显示一个具有 mobile-nav 类的表情符号。除此之外，我们隐藏了桌面版的页眉图像，并显示了移动版的页眉图像。
```
/* Responsive */
@media (min-width: 300px) and (max-width: 480px) {
  * {
    font-size: 1rem;
  }

  body {
    height: 100vh;
    width: 100vw;
    overflow-y: hidden;
    overflow-x: hidden;
  }

  nav {
    margin: 0 1.5rem 0 1.5rem;
  }

  nav ul {
    display: none;
  }
  
  .mobile-nav {
    display: block;
    margin-right: 2rem;
  }

  main {
    display: grid;
    grid-template-columns: 100%;
    margin: 0 auto;
  }

  /* Clients logos */
  .clients-logos {
    margin-top: 2rem;
  }
  
  .desktop-logos {
    display: none;
  }
  
  .mobile-logos {
    display: block;
  }

  /* Images */
  .desktop-img {
    display: none;
  }
  .mobile-img {
    display: block;
    margin-top: 3rem;
  }

  .cta-btns,
  .menu-items {
    display: none;
  }

  main h1 {
    font-size: 2.5rem;
  }

  /* Client Logos */
  .clients-logos img {
    width: 4.5rem;
    margin-right: 0.8rem;
  }

  .attribution {
    width: 13rem;
    margin: 8rem auto 0 auto;
    text-align: center;
  }
}
```
项目响应式的代码

完整的项目代码

这就是我们在这篇文章中一起构建的项目：

这是完整的HTML代码：
```
  
    
    
    
    
    
    
    
    

    Web Layout | Landing Page

    
  
  
    
      
        snap
        
          
            Features
          
          
            Company
          
          Careers
          About
        
      
      
        Login
        Register
      
      🌚
    
    
      
        Make 
remote work
        
          Get your team in sync, no matter your location. Streamline processes,
          create team rituals, and watch productivity soar.
        
        
        
          
          
          
          
        
      
      
        
        
      
    
    
      Challenge by
      Frontend Mentor. Coded by Ophy Boamah.
    
  
```
项目的HTML代码

这是完整的CSS代码：
```
* {
  font-family: "Epilogue", sans-serif;
  font-size: 1.3rem;
}

.logo {
  font-size: 1.3rem;
}

li {
  list-style: none;
}

nav,
.cta-btns,
.menu-items {
  display: flex;
  align-items: center;
}

nav {
  margin: 0 1.5rem 1.5rem 1.5rem;
  justify-content: space-between;
}

.mobile-nav {
    display: none;
}

.logos-section {
  display: flex;
}

.menu-items li,
.cta-btns li {
  font-size: 0.7rem;
  margin-right: 1rem;
  color: hsl(0, 0%, 41%);
}

.cta-btns li:nth-last-child(1) {
  border: 1px solid gray;
  padding: 0.2rem 0.7rem;
  border-radius: 0.3rem;
}

/* Client Logos */
  
.clients-logos img {
  width: 8rem;
  margin-right: -3rem;
}

.clients-logos {
  margin-top: 1rem;
  margin-left: -2rem;
  display: flex;
  width: 10rem;
}

.clients-logos img:nth-child(2) {
  width: 7rem;
}

/* Main */
main {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  height: 70vh;
  align-items: center;
  justify-content: center;
  margin-left: 8rem;
}
/* Images */
.desktop-img {
  display: block;
}
.mobile-img {
  display: none;
}

main h1 {
  font-size: 3rem;
}

main p {
  font-size: 0.7rem;
  width: 18rem;
  color: hsl(0, 0%, 41%);
  line-height: 0.9rem;
}

main button {
  background-color: hsl(0, 0%, 8%);
  color: #fff;
  border: none;
  font-size: 0.7rem;
  padding: 0.6rem 1rem;
  border-radius: 0.4rem;
  margin-top: 1rem;
}

#text-side {
  margin-top: 3rem;
}
/* Hero Image */
#img-side img {
  width: 20rem;
}

.attribution {
  font-size: 0.7rem;
  text-align: center;
  margin-top: 5.5rem;
}

.attribution a {
  color: hsl(228, 45%, 44%);
  font-size: 0.7rem;
}

/* Responsive */
@media (min-width: 300px) and (max-width: 480px) {
  * {
    font-size: 1rem;
  }

  body {
    height: 100vh;
    width: 100vw;
    overflow-y: hidden;
    overflow-x: hidden;
  }

  nav {
    margin: 0 1.5rem 0 1.5rem;
  }

  nav ul {
    display: none;
  }
  
  .mobile-nav {
    display: block;
    margin-right: 2rem;
  }

  main {
    display: grid;
    grid-template-columns: 100%;
    margin: -3rem auto 0 auto;
  }

  /* Clients logos */
  .clients-logos {
    margin-top: 2rem;
  }
  
  .clients-logos img {
  width: 30rem;
}

.clients-logos {
  margin-top: 1rem;
  display: flex;
}

.clients-logos img:nth-child(2) {
  width: 7rem;
}

  /* Images */
  .desktop-img {
    display: none;
  }
  .mobile-img {
    display: block;
    margin-top: 3rem;
  }

  .cta-btns,
  .menu-items {
    display: none;
  }

  main h1 {
    font-size: 2.5rem;
  }

  /* Client Logos */
  .clients-logos img {
    width: 4.5rem;
    margin-right: 0.8rem;
  }

  .attribution {
    width: 13rem;
    margin: 10rem auto 0 auto;
    text-align: center;
  }
}
```
项目的CSS代码：

总结

作为网页开发者，在编写代码之前，布局应该是你首先考虑的事情。幸运的是，CSS Grid 和 Flexbox 已经彻底改变了我们构建网站和 Web 应用布局的方式。

这使得这些概念成为必须掌握的内容，这样你就可以在网页上指定元素的排列方式。我们已经讨论了基础知识，这样你就可以轻松地增加知识，并创建出漂亮的网页和应用程序。

谢谢阅读👋🏾 希望你觉得这篇文章对你有帮助。

从零开始实现一个玩具版浏览器渲染引擎

woai3c — Tue, 12 Sep 2023 03:35:00 +0000

浏览器渲染原理作为前端必须要了解的知识点之一，在面试中经常会被问到。在一些前端书籍或者培训课程里也会经常被提及，比如 MDN 文档中就有渲染原理的相关描述。

作为一名工作多年的前端，我对于渲染原理自然也是了解的，但是对于它的理解只停留在理论知识层面。所以我决定自己动手实现一个玩具版的渲染引擎。

渲染引擎是浏览器的一部分，它负责将网页内容（HTML、CSS、JavaScript 等）转化为用户可阅读、观看、听到的形式。但是要独自实现一个完整的渲染引擎工作量实在太大了，而且也很困难。于是我决定退一步，打算实现一个玩具版的渲染引擎。刚好 Github 上有一个开源的用 Rust 写的玩具版渲染引擎 robinson，于是决定模仿其源码自己用 JavaScript 实现一遍，并且也在 Github 上开源了从零开始实现一个玩具版浏览器渲染引擎。

这个玩具版的渲染引擎一共分为五个阶段：

分别是：

解析 HTML，生成 DOM 树
解析 CSS，生成 CSS 规则集合
生成 Style 树
生成布局树
绘制

每个阶段的代码我在仓库上都用一个分支来表示。由于直接看整个渲染引擎的代码可能会比较困难，所以我建议大家从第一个分支开始进行学习，从易到难，这样学习效果更好。

现在我们先看一下如何编写一个 HTML 解析器。

HTML 解析器

HTML 解析器的作用就是将一连串的 HTML 文本解析为 DOM 树。比如将这样的 HTML 文本：

test!

解析为一个 DOM 树：

{
    "tagName": "div",
    "attributes": {
        "class": "lightblue test",
        "id": "div",
        "data-index": "1"
    },
    "children": [
        {
            "nodeValue": "test!",
            "nodeType": 3
        }
    ],
    "nodeType": 1
}

写解析器需要懂一些编译原理的知识，比如词法分析、语法分析什么的。但是我们的玩具版解析器非常简单，即使不懂也没有关系，大家看源码就能明白了。

再回到上面的那段 HTML 文本，它的整个解析过程可以用下面的图来表示，每一段 HTML 文本都有对应的方法去解析。

为了让解析器实现起来简单一点，我们需要对 HTML 的功能进行约束：

标签必须要成对出现：...
HTML 属性值必须要有引号包起来 ...
不支持注释
尽量不做错误处理
只支持两种类型节点 Element 和 Text

对解析器的功能进行约束后，代码实现就变得简单多了，现在让我们继续吧。

节点类型

首先，为这两种节点 Element 和 Text 定一个适当的数据结构：

export enum NodeType {
    Element = 1,
    Text = 3,
}

export interface Element {
    tagName: string
    attributes: Record
    children: Node[]
    nodeType: NodeType.Element
}

interface Text {
    nodeValue: string
    nodeType: NodeType.Text
}

export type Node = Element | Text

然后为这两种节点各写一个生成函数：

export function element(tagName: string) {
    return {
        tagName,
        attributes: {},
        children: [],
        nodeType: NodeType.Element,
    } as Element
}

export function text(data: string) {
    return {
        nodeValue: data,
        nodeType: NodeType.Text,
    } as Text
}

这两个函数在解析到元素节点或者文本节点时调用，调用后会返回对应的 DOM 节点。

HTML 解析器的执行过程

下面这张图就是整个 HTML 解析器的执行过程：

HTML 解析器的入口方法为 parse()，从这开始执行直到遍历完所有 HTML 文本为止：

判断当前字符是否为 <，如果是，则当作元素节点来解析，调用 parseElement()，否则调用 parseText()
parseText() 比较简单，一直往前遍历字符串，直至遇到 < 字符为止。然后将之前遍历过的所有字符当作 Text 节点的值。
parseElement() 则相对复杂一点，它首先要解析出当前的元素标签名称，这段文本用 parseTag() 来解析。
然后再进入 parseAttrs() 方法，判断是否有属性节点，如果该节点有 class 或者其他 HTML 属性，则会调用 parseAttr() 把 HTML 属性或者 class 解析出来。
至此，整个元素节点的前半段已经解析完了。接下来需要解析它的子节点。这时就会进入无限递归循环回到第一步，继续解析元素节点或文本节点。
当所有子节点解析完后，需要调用 parseTag()，看看结束标签名和元素节点的开始标签名是否相同，如果相同，则 parseElement() 或者 parse() 结束，否则报错。

HTML 解析器各个方法详解

入口方法 parse()

HTML 的入口方法是 parse(rawText)

parse(rawText: string) {
    this.rawText = rawText.trim()
    this.len = this.rawText.length
    this.index = 0
    this.stack = []

    const root = element('root')
    while (this.index < this.len) {
        this.removeSpaces()
        if (this.rawText[this.index].startsWith('<')) {
            this.index++
            this.parseElement(root)
        } else {
            this.parseText(root)
        }
    }
}

入口方法需要遍历所有文本，在一开始它需要判断当前字符是否是 <，如果是，则将它当作元素节点来解析，调用 parseElement()，否则将当前字符作为文本来解析，调用 parseText()。

解析元素节点 `parseElement()`

private parseElement(parent: Element) {
 // 解析标签
    const tag = this.parseTag()
    // 生成元素节点
    const ele = element(tag)

    this.stack.push(tag)

    parent.children.push(ele)
    // 解析属性
    this.parseAttrs(ele)

    while (this.index < this.len) {
        this.removeSpaces()
        if (this.rawText[this.index].startsWith('<')) {
            this.index++
            this.removeSpaces()
            // 判断是否是结束标签
            if (this.rawText[this.index].startsWith('/')) {
                this.index++
                const startTag = this.stack[this.stack.length - 1]
                // 结束标签
                const endTag = this.parseTag()
                if (startTag !== endTag) {
                    throw Error(`The end tagName ${endTag} does not match start tagName ${startTag}`)
                }

                this.stack.pop()
                while (this.index < this.len && this.rawText[this.index] !== '>') {
                    this.index++
                }

                break
            } else {
                this.parseElement(ele)
            }
        } else {
            this.parseText(ele)
        }
    }

    this.index++
}

parseElement() 会依次调用 parseTag() parseAttrs() 解析标签和属性，然后再递归解析子节点，终止条件是遍历完所有的 HTML 文本。

解析文本节点 `parseText()`

private parseText(parent: Element) {
    let str = ''
    while (
        this.index < this.len
        && !(this.rawText[this.index] === '<' && /\w|\//.test(this.rawText[this.index + 1]))
    ) {
        str += this.rawText[this.index]
        this.index++
    }

    this.sliceText()
    parent.children.push(text(removeExtraSpaces(str)))
}

解析文本相对简单一点，它会一直往前遍历，直至遇到 < 为止。比如这段文本

test!

，经过 parseText() 解析后拿到的文本是 test!。

解析标签 `parseTag()`

在进入 parseElement() 后，首先调用就是 parseTag()，它的作用是解析标签名：

private parseTag() {
    let tag = ''

    this.removeSpaces()

    // get tag name
    while (this.index < this.len && this.rawText[this.index] !== ' ' && this.rawText[this.index] !== '>') {
        tag += this.rawText[this.index]
        this.index++
    }

    this.sliceText()
    return tag
}

比如这段文本

test!

，经过 parseTag() 解析后拿到的标签名是 div。

解析属性节点 `parseAttrs()`

解析完标签名后，接着再解析属性节点：

// 解析元素节点的所有属性
private parseAttrs(ele: Element) {
 // 一直遍历文本，直至遇到 '>' 字符为止，代表  这一段文本已经解析完了
    while (this.index < this.len && this.rawText[this.index] !== '>') {
        this.removeSpaces()
        this.parseAttr(ele)
        this.removeSpaces()
    }

    this.index++
}

// 解析单个属性，例如 class="foo bar"
private parseAttr(ele: Element) {
    let attr = ''
    let value = ''
    while (this.index < this.len && this.rawText[this.index] !== '=' && this.rawText[this.index] !== '>') {
        attr += this.rawText[this.index++]
    }

    this.sliceText()
    attr = attr.trim()
    if (!attr.trim()) return

    this.index++
    let startSymbol = ''
    if (this.rawText[this.index] === "'" || this.rawText[this.index] === '"') {
        startSymbol = this.rawText[this.index++]
    }

    while (this.index < this.len && this.rawText[this.index] !== startSymbol) {
        value += this.rawText[this.index++]
    }

    this.index++
    ele.attributes[attr] = value.trim()
    this.sliceText()
}

parseAttr() 可以将这样的文本 class="test" 解析为一个对象 { class: "test" }。

其他辅助方法

有时不同的节点、属性之间有很多多余的空格，所以需要写一个方法将多余的空格清除掉。

protected removeSpaces() {
    while (this.index < this.len && (this.rawText[this.index] === ' ' || this.rawText[this.index] === '\n')) {
        this.index++
    }

    this.sliceText()
}

同时为了方便调试，开发者经常需要打断点看当前正在遍历的字符是什么。如果以前遍历过的字符串还在，那么是比较难调试的，因为开发者需要根据 index 的值自己去找当前遍历的字符是什么。所以所有解析完的 HTML 文本，都需要截取掉，确保当前的 HTML 文本都是没有被遍历：

protected sliceText() {
    this.rawText = this.rawText.slice(this.index)
    this.len = this.rawText.length
    this.index = 0
}

sliceText() 方法的作用就是截取已经遍历过的 HTML 文本。用下图来做例子，假设当前要解析 div 这个标签名：

那么解析后需要对 HTML 文本进行截取，就像下图这样：

小结

至此，整个 HTML 解析器的逻辑已经讲完了，所有代码加起来 200 行左右，如果不算 TS 各种类型声明，代码只有 100 多行。

CSS 解析器

CSS 样式表是一系列的 CSS 规则集合，而 CSS 解析器的作用就是将 CSS 文本解析为 CSS 规则集合。

div, p {
    font-size: 88px;
    color: #000;
}

例如上面的 CSS 文本，经过解析器解析后，会生成下面的 CSS 规则集合：

[
    {
        "selectors": [
            {
                "id": "",
                "class": "",
                "tagName": "div"
            },
            {
                "id": "",
                "class": "",
                "tagName": "p"
            }
        ],
        "declarations": [
            {
                "name": "font-size",
                "value": "88px"
            },
            {
                "name": "color",
                "value": "#000"
            }
        ]
    }
]

每个规则都有一个 selector 和 declarations 属性，其中 selectors 表示 CSS 选择器，declarations 表示 CSS 的属性描述集合。

export interface Rule {
    selectors: Selector[]
    declarations: Declaration[]
}

export interface Selector {
    tagName: string
    id: string
    class: string
}

export interface Declaration {
    name: string
    value: string | number
}

每一条 CSS 规则都可以包含多个选择器和多个 CSS 属性。

解析 CSS 规则 `parseRule()`

private parseRule() {
    const rule: Rule = {
        selectors: [],
        declarations: [],
    }

    rule.selectors = this.parseSelectors()
    rule.declarations = this.parseDeclarations()

    return rule
}

在 parseRule() 里，它分别调用了 parseSelectors() 去解析 CSS 选择器，然后再对剩余的 CSS 文本执行 parseDeclarations() 去解析 CSS 属性。

解析选择器 `parseSelector()`

private parseSelector() {
    const selector: Selector = {
        id: '',
        class: '',
        tagName: '',
    }

    switch (this.rawText[this.index]) {
        case '.':
            this.index++
            selector.class = this.parseIdentifier()
            break
        case '#':
            this.index++
            selector.id = this.parseIdentifier()
            break
        case '*':
            this.index++
            selector.tagName = '*'
            break
        default:
            selector.tagName = this.parseIdentifier()
    }

    return selector
}

private parseIdentifier() {
    let result = ''
    while (this.index < this.len && this.identifierRE.test(this.rawText[this.index])) {
        result += this.rawText[this.index++]
    }

    this.sliceText()
    return result
}

选择器我们只支持标签名称、前缀为 # 的 ID 、前缀为任意数量的类名 . 或上述的某种组合。如果标签名称为 *，则表示它是一个通用选择器，可以匹配任何标签。

标准的 CSS 解析器在遇到无法识别的部分时，会将它丢掉，然后继续解析其余部分。主要是为了兼容旧浏览器和防止发生错误导致程序中断。我们的 CSS 解析器为了实现简单，没有做这方面的做错误处理。

解析 CSS 属性 `parseDeclaration()`

private parseDeclaration() {
    const declaration: Declaration = { name: '', value: '' }
    this.removeSpaces()
    declaration.name = this.parseIdentifier()
    this.removeSpaces()

    while (this.index < this.len && this.rawText[this.index] !== ':') {
        this.index++
    }

    this.index++ // clear :
    this.removeSpaces()
    declaration.value = this.parseValue()
    this.removeSpaces()

    return declaration
}

parseDeclaration() 会将 color: red; 解析为一个对象 { name: "color", value: "red" }。

小结

CSS 解析器相对来说简单多了，因为很多知识点在 HTML 解析器中已经讲到。整个 CSS 解析器的代码大概 100 多行，如果你阅读过 HTML 解析器的源码，相信看 CSS 解析器的源码会更轻松。

构建样式树

本阶段的目标是写一个样式构建器，输入 DOM 树和 CSS 规则集合，生成一棵样式树 Style tree。

样式树的每一个节点都包含了 CSS 属性值以及它对应的 DOM 节点引用：

interface AnyObject {
    [key: string]: any
}

export interface StyleNode {
    node: Node // DOM 节点
    values: AnyObject // style 属性值
    children: StyleNode[] // style 子节点
}

先来看一个简单的示例：

test
div {
    font-size: 88px;
    color: #000;
}

上述的 HTML、CSS 文本在经过样式树构建器处理后生成的样式树如下：

{
    "node": { // DOM 节点
        "tagName": "div",
        "attributes": {},
        "children": [
            {
                "nodeValue": "test",
                "nodeType": 3
            }
        ],
        "nodeType": 1
    },
    "values": { // CSS 属性值
        "font-size": "88px",
        "color": "#000"
    },
    "children": [ // style tree 子节点
        {
            "node": {
                "nodeValue": "test",
                "nodeType": 3
            },
            "values": { // text 节点继承了父节点样式
                "font-size": "88px",
                "color": "#000"
            },
            "children": []
        }
    ]
}

遍历 DOM 树

现在我们需要遍历 DOM 树。对于 DOM 树中的每个节点，我们都要在样式树中查找是否有匹配的 CSS 规则。

export function getStyleTree(eles: Node | Node[], cssRules: Rule[], parent?: StyleNode) {
    if (Array.isArray(eles)) {
        return eles.map((ele) => getStyleNode(ele, cssRules, parent))
    }

    return getStyleNode(eles, cssRules, parent)
}

匹配选择器

匹配选择器实现起来非常容易，因为我们的CSS 解析器仅支持简单的选择器。只需要查看元素本身即可判断选择器是否与元素匹配。

/**
 * css 选择器是否匹配元素
 */
function isMatch(ele: Element, selectors: Selector[]) {
    return selectors.some((selector) => {
        // 通配符
        if (selector.tagName === '*') return true
        if (selector.tagName === ele.tagName) return true
        if (ele.attributes.id === selector.id) return true

        if (ele.attributes.class) {
            const classes = ele.attributes.class.split(' ').filter(Boolean)
            const classes2 = selector.class.split(' ').filter(Boolean)
            for (const name of classes) {
                if (classes2.includes(name)) return true
            }
        }

        return false
    })
}

当查找到匹配的 DOM 节点后，再将 DOM 节点和它匹配的 CSS 属性组合在一起，生成样式树节点 styleNode：

function getStyleNode(ele: Node, cssRules: Rule[], parent?: StyleNode) {
    const styleNode: StyleNode = {
        node: ele,
        values: getStyleValues(ele, cssRules, parent),
        children: [],
    }

    if (ele.nodeType === NodeType.Element) {
        // 合并内联样式
        if (ele.attributes.style) {
            styleNode.values = { ...styleNode.values, ...getInlineStyle(ele.attributes.style) }
        }

        styleNode.children = ele.children.map((e) => getStyleNode(e, cssRules, styleNode)) as unknown as StyleNode[]
    }

    return styleNode
}

function getStyleValues(ele: Node, cssRules: Rule[], parent?: StyleNode) {
    const inheritableAttrValue = getInheritableAttrValues(parent)

    // 文本节点继承父元素的可继承属性
    if (ele.nodeType === NodeType.Text) return inheritableAttrValue

    return cssRules.reduce((result: AnyObject, rule) => {
        if (isMatch(ele as Element, rule.selectors)) {
            result = { ...result, ...cssValueArrToObject(rule.declarations) }
        }

        return result
    }, inheritableAttrValue)
}

在 CSS 选择器中，不同的选择器优先级是不同的，比如 id 选择器就比类选择器的优先级要高。但是我们这里没有实现选择器优先级，为了实现简单，所有的选择器优先级是一样的。

继承属性

文本节点无法匹配选择器，那它的样式从哪来？答案就是继承，它可以继承父节点的样式。

在 CSS 中存在很多继承属性，即使子元素没有声明这些属性，也可以从父节点里继承。比如字体颜色、字体家族等属性，都是可以被继承的。为了实现简单，这里只支持继承父节点的 color、font-size 属性。

// 子元素可继承的属性，这里只写了两个，实际上还有很多
const inheritableAttrs = ['color', 'font-size']

/**
 * 获取父元素可继承的属性值
 */
function getInheritableAttrValues(parent?: StyleNode) {
    if (!parent) return {}
    const keys = Object.keys(parent.values)
    return keys.reduce((result: AnyObject, key) => {
        if (inheritableAttrs.includes(key)) {
            result[key] = parent.values[key]
        }

        return result
    }, {})
}

内联样式

在 CSS 中，内联样式的优先级是除了 !important 之外最高的。

我们可以在调用 getStyleValues() 函数获得当前 DOM 节点的 CSS 属性值后，再去取当前节点的内联样式值。并对当前 DOM 节点的 CSS 样式值进行覆盖。

styleNode.values = { ...styleNode.values, ...getInlineStyle(ele.attributes.style) }

function getInlineStyle(str: string) {
    str = str.trim()
    if (!str) return {}
    const arr = str.split(';')
    if (!arr.length) return {}

    return arr.reduce((result: AnyObject, item: string) => {
        const data = item.split(':')
        if (data.length === 2) {
            result[data[0].trim()] = data[1].trim()
        }

        return result
    }, {})
}

布局树

第四阶段讲的是如何将样式树转化为布局树，也是整个渲染引擎相对比较复杂的部分。

CSS 盒子模型

在 CSS 中，所有的 DOM 节点都可以当作一个盒子。这个盒子模型包含了内容、内边距、边框、外边距以及在页面中的位置信息。

我们可以用以下的数据结构来表示盒子模型：

export default class Dimensions {
    content: Rect
    padding: EdgeSizes
    border: EdgeSizes
    margin: EdgeSizes
}

export default class Rect {
    x: number
    y: number
    width: number
    height: number
}

export interface EdgeSizes {
    top: number
    right: number
    bottom: number
    left: number
}

块布局和内联布局

CSS 的 display 属性决定了盒子在页面中的布局方式。display 的类型有很多种，例如 block、inline、flex 等等，但这里只支持 block 和 inline 两种布局方式，并且所有盒子的默认布局方式为 display: inline。

我会用伪 HTML 代码来描述它们之间的区别：

块布局会将盒子从上至下的垂直排列。

内联布局则会将盒子从左至右的水平排列。

如果容器内同时存在块布局和内联布局，则会用一个匿名布局将内联布局包裹起来。

这样就能将内联布局的盒子和其他块布局的盒子区别开来。

通常情况下内容是垂直增长的。也就是说，在容器中添加子节点通常会使容器更高，而不是更宽。另一种说法是，默认情况下，子节点的宽度取决于其容器的宽度，而容器的高度取决于其子节点的高度。

布局树

布局树是所有盒子节点的集合。

export default class LayoutBox {
 dimensions: Dimensions
 boxType: BoxType
 children: LayoutBox[]
 styleNode: StyleNode
}

盒子节点的类型可以是 block、inilne 和 anonymous。

export enum BoxType {
    BlockNode = 'BlockNode',
    InlineNode = 'InlineNode',
    AnonymousBlock = 'AnonymousBlock',
}

我们构建样式树时，需要根据每一个 DOM 节点的 display 属性来生成对应的盒子节点。

export function getDisplayValue(styleNode: StyleNode) {
    return styleNode.values?.display ?? Display.Inline
}

如果 DOM 节点 display 属性的值为 none，则在构建布局树的过程中，无需将这个 DOM 节点添加到布局树上，直接忽略它就可以了。

如果一个块节点包含一个内联子节点，则需要创建一个匿名块（实际上就是块节点）来包含它。如果一行中有多个子节点，则将它们全部放在同一个匿名容器中。

function buildLayoutTree(styleNode: StyleNode) {
    if (getDisplayValue(styleNode) === Display.None) {
        throw new Error('Root node has display: none.')
    }

    const layoutBox = new LayoutBox(styleNode)

    let anonymousBlock: LayoutBox | undefined
    for (const child of styleNode.children) {
        const childDisplay = getDisplayValue(child)
        // 如果 DOM 节点 display 属性值为 none，直接跳过
        if (childDisplay === Display.None) continue

        if (childDisplay === Display.Block) {
            anonymousBlock = undefined
            layoutBox.children.push(buildLayoutTree(child))
        } else {
         // 创建一个匿名容器，用于容纳内联节点
            if (!anonymousBlock) {
                anonymousBlock = new LayoutBox()
                layoutBox.children.push(anonymousBlock)
            }

            anonymousBlock.children.push(buildLayoutTree(child))
        }
    }

    return layoutBox
}

遍历布局树

现在开始构建布局树，入口函数是 getLayoutTree()：

export function getLayoutTree(styleNode: StyleNode, parentBlock: Dimensions) {
    parentBlock.content.height = 0
    const root = buildLayoutTree(styleNode)
    root.layout(parentBlock)
    return root
}

它将遍历样式树，利用样式树节点提供的相关信息，生成一个 LayoutBox 对象，然后调用 layout() 方法。计算每个盒子节点的位置、尺寸信息。

在本节内容的开头有提到过，盒子的宽度取决于其父节点，而高度取决于子节点。这意味着，我们的代码在计算宽度时需要自上而下遍历树，这样它就可以在知道父节点的宽度后设置子节点的宽度。然后自下而上遍历以计算高度，这样父节点的高度就可以在计算子节点的相关信息后进行计算。

layout(parentBlock: Dimensions) {
 // 子节点的宽度依赖于父节点的宽度，所以要先计算当前节点的宽度，再遍历子节点
    this.calculateBlockWidth(parentBlock)
    // 计算盒子节点的位置
    this.calculateBlockPosition(parentBlock)
    // 遍历子节点并计算对位置、尺寸信息
    this.layoutBlockChildren()
    // 父节点的高度依赖于其子节点的高度，所以计算子节点的高度后，再计算自己的高度
    this.calculateBlockHeight()
}

这个方法执行布局树的单次遍历，向下执行宽度计算，向上执行高度计算。一个真正的布局引擎可能会执行几次树遍历，有些是自上而下的，有些是自下而上的。

计算宽度

现在，我们先来计算盒子节点的宽度，这部分比较复杂，需要详细的讲解。

首先，我们要拿到当前节点的 width padding border margin 等信息：

calculateBlockWidth(parentBlock: Dimensions) {
 // 初始值
 const styleValues = this.styleNode?.values || {}

 // 初始值为 auto
 let width = styleValues.width ?? 'auto'
 let marginLeft = styleValues['margin-left'] || styleValues.margin || 0
 let marginRight = styleValues['margin-right'] || styleValues.margin || 0

 let borderLeft = styleValues['border-left'] || styleValues.border || 0
 let borderRight = styleValues['border-right'] || styleValues.border || 0

 let paddingLeft = styleValues['padding-left'] || styleValues.padding || 0
 let paddingRight = styleValues['padding-right'] || styleValues.padding || 0

 // 拿到父节点的宽度，如果某个属性为 'auto'，则将它设为 0
 let totalWidth = sum(width, marginLeft, marginRight, borderLeft, borderRight, paddingLeft, paddingRight)
 // ...

如果这些属性没有设置，就使用 0 作为默认值。拿到当前节点的总宽度后，还需要和父节点对比一下是否相等。如果宽度或边距设置为 auto，则可以对这两个属性进行适当展开或收缩以适应可用空间。所以现在需要对当前节点的宽度进行检查。

const isWidthAuto = width === 'auto'
const isMarginLeftAuto = marginLeft === 'auto'
const isMarginRightAuto = marginRight === 'auto'

// 当前块的宽度如果超过了父元素宽度，则将它的可扩展外边距设为 0
if (!isWidthAuto && totalWidth > parentWidth) {
    if (isMarginLeftAuto) {
        marginLeft = 0
    }

    if (isMarginRightAuto) {
        marginRight = 0
    }
}

// 根据父子元素宽度的差值，去调整当前元素的宽度
const underflow = parentWidth - totalWidth

// 如果三者都有值，则将差值填充到 marginRight
if (!isWidthAuto && !isMarginLeftAuto && !isMarginRightAuto) {
    marginRight += underflow
} else if (!isWidthAuto && !isMarginLeftAuto && isMarginRightAuto) {
 // 如果右边距是 auto，则将 marginRight 设为差值
    marginRight = underflow
} else if (!isWidthAuto && isMarginLeftAuto && !isMarginRightAuto) {
 // 如果左边距是 auto，则将 marginLeft 设为差值
    marginLeft = underflow
} else if (isWidthAuto) {
    // 如果只有 width 是 auto，则将另外两个值设为 0
    if (isMarginLeftAuto) {
        marginLeft = 0
    }

    if (isMarginRightAuto) {
        marginRight = 0
    }

    if (underflow >= 0) {
        // 展开宽度，填充剩余空间，原来的宽度是 auto，作为 0 来计算的
        width = underflow
    } else {
        // 宽度不能为负数，所以需要调整 marginRight 来代替
        width = 0
        // underflow 为负数，相加实际上就是缩小当前节点的宽度
        marginRight += underflow
    }
} else if (!isWidthAuto && isMarginLeftAuto && isMarginRightAuto) {
    // 如果只有 marginLeft 和 marginRight 是 auto，则将两者设为 underflow 的一半
    marginLeft = underflow / 2
    marginRight = underflow / 2
}

详细的计算过程请看上述代码，重要的地方都已经标上注释了。

通过对比当前节点和父节点的宽度，我们可以拿到一个差值：

// 根据父子元素宽度的差值，去调整当前元素的宽度
const underflow = parentWidth - totalWidth

如果这个差值为正数，说明子节点宽度小于父节点；如果差值为负数，说明子节点大于父节。上面这段代码逻辑其实就是根据 underflow width padding margin 等值对子节点的宽度、边距进行调整，以适应父节点的宽度。

定位

计算当前节点的位置相对来说简单一点。这个方法会根据当前节点的 margin border padding 样式以及父节点的位置信息对当前节点进行定位：

calculateBlockPosition(parentBlock: Dimensions) {
 const styleValues = this.styleNode?.values || {}
 const { x, y, height } = parentBlock.content
 const dimensions = this.dimensions

 dimensions.margin.top = transformValueSafe(styleValues['margin-top'] || styleValues.margin || 0)
 dimensions.margin.bottom = transformValueSafe(styleValues['margin-bottom'] || styleValues.margin || 0)

 dimensions.border.top = transformValueSafe(styleValues['border-top'] || styleValues.border || 0)
 dimensions.border.bottom = transformValueSafe(styleValues['border-bottom'] || styleValues.border || 0)

 dimensions.padding.top = transformValueSafe(styleValues['padding-top'] || styleValues.padding || 0)
 dimensions.padding.bottom = transformValueSafe(styleValues['padding-bottom'] || styleValues.padding || 0)

 dimensions.content.x = x + dimensions.margin.left + dimensions.border.left + dimensions.padding.left
 dimensions.content.y = y + height + dimensions.margin.top + dimensions.border.top + dimensions.padding.top
}

function transformValueSafe(val: number | string) {
    if (val === 'auto') return 0
    return parseInt(String(val))
}

比如获取当前节点内容区域的 x 坐标，计算方式如下：

dimensions.content.x = x + dimensions.margin.left + dimensions.border.left + dimensions.padding.left

遍历子节点

在计算高度之前，需要先遍历子节点，因为父节点的高度需要根据它下面子节点的高度进行适配。

layoutBlockChildren() {
    const { dimensions } = this
    for (const child of this.children) {
        child.layout(dimensions)
        // 遍历子节点后，再计算父节点的高度
        dimensions.content.height += child.dimensions.marginBox().height
    }
}

每个节点的高度就是它上下两个外边距之间的差值，所以可以通过 marginBox() 获得高度：

export default class Dimensions {
    content: Rect
    padding: EdgeSizes
    border: EdgeSizes
    margin: EdgeSizes

    constructor() {
        const initValue = {
            top: 0,
            right: 0,
            bottom: 0,
            left: 0,
        }

        this.content = new Rect()

        this.padding = { ...initValue }
        this.border = { ...initValue }
        this.margin = { ...initValue }
    }

    paddingBox() {
        return this.content.expandedBy(this.padding)
    }

    borderBox() {
        return this.paddingBox().expandedBy(this.border)
    }

    marginBox() {
        return this.borderBox().expandedBy(this.margin)
    }
}
export default class Rect {
    x: number
    y: number
    width: number
    height: number

    constructor() {
        this.x = 0
        this.y = 0
        this.width = 0
        this.height = 0
    }

    expandedBy(edge: EdgeSizes) {
        const rect = new Rect()
        rect.x = this.x - edge.left
        rect.y = this.y - edge.top
        rect.width = this.width + edge.left + edge.right
        rect.height = this.height + edge.top + edge.bottom

        return rect
    }
}

遍历子节点并执行完相关计算方法后，再将各个子节点的高度进行相加，得到父节点的高度。

height 属性

默认情况下，节点的高度等于其内容的高度。但如果手动设置了 height 属性，则需要将节点的高度设为指定的高度：

calculateBlockHeight() {
    // 如果元素设置了 height，则使用 height，否则使用 layoutBlockChildren() 计算出来的高度
    const height = this.styleNode?.values.height
    if (height) {
        this.dimensions.content.height = parseInt(height)
    }
}

为了简单起见，我们不需要实现外边距折叠。

小结

布局树是渲染引擎最复杂的部分，这一阶段结束后，我们就了解了布局树中每个盒子节点在页面中的具体位置和尺寸信息。下一步，就是如何把布局树渲染到页面上了。

绘制

绘制阶段主要是根据布局树中各个节点的位置、尺寸信息将它们绘制到页面。目前大多数计算机使用光栅（raster，也称为位图）显示技术。将布局树各个节点绘制到页面的这个过程也被称为“光栅化”。

浏览器通常在图形API和库（如Skia、Cairo、Direct2D等）的帮助下实现光栅化。这些API提供绘制多边形、直线、曲线、渐变和文本的功能。

实际上绘制才是最难的部分，但是这一步我们有现成的 canvas 库可以用，不用自己实现一个光栅器，所以相对来说就变得简单了。在真正开始绘制阶段之前，我们先来学习一些关于计算机如何绘制图像、文本的基础知识，有助于我们理解光栅化的具体实现过程。

计算机如何绘制图像、文本

在计算机底层进行像素绘制属于硬件操作，它依赖于屏幕和显卡接口的具体细节。为了简单起点，我们可以用一段内存区域来表示屏幕，内存的一个 bit 就代表了屏幕中的一个像素。比如在屏幕中的 (x,y) 坐标绘制一个像素，可以用 memory[x + y * rowSize] = 1 来表示。从屏幕左上角开始，列是从左至右开始计数，行是从上至下开始计数。因此屏幕最左上角的坐标是 (0,0)。

为了简单起见，我们用 1 bit 来表示屏幕的一个像素，0 代表白色，1 代表黑色。屏幕每一行的长度用变量 rowSzie 表示，每一列的高度用 colSize 表示。

绘制线条

如果我们要在计算机上绘制一条直线，那么只要知道计算机的起点坐标 (x1,y1) 和终点坐标 (x2,y2) 就可以了。

然后根据 memory[x + y * rowSize] = 1 公式，将 (x1,y1) 至 (x2,y2) 之间对应的内存区域置为 1，这样就画出来了一条直线。

绘制文本

为了在屏幕上显示文本，首先必须将物理上基于像素点的屏幕，在逻辑上以字符为单位划分成若干区域，每个区域能输出单个完整的字符。假设有一个 256 行 512 列的屏幕，如果为每个字符分配一个 11*8 像素的网格，那么屏幕上总共能显示 23 行，每行 64 个字符（还有 3 行像素没使用）。

有了这些前提条件后，我们现在打算在屏幕上画一个 A：

上图的 A 在内存区域中用 11*8 像素的网格表示。为了在内存区域中绘制它，我们可以用一个二维数组来表示它：

const charA = [
 [0, 0, 1, 1, 0, 0, 0, 0], // 按从左至右的顺序来读取 bit，转换成十进制数字就是 12
 [0, 1, 1, 1, 1, 0, 0, 0], // 30
 [1, 1, 0, 0, 1, 1, 0, 0], // 51
 [1, 1, 0, 0, 1, 1, 0, 0], // 51
 [1, 1, 1, 1, 1, 1, 0, 0], // 63
 [1, 1, 0, 0, 1, 1, 0, 0], // 51
 [1, 1, 0, 0, 1, 1, 0, 0], // 51
 [1, 1, 0, 0, 1, 1, 0, 0], // 51
 [1, 1, 0, 0, 1, 1, 0, 0], // 51
 [0, 0, 0, 0, 0, 0, 0, 0], // 0
 [0, 0, 0, 0, 0, 0, 0, 0], // 0
]

上面二维数组的第一项，代表了第一行内存区域每个 bit 的取值。一共 11 行，画出了一个字母 A。

如果我们为 26 个字母都建一个映射表，按 ascii 的编码来排序，那么 charsMap[65] 就代表字符 A，当用户在键盘上按下 A 键时，就把 charsMap[65] 对应的数据输出到内存区域上，这样屏幕上就显示了一个字符 A。

绘制布局树

科普完关于绘制屏幕的基础知识后，我们现在正式开始绘制布局树（为了方便，我们使用 node-canvas 库）。

首先要遍历整个布局树，然后逐个节点进行绘制：

function renderLayoutBox(layoutBox: LayoutBox, ctx: CanvasRenderingContext2D, parent?: LayoutBox) {
    renderBackground(layoutBox, ctx)
    renderBorder(layoutBox, ctx)
    renderText(layoutBox, ctx, parent)
    for (const child of layoutBox.children) {
        renderLayoutBox(child, ctx, layoutBox)
    }
}

这个函数对每个节点依次绘制背景色、边框、文本，然后再递归绘制所有子节点。

默认情况下，HTML 元素按照它们出现的顺序进行绘制。如果两个元素重叠，则后一个元素将绘制在前一个元素之上。这种排序反映在我们的布局树中，它将按照元素在 DOM 树中出现的顺序绘制元素。

绘制背景色

function renderBackground(layoutBox: LayoutBox, ctx: CanvasRenderingContext2D) {
    const { width, height, x, y } = layoutBox.dimensions.borderBox()
    ctx.fillStyle = getStyleValue(layoutBox, 'background')
    ctx.fillRect(x, y, width, height)
}

首先拿到布局节点的位置、尺寸信息，以 x,y 作为起点，绘制矩形区域。并且以 CSS 属性 background 的值作为背景色进行填充。

绘制边框

function renderBorder(layoutBox: LayoutBox, ctx: CanvasRenderingContext2D) {
    const { width, height, x, y } = layoutBox.dimensions.borderBox()
    const { left, top, right, bottom } = layoutBox.dimensions.border
    const borderColor = getStyleValue(layoutBox, 'border-color')
    if (!borderColor) return

    ctx.fillStyle = borderColor

    // left
    ctx.fillRect(x, y, left, height)
    // top
    ctx.fillRect(x, y, width, top)
    // right
    ctx.fillRect(x + width - right, y, right, height)
    // bottom
    ctx.fillRect(x, y + height - bottom, width, bottom)
}

绘制边框，其实我们绘制的是四个矩形，每一个矩形就是一条边框。

绘制文本

function renderText(layoutBox: LayoutBox, ctx: CanvasRenderingContext2D, parent?: LayoutBox) {
    if (layoutBox.styleNode?.node.nodeType === NodeType.Text) {
        // get AnonymousBlock x y
        const { x = 0, y = 0, width } = parent?.dimensions.content || {}
        const styles = layoutBox.styleNode?.values || {}
        const fontSize = styles['font-size'] || '14px'
        const fontFamily = styles['font-family'] || 'serif'
        const fontWeight = styles['font-weight'] || 'normal'
        const fontStyle = styles['font-style'] || 'normal'

        ctx.fillStyle = styles.color
        ctx.font = `${fontStyle} ${fontWeight} ${fontSize} ${fontFamily}`
        ctx.fillText(layoutBox.styleNode?.node.nodeValue, x, y + parseInt(fontSize), width)
    }
}

通过 canvas 的 fillText() 方法，我们可以很方便的绘制带有字体风格、大小、颜色的文本。

输出图片

绘制完成后，我们可以借助 canvas 的 API 输出图片。下面用一个简单的示例来演示一下：


    
        
            test1!
            
                foo
            
        
    

* {
    display: block;
}

div {
    font-size: 14px;
    width: 400px;
    background: #fff;
    margin-bottom: 20px;
    display: block;
    background: lightblue;
}

.lightblue {
    font-size: 16px;
    display: block;
    width: 200px;
    height: 200px;
    background: blue;
    border-color: green;
    border: 10px;
}

.foo {
    width: 100px;
    height: 100px;
    background: red;
    color: yellow;
    margin-left: 50px;
}

body {
    display: block;
    font-size: 88px;
    color: #000;
}

上面这段 HTML、CSS 代码经过渲染引擎程序解析后生成的图片如下：

总结

至此，这个玩具版的渲染引擎就完成了。虽然这个玩具并没有什么用，但如果能通过实现它来了解真实的渲染引擎是如何运作的，从这个角度来看，它还是“有用”的。

参考资料

CSS 单位指南：CSS em、rem、vh、vw 等详解

Chengjun.L — Thu, 13 Apr 2023 02:29:00 +0000

原文： CSS Unit Guide: CSS em, rem, vh, vw, and more, Explained

许多 CSS 属性如 width、margin、padding 和 font-size 都需要一个长度，而 CSS 有许多不同的方法来表达长度。

在 CSS 中，长度是一个数字，一个没有空格的单位。例如，5px、0.9em，等等。

在 CSS 中，一般有两种用于长度和尺寸的单位：绝对单位和相对单位。

绝对长度单位

绝对长度单位是基于一个实际的物理单位，通常被认为是跨设备的相同尺寸。但是，根据你的屏幕尺寸和质量，或者你的浏览器或操作系统的设置，可能会有一些例外。

下面是 CSS 中一些常见的绝对长度单位：

`px`

像素，或 px，是 CSS 中最常见的长度单位之一。

在 CSS 中，1 像素被正式定义为 1/96 英寸。所有其他的绝对长度单位都是基于这个像素的定义。

但是，在最初制定这一标准时，大多数显示器的分辨率为 1024×768，DPI（每英寸点数）为 96。

现代设备的屏幕具有更高的分辨率和 DPI，所以 96 像素长的线可能无法精确测量到 1 英寸，这取决于设备的情况。

尽管以像素为单位的尺寸在不同的设备上会有所不同，但一般认为在屏幕上使用像素更好。

如果你知道你的页面将在高质量的打印机上打印，那么你可以考虑使用另一个单位，比如 cm 或 mm。

你可以在这篇文章中了解更多关于像素单位的历史，以及为什么 CSS 英寸并不总是与物理英寸相匹配。

`cm`

厘米

在 CSS 中，1cm 大约是 37.8 个像素，或约为 25.2/64 英寸。

`mm`

毫米

在 CSS 中，1mm 大约是 3.78 像素，或 1/10 厘米。

`in`

英寸

在 CSS 中，1 英寸大约是 96 个像素，或大约 2.54 厘米。

`pt`

磅

在 CSS 中，1pt 大约是 1.3333 像素，或 1/72 英寸。

`pc`

派卡

在 CSS 中，1pc 大约是 16 个像素，或 1/6 英寸。

相对长度单位

相对长度单位是相对于另一个元素的大小或设置。例如，一个元素的相对字体大小可以用父元素的字体大小来计算。

下面是一些常见的相对长度单位：

`em`

CSS 的 em 单位的名字来自于一个排版单位。在字体排印学中，em 这个词“最初是指所使用的字体和尺寸中大写字母 M 的宽度”。

当与 font-size 属性一起使用时，em 继承其父元素的 font-size 大小：

.container {
  font-size: 16px;
}

.container p {
  font-size: 1em;
}

.container h2 {
  font-size: 3em;
}

.container h3 {
  font-size: 2em;
}

在这个例子中，p 的 font-size 是 16px（16 * 1）。同时，h2 的 font-size 为 48px（16 * 3），h3 为 32px（16 * 2）。

如果 em 与另一个属性（如 width）一起使用，em 是用目标元素的大小来计算的。

`rem`

根 em。这种相对单位不受父元素的大小或设置的影响，而是以文档的根为基础。对于网站来说，文档的根是 html 元素。

p {
  font-size: 1.25rem;
}

在大多数浏览器中，默认的字体大小是 16，所以 html 元素的 font-size 是 16px。所以在这种情况下，p 是 20px（16 * 1.25）。

但是如果用户改变了他们浏览器的默认字体大小，那么 p 的 font-size 就会相应地放大或缩小。

`%`

百分比，或相对于父级大小的百分比大小：

div {
  width: 400px;
}

div p {
  width: 75%;
}

由于父级的宽度是 400px，所以内部段落的宽度是 300px（400 * .75）。

`vw`

视图宽度，1vw 是视口宽度的 1%。

比如说：

body {
  width: 100vw;
}

由于 body 元素被设置为 100vw，即视口宽度的 100%，所以它将占用它所能获得的全部宽度。因此，如果你把浏览器的大小调整为 690 像素宽，那么 body 就会占据所有 690 像素的宽度。

`vh`

视图高度，1vh 是视口高度的 1%。

例如：

div {
  height: 50vh;
}

该 div 将填充视口高度的 50%。因此，如果浏览器窗口的高度是 900 像素，那么该 div 的高度将是 450 像素。

`ex`

CSS ex 单位的名称来自于字体排印学中的 x-字高，即“字体中字母 x 的高度”。在许多字体中，小写的 x 字符通常是最大字符高度的一半。

在 CSS 中，1ex 是字体的 x-字高，或 1em 的一半。

但是，由于小写字母 x 的大小可以根据字体的不同而有很大的变化，因此 CSS 的 ex 单位很少被使用。

`ch`

字符单位，CSS 的 ch 单位被定义为字体的 0（零，或U+0030）字符的宽度。

虽然 ch 单位对于像 Courier 这样的单行线/固定宽度的字体来说是一种精确的测量，但对于像 Arial 这样的比例字体来说，它可能是不可预测的。

例如，如果你的字体是 Courier，而你把一个元素的宽度设置为 60ch，那么这个元素的宽度就正好是 60 个字符。

但是，如果你的字体是 Arial，而你把一个元素的宽度设置为 60ch，那么就不知道这个元素会有多宽——字符可能会溢出容器，也可能不够。

Source

请看这篇文章，了解对 ch 单位的深入解释，并看一些例子。

`vmin` 和 `vmax`

视口最小（vmin）和视口最大（vmax）的单位是基于 vw 和 vh 的值。

1vmin 是视口最小尺寸的 1%，而 1vmax 是视口最大尺寸的 1%。

例如，想象一个宽 1200 像素、高 600 像素的浏览器窗口。在这种情况下，1vmin 是 6px（vh 的 1%，即 600 像素时较小值）。同时，1vmax 是 12px（vh 的 1%，即 1200 像素时的较大值）。

如何使用 CSS Font Weight 属性在 HTML 中加粗文本

Miya Liu — Mon, 27 Mar 2023 04:29:00 +0000

原文： CSS Bold – How to Bold Text in HTML with Font Weight

CSS 是 web 开发者的一个强大工具。它允许你以各种方式设置 HTML 内容的样式。

一种常见的格式化技术是使用 font-weight 属性将文本加粗。粗体字可以增加对关键信息的强调，创造视觉对比，并提高内容的可读性。

在这篇文章中，你将学习如何使用 CSS font-weight 属性在 HTML 中将文本加粗。无论你是初学者还是有经验的开发者，本文都将为你提供一个全面的指南，让你在 HTML 内容中使用 CSS 创建粗体文本。

理解 Font-Weight 属性

font-weight 属性是一个 CSS 属性，它决定了文本的粗细程度，数值越高表示字体越粗。

font-weight 属性接受各种数值，包括数字和关键字值。

数值范围从 100 到900，增量为 100。正常粗细的值是 400，而 700 的值被认为是粗体。一些常用的关键字值包括 bold、bolder、lighter 和 normal。

如何用 CSS 创建粗体字

在 HTML 中使用 CSS 创建粗体字是一个简单的过程，可以通过几种方式实现。你可以选择使用任何形式的样式，如内联、内部或外部样式。

如何用内联样式创建粗体字

你可以使用内联样式，将 font-weight 属性直接应用于特定的 HTML 元素，就像这样：

This is a bold text

然而，内联样式会使你的 HTML 代码变得杂乱无章，难以维护，特别是当许多元素需要相同的样式时。

如何用内部样式创建粗体字

内部样式设计允许你在 HTML 文档的 head 部分使用 style 标签来应用 CSS 样式，像这样：


  


  This is a bold text

这种方法在对一个页面上的多个元素应用相同的样式时很有用。

如何用外部样式创建粗体字

外部样式设计包括创建一个单独的 CSS 文件，并使用 link 标签将其链接到你的 HTML 文档中，像这样：

CSS 文件可以包含你网站上所有 HTML 元素的样式，你可以很容易地对这些样式进行修改，而不必修改 HTML 代码。

p {
  font-weight: bold;
}

在 HTML 中使用粗体字的最佳实践

虽然在 HTML 中使用粗体字可以帮助强调重要的信息，但必须遵循最佳实践，以确保文本的可读性和可访问性。

以下是在 HTML 中使用粗体字的一些最佳实践：

选择正确的 font-weight：在使用粗体字时，必须选择正确的 font-weight，以确保文本清晰易读。

较粗的 font-weight 可能适合于标题，较细的字体可能更适合于正文。同样重要的是，要确保粗体字不会太过压抑，也不会影响到页面上的其他元素。

平衡粗体字和其他格式化选项的关系：虽然粗体字可以成为吸引人们注意重要信息的有力方式，但重要的是要将它与其他格式选项相平衡，以创造视觉层次。

你可以使用其他样式，如斜体、下划线或不同的字体大小或颜色，来区分不同的重要程度。

避免过度使用粗体字：过度使用粗体字会使文字更难阅读，并有损页面的整体设计。

重要的是要少用粗体字，只在有必要强调重要信息的地方使用。避免在整个段落或文本块中使用粗体字，因为这可能使读者难以区分重要信息和普通文本。

测试无障碍性：当使用粗体字时，必须确保所有用户，包括有视力障碍的用户，都能使用。

屏幕阅读器可能难以阅读粗体文本，因此，使用无障碍工具测试页面，以确保粗体字格式正确，兼顾无障碍，是很重要的。

总结

总之，在 HTML 中使用粗体字可以有效地强调重要信息，并创造视觉层次。

通过选择合适的 font-weight，平衡粗体字与其他格式选项，避免过度使用，并进行无障碍测试，你可以确保粗体字保持可读性，并让所有用户都能使用。

谢谢你阅读本文，happy coding！

你可以访问我的网站，阅读我的 188 篇文章。你也可以使用搜索栏来查看我是否写过特定的文章。

如何使用 CSS 组合器来选择和样式元素

Chengjun.L — Mon, 09 Jan 2023 09:22:00 +0000

原文： How to Use CSS Combinators to Select and Style Elements

组合器允许你将多个选择器组合起来，以选择 DOM 中的特定元素。在这篇文章中，我将用实例来解释四个组合器。

在我上一篇关于 CSS 选择器类型的文章中，我分享了七种类型的选择器，用于选择你想要为其设置样式的元素。

如果你还没有看过那篇文章，我建议你在阅读这篇文章之前先读一读它。

在本教程中，我讲的是组合器，它允许你使用多种选择器类型来选择元素。这种选择是基于符合指定的多个选择器类型的元素之间的关系。

如果你喜欢的话，这篇文章还有一个视频版本。

下面是 CSS 中的四个组合器以及它们的工作原理。

如何使用后代组合器

这个组合器允许你选择一个元素，它是另一个元素的后代。这里的“后代”可以是孩子、孙子、曾孙、曾曾曾......等等。

要使用这个组合器，你要在选择器之间输入一个空格，像这样：

.container p {
  color: red;
}

上面这个样式声明选择了 p 元素，这些元素是具有 div class 的元素的后代。

它在 HTML 中是这样的：

I am the first p


    I am the second p
    
    
        I am the third p
    


I am the last p

结果如下：

从上面的结果中，你可以看到第二个和第三个 p 被设置了样式。这是因为它们都是 .container 元素的后代。第二个 p 是直接子元素，而第三个 p 是孙子元素（div 的直接子元素），但它们都是后代。

你也可以像这样使用多个选择器：

.container div p {
  color: red;
}

结果如下：

正如你所看到的，只有第三个 p 被设置了样式，因为这个元素是 div 元素的后代，而 div 又是具有 container class 的元素的后代。

如何使用子代组合器

子代组合器匹配子代、孙代，以此类推。子代组合器选择的元素是另一个元素的直接子代。

你在选择器之间使用大于符号（>）来指定一个选择器是另一个的直接子代。

下面是一个例子：

.container > p {
  color: red;
}

这个样式将选择所有作为 container class 元素的直接子元素的 p 元素。让我们看看这在上面的 HTML 例子中是如何运行的：

I am the first p


    I am the second p
    
    
        I am the third p
    


I am the last p

结果如下：

正如你在这里看到的，只有第二个 p 受到影响。尽管第二个和第三个 p 元素是 container class 元素的后代，但只有第二个是直接子元素，正如我们在 CSS 中所指定的那样。

你也可以像这样用这个组合器使用多个选择器：

.container > div > p {
  color: red;
}

这种样式设计将匹配所有 p 元素，这些元素是 div 元素的直接子代，而 div 元素又是 container class 元素的直接子代。

如何使用相邻兄弟组合器

我们已经看过了后代，那么兄弟姐妹呢——就像在一个家庭环境中一样？在选择器之间使用的相邻兄弟组合器，可以匹配作为另一个元素的兄弟的元素。

要使用这个组合器，你要输入 ~ 符号。下面是一个例子：

div ~ p {
  color: red;
}

这种样式设计选择了所有与 div 元素同级的 p 元素。比方说，我们有以下的 HTML：

I am the first p


    I am the second p
    
    
        I am the third p
    


I am the last p
I am the very last p

结果如下：

最后两个 p 有颜色样式。这是因为 div（具有 container class）和这些 p 是兄弟元素。

然而，如果你注意到，第一个 p 也是该 div 的兄弟元素。那么为什么它没有被设置样式呢？

原因是，在我们的 CSS 中，我们是这样使用子代组合器的：

div ~ p

这个选择意味着它只选择 div 元素后面的 p 兄弟元素。之前的兄弟元素不受影响。

如果选择变为：

p ~ div

然后它将选择在 p 元素之后的 div 的同级元素。

如何使用相邻组合器

这个组合器与兄弟组合器类似。不同的是，兄弟组合器匹配一个元素之后的所有兄弟元素，而相邻组合器只匹配一个元素之后的紧接着的兄弟元素。

要使用这个组合器，你要使用 + 符号，像这样：

div + p {
  color: red;
}

这种样式会影响到作为 div 元素之后的即时兄弟元素，即 p 元素。比方说，我们有前面的 HTML 例子：

I am the first p


    I am the second p
    
    
        I am the third p
    


I am the last p
I am the very last p

结果如下：

从这个结果中，你可以看到，只有第四个 p 元素被设置了样式。这是因为在我们的 HTML 代码中，这个 p 元素是 div 元素之后的一个紧接着的兄弟元素。

尽管最后一个 p 也是 div 元素之后的同级元素，但它并不是 div 的相邻元素。

总结

正如我们在这篇文章中所看到的，组合器允许你使用多种选择器类型。根据 DOM 中与这些选择器相匹配的元素之间的关系，你可以针对元素进行样式设计。

我们看到的组合器有：

后代组合器：用于选择属于其他元素的后代元素
子代组合器：用于选择属于其他元素的直接子代元素
兄弟组合器：用于选择在其他元素之后的兄弟元素
相邻组合器：用于选择其他元素之后的紧接着的兄弟元素

如果你喜欢这篇文章并从中受益，请和其他人分享它 💜

CSS display:none 和 visibility:hidden 的区别

Chengjun.L — Thu, 05 Jan 2023 12:19:00 +0000

原文： CSS display:none and visibility:hidden – What's the Difference?

display:none 和 visibility:hidden 是 CSS 中的两个样式声明，你可以用它们来隐藏屏幕上的元素。但它们之间有什么区别呢？

在构建应用程序时，有些时候你想在视觉上隐藏元素（不是从 DOM 中删除它们，只是在屏幕上）。你可以用不同的方法来做这件事。

两种常见的方法包括使用值为 none 的 display 属性或值为 hidden 的 visibility 属性。

尽管这两种方法都在视觉上隐藏了元素，但它们使元素响应的方式不同。我将在本文中解释这些差异。

如果你有兴趣，这里有本文的视频版本。

我将通过下面的例子来解释这一切是如何进行。

HTML：

CSS：

.container {
  padding: 20px;
  width: max-content;
  display: flex;
  border: 1px solid black;
}

.block1,
.block2,
.block3 {
  height: 40px;
  width: 120px;
}

.block1 {
  background-color: rgb(224, 110, 49);
  margin-right: 20px;
}

.block2 {
  background-color: rgb(77, 77, 234);
  margin-right: 20px;
}

.block3 {
  background-color: rgb(12, 154, 142);
}

我们有一个 class 为 container 的 div。这个 div 有三个子 div，其 class 分别为 block1、block2 和 block3。我们已经为这些 div 指定了一些样式。第一个 div 子代是 orange，第二个是 blue，第三个是 teal。

结果如下：

如何在 CSS 中使用 `display: none`

display 属性设置了一个元素的显示方式（如 inline 或 block），也决定了一个元素的子元素的布局（如 flex、grid 等等）。

如果该属性的值为 none，那么该元素的显示就被关闭了。这意味着该元素——以及它的子元素——将不会被显示。文档在没有该元素的情况下被渲染，就像它不存在一样。

现在让我们看看 display: none 是如何工作的。下面是一个将此样式应用于 .block2 元素的例子：

.block2 {
  background-color: rgb(77, 77, 234);
  margin-right: 20px;
  display: none;
}

结果如下：

正如你在这里看到的，.container 元素的宽度已经减少。这就像 .block2 元素不存在一样。因为我们在这个元素上使用了 display:none，它在文档中没有被渲染。所以它在屏幕上的空间被其他元素占据。

我们也可以通过在 .block1 元素上添加 display:none 来测试这一点：

.block1 {
  background-color: rgb(224, 110, 49);
  margin-right: 20px;
  display: none;
}

.block2 {
  background-color: rgb(77, 77, 234);
  margin-right: 20px;
  display: none;
}

结果如下：

这里你看到 .block1 和 .block2 没有被渲染，所以它们的空间被占用。

如何在 CSS 中使用 `visibility: hidden`

visibility 属性，顾名思义，指定了一个元素是否可见。但是，这个属性并不影响元素的布局。这是与 layout 属性相比的主要区别。

如果这个属性的值是 hidden，它所应用的元素就会变得不可见。元素的盒子模型所需的空间保持不变，但元素本身被隐藏。

让我们看看这个属性如何被应用于我们上面的例子。下面是这个样式应用于 .block2 元素的结果：

.block2 {
  background-color: rgb(77, 77, 234);
  margin-right: 20px;
  visibility: hidden;
}

结果如下：

正如你在这里注意到的，与 display: none 不同，.block2 元素是不可见的，但其布局保持不变。事实上，这个元素上的 margin-right 仍然存在。只有这个元素本身被隐藏了。

让我们也给 .block1 添加这个样式，看看结果如何：

现在这两个元素都是不可见的，但它们仍然在文档中被渲染，所以它们的空间并没有空出来。

接下来你可能会想，“visibility: hidden 和 opacity: 0 之间有什么区别呢？”

`visibility: hidden` vs `opacity: 0`

这两种样式看起来非常相似。我可以通过在我们上面的例子中把 visibility:hidden 替换为 opacity:0 来告诉你：

.block1 {
  background-color: rgb(224, 110, 49);
  margin-right: 20px;
  opacity: 0;
}

.block2 {
  background-color: rgb(77, 77, 234);
  margin-right: 20px;
  opacity: 0;
}

结果如下：

你可以看到，这个结果和之前的结果在视觉上没有区别。但在元素的行为上是有区别的。

具有 visibility: hidden 的元素是不可交互的。我不知道这是不是最好的说法，但我的意思是，用户不能与这样的元素互动（例如，通过点击）。这是因为这种元素确实是不可见的。

具有 opacity: 0 的元素是可以互动的，因为它们实际上是可见的，只是非常透明。opacity 属性并不指定一个元素的可见性——它只指定透明度。

我们可以用一个例子来验证这个区别。假设 .block2 元素有一个这样的 onclick 属性：

如果你在这个元素上使用 visibility:hidden，点击这个元素所在的空间将不会触发什么。但如果你在这个元素上使用 opacity:0，点击同样的空间将触发警报模式，显示 “hello” 文本。你可以在你的浏览器上测试一下，实际看看这个效果。

`display:none` 和 `visibility:hidden` 的使用示例

这些样式声明可以根据你想实现什么被用于不同的场景。

在我的经验中，当我想隐藏一些内容时，我使用 display:none。想想隐藏一个弹出框、UI 上已经被选中的待办事项，或者页面上的侧边栏。

对内容使用 visibility:hidden 会导致内容的空间被保留，当页面上有空白区域时，会显得有些奇怪。

我唯一使用 visibility:hidden 的时候是当我想在“隐藏”或“显示”一个元素时显示一些动画。display 属性不会在数值之间产生动画，但 visibility 属性可以。我将 visibility 与 opacity 结合起来使用，以实现这种淡入和淡出的动画。

总结

概括地说，display:none、visibility:hidden 和 opacity:0 可以被用来视觉上隐藏元素，但是：

display:none 关闭元素的布局，所以元素不被渲染
visibility:hidden 隐藏元素，而不改变它们的布局
opacity:0 使元素非常透明，但是用户依然可以和元素交互

如果你喜欢这篇文章，请将它分享给其他学习者。😇

CSS 按钮样式——悬停、颜色和背景

Chengjun.L — Tue, 03 Jan 2023 04:19:00 +0000

原文： CSS Button Style – Hover, Color, and Background

在这篇文章中，你将看到如何使用 CSS 来设置一个按钮的样式。

我在这里的目的主要是展示不同的 CSS 规则和样式是如何应用和使用的。我们不会看到太多的设计灵感，也不会讨论样式设计的想法。

相反，这将更多地是对样式本身如何工作、哪些属性是常用的以及它们如何被组合的概述。

你将首先看到如何在 HTML 中创建一个按钮。然后你将学习如何覆盖按钮的默认样式。最后，你将看到如何为按钮的三种不同状态设计样式。

你首先添加按钮元素，它由一个开始标签组成。
class="button" 属性将用于在一个单独的 CSS 文件中对按钮进行样式设置。值 button 可以是你选择的任何其他名称。例如，你可以使用 class="btn"。
文本 Click me! 是按钮内部可见的文本。

任何将被应用于按钮的样式将被放在 spearate style.css 文件中。

你可以通过将这两个文件连接起来，将样式应用到 HTML 内容中。你可以通过标签来实现，这个标签在 index.html 中使用。

在 style.css 文件中，我添加了一些样式，只把按钮放在浏览器窗口的中间位置。

注意，class="button" 是和 .button 选择器一起使用的。这是一种将样式直接应用于按钮的方法。

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

上面的代码将产生以下结果：

按钮的默认样式会根据你所使用的浏览器而有所不同。

这是一个例子，说明在谷歌 Chrome 浏览器上按钮的原始样式是怎样的。

如何改变按钮的默认样式

如何改变按钮的背景颜色

要改变按钮的背景颜色，可以使用 CSS 的 background-color 属性，给它一个你喜欢的颜色值。

在 .button 选择器中，你可以使用 background-color:#0a0a23; 来改变按钮的背景颜色。

.button {
    position: absolute;
    top:50%;
    background-color:#0a0a23;
}

如何改变按钮的文本颜色

文字的默认颜色是黑色，所以当你添加一个深色的背景颜色时，你会发现文字已经消失了。

另一件要确保的事情是，按钮的背景颜色和文本颜色之间有足够的对比。这有助于使文字更易读，更容易被人看清。

接下来，使用 color 属性来改变文本的颜色：

.button {
    position: absolute;
    top:50%;
    background-color:#0a0a23;
    color: #fff;
}

如何改变按钮的边框风格

注意到按钮边缘的灰色吗？那是按钮边框的默认颜色。

解决这个问题的一个方法是使用 border-color 属性。你将其值设置为与 background-color 的值相同。这样就可以确保边框的颜色与按钮的背景相同。

另一种方法是通过使用 border:none; 来完全移除按钮周围的边框。

.button {
  position: absolute;
  top:50%;
  background-color:#0a0a23;
  color: #fff;
  border:none;
}

接下来，你也可以通过使用 border-radius 属性将按钮的边缘变圆，就像这样：

.button {
    position: absolute;
    top:50%;
    background-color:#0a0a23;
    color: #fff;
    border:none;
    border-radius:10px;
  }

你也可以通过使用 box-shadow 属性在按钮周围添加一个轻微的暗影效果：

 position: absolute;
    top:50%;
    background-color:#0a0a23;
    color: #fff;
    border:none;
    border-radius:10px;
    box-shadow: 0px 0px 2px 2px rgb(0,0,0);

如何改变按钮的大小

在按钮的边框内创造更多空间的方法是增加按钮的 padding。

下面我为按钮的顶部、底部、右侧和左侧的 padding 添加了 15px 的值。

我还分别用 min-height 和 min-width 属性设置了一个最小高度和宽度。按钮需要足够大，适合所有不同类型的设备。

.button {
    position: absolute;
    top:50%;
    background-color:#0a0a23;
    color: #fff;
    border:none; 
    border-radius:10px; 
    padding:15px;
    min-height:30px; 
    min-width: 120px;
  }

如何设置按钮状态的样式

按钮有三种不同的状态：

:hover
:focus
:active

这三种状态的风格最好是不同的，不要共享相同的风格。

在下面的章节中，我将简要解释每个状态的含义和触发它们的原因。你也会看到一些你可以为每个单独的状态设计按钮的方式。

如何设计 `:hover` 状态的样式

:hover 状态是用户将鼠标或触控板移到一个按钮上，而不选择它或点击它。

要改变按钮在悬停时的样式，请使用 :hover CSS 伪类选择器。

使用 :hover 的一个常见变化是改变按钮的背景颜色。

为了使这种变化不那么突然，可以将 :hover 与 transition 属性搭配使用。

transition 属性将有助于使从无状态到 :hover 状态的过渡更加平滑。

背景颜色的变化会比没有 transition 属性时慢一些。这也将有助于使最终结果对用户不那么突兀。

.button:hover {
      background-color:#002ead;
      transition: 0.7s;
  }

在上面的例子中，我使用了一个 Hex 颜色代码值，使我在悬停在按钮上时的背景颜色变得更浅。

在 transition 属性的帮助下，当从无状态过渡到 :hover 状态时，我还造成了 0.7s 的延迟。这使得从原来的 #0a0a23 背景色过渡到 #002ead 背景色的速度变慢。

请记住，:hover 伪类对移动设备屏幕和移动应用程序不起作用。只选择在桌面网络应用中使用悬停效果，而不是触屏。

如何设计 `:focus` 状态的样式

:focus 状态对键盘用户有用——具体来说，当你通过点击 Tab 键（⇥）来选中一个按钮时，它会被激活。

当你按下 Tab 键后聚焦在按钮上，你会看到以下情况：

注意到当按钮获得焦点时，它周围轻微的浅蓝色轮廓吗？

浏览器对 :focus 伪类有默认的样式设计，是为了方便键盘导航。完全去掉这个 outline 轮廓并不是一个好主意。

然而，你可以为它创建自定义样式，并使它容易被发现。

这样做的一个方法是，首先将轮廓的颜色设置为 transparent。

之后，你可以将轮廓样式 outline-style 保持为 solid。最后，使用 box-shadow 属性，你可以在元素被聚焦时添加一个你喜欢的颜色：

 .button:focus {
    outline-color: transparent;
    outline-style:solid;
    box-shadow: 0 0 0 4px #5a01a7;
}

你还可以根据你想达到的效果，再次将这些样式与 transition 属性一起使用：

  .button:focus {
    outline-color: transparent;
    outline-style:solid;
    box-shadow: 0 0 0 4px #5a01a7;
    transition: 0.7s;
}

如何设计 `:active` 状态的样式

当你通过点击电脑的鼠标或按下笔记本的触控板来点击按钮时，:active 状态会被激活。

那么，在我应用并保持了 :hover 和 :focus 状态的样式后，看看当我点击按钮时会发生什么：

当我把鼠标悬停在按钮上时，:hover 状态的样式会在点击前应用。

:focus 状态的样式也会被应用，因为当一个按钮被点击的时候，它也会获得一个 :focus 状态和一个 :active 状态。

然而，请记住，它们并不是一回事。

:focus 状态是指当一个元素被选中时，而 :active 是指当用户通过按住并按下一个元素来点击它。

要改变用户点击按钮时的样式，可以将样式应用到 :active CSS 伪选择器上。

在这个例子中，我改变了用户点击按钮时的背景颜色。

.button:active {
    background-color: #ffbf00;
}

总结

你现在知道了用 CSS 设置按钮样式的基本知识。

我们讨论了如何改变按钮的背景颜色和文本颜色，以及如何为按钮的不同状态设计样式。

要了解更多关于 web 设计的知识，请查看 freeCodeCamp 的响应式 web 设计认证课程。在交互式课程中，你将通过创建 15 个练习项目和 5 个认证项目来学习 HTML 和 CSS。

请注意，上述认证仍处于测试阶段——如果你想要最新的稳定版本，请查看这里。

谢谢你阅读本文，happy coding！

CSS 选择器类型——如何在 CSS 中选择元素以设置样式

Miya Liu — Tue, 03 Jan 2023 03:22:00 +0000

原文： CSS Selector Types – How to Select Elements to Style in CSS

当你想用 CSS 给一个元素添加样式时，你首先要“选择”它。在这篇文章中，我将向你展示七种方法。

以下是在 CSS 中为元素设置样式的语法：

selector {
  /* 在这里设置样式 */
}

你有一个选择器，“瞄准”你想为其设计样式的元素，然后你有一个开放的大括号。大括号之后的样式使用不同的 CSS 属性，然后你用一个闭合的大括号来关闭它。

有许多方法来定位元素。你可以把这些方法称为选择器类型。

如果你喜欢视频的话，这里有一个关于在 CSS 中选择元素样式的方法的视频。

下面是 CSS 中的七种选择器类型。

如何在 CSS 中使用通用选择器（*）

通用选择器，即星号（*），允许你选择任何类型的所有元素进行样式设计。下面是一个例子：

* {
  border: 1px solid black;
}

比方说，我们对下面的 HTML 使用这种样式：


    CSS styles
    How to apply styles

结果如下：

你可以看到 body、h1、p、div 和 img 元素的 border 都是 1px solid black，因为我们使用了通用选择器。

如何在 CSS 中通过标签名称为元素设置样式

你也可以通过使用标签名称来选择元素为其设置样式。下面是一个例子：

p {
  color: red;
}

img {
  width: 100px;
  height: 100px;
}

这些样式声明对所有 p 元素应用 color 为红色（red），对所有 img 元素应用 200px 的宽度（width）和高度（height）。

这是上面的样式如何在这个 HTML 中实现：

I am a span
There is a span above me

结果：

你可以看到 span 没有被设置样式，只有 img 和 p 被设置了样式。

如何为 CSS 中的类设置样式

元素接受不同的属性，包括类。你可以根据你在一个元素上指定的类来定位该元素。下面是一个例子：


    Hello



    How are you

这里有两个 div，但只有一个具有 container 类的属性。你可以用句号（.）加上类来设置样式，像这样：

div {
  border: 1px solid purple;
}

.container {
  border-width: 20px;
}

结果如下：

从 CSS 中，我们指定所有的 div 元素都应该有一个 border 为 1px solid purple。但是对于有 container class 的元素，你可以从结果中看到它的 border-width 是 20px。

如何在 CSS 中为 Id 设置样式

与 class 属性类似，你可以在一个元素上指定一个 id，你可以在 CSS 中对其进行样式设置。

下面是一个例子：


    Hello



    How are you

你可以通过使用哈希（#）加上 id 来定位 id 元素，像这样：

#container {
  border-left: 10px solid blue;
}

结果如下：

使用具有 container id 的元素（无论是 div、p 还是任何类型），我们只对第二个 div 元素应用样式。

然而，与类不同，id 必须是唯一的。两个或更多的元素不能有相同的 id，因为这将导致意外的行为。

如何给 CSS 中的其他属性设置样式

我们已经看到了如何选择 class 和 id 属性。如果你想选择其他属性呢？你可以使用方括号（[attr]）。应该怎么做呢？

让我们看一个例子：


    Some link



    A paragraph link

在这个例子中，我们有两个元素：一个 a 标签和一个 p 标签。要为这两个元素设计样式，你可以直接使用它们的标签名：

p, a {
  color: red;
}

逗号允许你一次对多个选择器应用样式。

但另一种可以为这两个元素设置样式的方法是使用它们的属性。它们都有一个 href 属性。

请记住，p 标签中不支持 href 属性，我只是用它来说明一个例子。

下面是你如何使用 href 属性为这两个元素设置样式：

[href] {
  color: red;
}

这个 CSS 将匹配所有带有 href 属性的元素。

下面是结果：

这两个元素都有 href 属性，所以它们都被选中设置样式。在这里，我们使用了没有值的 href 属性。你也可以指定一个值来具体说明你的目标，就像这样：

[href="#"] {
  color: red;
}

结果是这样的：

只有 a 标签有带 # 值的 href 属性，所以这是唯一符合我们的样式的元素，你可以从上面的图片中看到。

如何在 CSS 中使用伪类

伪类是一种选择器类型，它允许你在特定的状态下选择元素。仅举几个例子，以下是一些支持的状态：

hover（当鼠标浮在一个元素上时）
disabled（当一个元素如输入或按钮被禁用时）
required（当一个表单元素是必需时）

还有很多，你可以在伪类 MDN 文档中找到。

你可以在元素处于这些状态时应用样式。你可以通过使用冒号（:）跟在状态后面来选择状态。下面是一个例子：

一行是很重要的，它指定了它是 HTML5，所以伪类可以生效。

这里是 CSS：

:hover {
  background-color: black;
  color: white;
}

这个 CSS 将把这些样式应用到你悬停的任何元素上，结果如下：

左边的图片是没有悬停状态的。在右边，你可以看到应用在 body 和 button 上的样式，因为我们正在它们上面悬停。

通过悬停在 button 上，你也在悬停在 body 上，因为 button 是 body 的一个子节点。

如何使用 CSS 中的伪元素选择器

伪元素（不同于伪类）是用来选择“一个元素的特定部分”的。不是整个元素——只是一个部分。你也可以用它们来为一个现有的元素添加伪（人造）元素。

这里有一篇关于 CSS 中的伪元素与伪类的详细文章。

下面是一些支持的伪元素选择器：

selection：一个元素的高亮部分
first-line：一个段落的第一行
placeholder：一个输入元素的占位符文本

还有很多，你可以在 MDN 的伪元素文档中找到。

要使用伪元素选择器来应用样式，你可以使用双冒号（::）加上伪元素。下面是一个例子：

下面是这个 HTML 的 CSS：

input {
  color: blue;
}

::placeholder {
  color: red;
  font-style: italic;
}

::placeholder 伪元素选择器为所有表单元素的“占位符部分”设置样式。正如你在上面的例子中看到的，input 元素本身的 color 样式是 blue，但占位符部分的样式不同。

总结

在这篇文章中，我已经向你展示了七种方法，你可以为你选择的元素设计样式。我们看到了：

通用选择器，用于选择所有元素
标签名称，用于选择符合标签名称的元素
类，用于选择带有类属性的元素
id 用于选择有 id 属性的元素
属性用于选择有或没有指定值的属性的元素
伪类用于选择特定状态下的元素
伪元素用于选择元素的特定部分

你也可以把这些选择器结合起来，使你想定位的元素更加具体。你可以使用组合器（Combinators）来实现这一点。

组合器允许你使用多个选择器，根据符合选择器的元素之间的关系来定位元素。如果你想了解更多，这里有一篇我写的关于组合器的文章。

给你一个快速预览——组合器是在多个选择器类型之间使用的，它们允许你根据元素与其他元素的关系来设计样式。

谢谢你阅读本文！

详解 CSS 伪类之 :is 伪类

Miya Liu — Fri, 30 Dec 2022 14:22:00 +0000

原文： CSS Pseudo-Classes – How the :is Pseudo-Class Works with Examples

伪类允许你在一个特定的状态下对一个元素进行样式设计。在 CSS 中，有许多支持状态的类。在这篇文章中，我将解释 :is 伪类是如何工作的。

这篇文章是我在未来几周和几个月内要做的一个新系列的第一篇文章：详解 CSS 伪类。我打算尽可能地解释更多的伪类，每篇独立的文章都会涉及到一个特定的伪类。

我有一个介绍 CSS 伪类的 YouTube 播放列表，你也可以去看看。

注意：伪类与伪元素不同。伪类适用于元素的不同状态，而伪元素适用于一个元素的不同部分。

你可以在这里了解到更多的区别。

在本教程中，你将学习 :is 伪类的所有基础知识。

:is 伪类是如何工作的

:is 伪类接受一个选择器参数的列表，并匹配所有适用于该列表中任何选择器的元素。以下是语法：

:is(selector1, selector2, selector3) {
  /* 样式 */
}

你可以指定任何类型的选择器，DOM 中任何与选择器相匹配的元素都会被选中并进行样式处理。

我有一篇关于 CSS 中的选择器类型的文章，你可以查看一下你可以在 :is 伪类中使用的不同选择器。

你唯一不能与该类一起使用的选择器类型是伪元素。

另外，因为我喜欢我的文章有视频版本（对于那些可能喜欢/喜欢看视频的人），你可以在 YouTube 上查看 :is 伪类的视频版本。

让我们看看这个伪类的一些例子。

:is 伪类的例子

看看这个 CSS 代码：

:is(.selector1, #selector2, selector3, :selector4, [selector5]) {
  /* 样式 */
}

作为参数列表，我们有 selector1 class、selector2 id、selector3 tag、selector4 pseudo-class 和 selector5 attribute 选择器。DOM 中的所有元素，只要与这些选择器中的至少一个相匹配，就会被选中进行样式设计。

让我们看看一个实际的例子：


  Paragraph of section



  Paragraph of div



  Paragraph of article



  Paragraph of span

这里，我们有一个 section、div、article 和一个 span 元素。这些元素中的每一个都有一个 p 子元素。如果我们想给这些元素的所有 p 子元素设置样式，我们可以有以下的样式声明：

section p,
div p,
article p,
span p {
  text-decoration: underline;
  color: red;
}

结果：

但我们可以用 :is 伪类来改进 CSS，方法如下：

:is(section, div, article, span) p {
  text-decoration: underline;
  color: red;
}

这让我们得到了与上面相同的结果。但有什么不同呢？

在 :is 伪类中，我们传递了四个选择器：标签名称 selection、div、article 和 span。使用后代选择器（一个空格字符），我们选择作为列表中任何一个选择器的后代的 p 标签元素。这意味着，这个选择将选择：

section 的 p 子元素
div 的 p 子元素
article 的 p 子元素
span 的 p 子元素

使用 :is 伪类，我们缩短了元素选择器。

让我们看看另一个例子。

对于这个按钮，假设你想在它处于 hover 或 focus 状态时，或在它有一个 active 类时，应用同样的样式。通常情况下，你可以有以下代码：

button:hover,
button:focus,
button.active {
  background-color: black;
  color: white;
}

结果是：

你也可以用 :is 伪类来改进这一点：

button:is(:hover, :focus, .active) {
  background-color: black;
  color: white;
}

在这里，你看到我们在按钮上添加了 :is 伪类，而对于选择器，我们有：

:hover 伪类
:focus 伪类
.active 类

这将相应地匹配按钮。

:is 不支持伪元素

正如我前面提到的，你可以将不同类型的选择器作为参数传递给 :is 伪类，但伪元素除外。

例如：

:is(::after, ::selection) {
  /* 样式 */
}

在这里，我们把 ::after 和 ::selection 伪元素作为参数传递给 :is 伪类。这样的样式声明是行不通的。

什么是容错选择器列表

当你在 CSS 中把多个选择器组合在一起，而其中一个选择器不被支持（或无效），你的样式声明将被忽略，举个例子：

.button, #box, invalid {
  /* 样式 */
}

对于我们上面的样式，我们有 .button class、#box id 和 invalid tag 选择器。第一个和第二个选择器是有效的，但没有像 invalid 这样的标签名称。因为第三个不被支持，整个样式将被忽略。

但是 :is 伪类允许有一个容错选择器列表（forgiving selector list）的概念。这意味着，如果作为参数传递的选择器之一不被支持，那将被“宽恕”。也就是说，支持的选择器将被应用，目标元素也会相应地被设置样式，例如：

button:is(:hover, :focuss, .active) {
  background-color: black;
  color: white;
}

在这里，我们为我们的样式传递 :hover pseudo-class、:focuss pseudo-class 和 .active class。:focuss 伪类不被支持，但不是整个样式声明被忽略，:hover 和 .active 选择器仍将被应用。

总结

你可以用 :is 伪类做很多高级选择。这个类允许你用更短、更容易阅读的方式来写长的选择器。

在这篇文章中，我们已经了解了 :is 伪类。通过例子，我们看到了它是如何工作的，以及它是如何使 CSS 代码变得更好的。

请记住，这个伪类的工作原理与 :where 伪类类似，但有一个主要区别。我将在以后的文章中解释 :is 和 :where 伪类的区别。

如果你喜欢这篇文章，请将它分享给更多人。😇

如何用 CSS 和 JavaScript 制作一个自定义的鼠标光标

Miya Liu — Thu, 24 Nov 2022 08:50:00 +0000

原文： How to Make a Custom Mouse Cursor with CSS and JavaScript

你是否曾经访问过一个网站，并为其功能感到惊讶？其中一个可能是一个很酷的鼠标光标，与你习惯的常规箭头或指针光标不同。

这确实可以改善用户体验，最近我一直在想它是如何工作的。所以我开始做一些研究，我发现了它是如何做到的。

在这篇文章中，我将解释如何制作一个自定义的鼠标指针。在本文结束时，你将学会如何用两种不同的方法制作这些光标，即使用 CSS 和 JavaScript。然后，你将准备好用不同的创意光标来美化你的网站，以增加互动性。准备好了吗？让我们开始吧。

前提

本文对初学者友好，但要理解一些概念，你应该具备以下基本知识：

HTML
基本的 CSS
基本的 JavaScript

如何用 CSS 定制鼠标光标

用 CSS 来定制鼠标指针是非常简单的，因为 CSS 已经有一个属性来处理这个问题。我们所要做的就是识别这个属性并使用它。

作为前端工程师，我们经常使用这个属性，它就是万能的 cursor 属性。是的，这个属性让我们有能力制作一个自定义游标。

在我们去看一个实际的例子之前，让我们先看看与 CSS cursor 属性相关的值。虽然大多数开发者只使用了几个重要的值，但还有更多的值是我们应该看的。

所有 CSS 光标的可视化展示

从上面的代码片断和结果来看，你可以通过将鼠标光标悬停在包含每个 CSS cursor 属性值名称的那些方框上，看到并测试出 CSS 的不同鼠标光标。

现在，我如何使用 CSS 来定制鼠标光标？要使用这个方法，你只需要告诉 CSS 你打算用什么图片，并使用 url 值将 cursor 属性指向图片的 URL。

body {
  cursor: url('image-path.png'),auto;
}

从上面的代码片段中，你可以看到我在文档主体上设置了这个，所以无论光标在哪里移动，它都可以适用于光标。它有在 url() 中指定的图像。

该属性的下一个值是一个后备值，以备图片无法加载或由于一些内部故障而无法找到。我相信你不希望你的网站“没有光标“，所以添加一个回退是非常重要的。你也可以根据需求添加尽可能多的后备 URL。

body {
  cursor: url('image-path.png'), url('image-path-2.svg), 
          url('image-path-3.jpeg'), auto;
}

你也可以在你的网页的某个特定元素或部分上定制光标。下面是一个 CodePen 的例子：

在网页的不同元素上使用不同的自定义光标

这就是在 CSS 中定制光标的全部内容。现在让我们来看看如何在 JavaScript 中做到这一点。

如何用 JavaScript 制作自定义鼠标光标

为了用 JavaScript 实现这一点，你需要操作 DOM 来获得所需的结果。

首先，让我们看看 HTML：

HTML

从上面的代码片段中，我创建了两个 div 来表示光标。我们的计划是通过 JavaScript 来操作这些 div，这样它们在网页上的移动就会被 JavaScript 的 mousemove 事件利用鼠标移动的 X 和 Y 坐标进行滚动。

现在让我们来看看 CSS 的部分，这将使我们的工作更有意义。

如何用 CSS 设计自定义光标的样式

body{
  background-color: #1D1E22;
  cursor: none;
}

.rounded{
  width: 30px;
  height: 30px;
  border: 2px solid #fff;
  border-radius: 50%;
}

.pointed{
  width: 7px;
  height: 7px;
  background-color: white;
  border-radius: 50%;
}

看一下上面的 CSS 代码，我禁用了光标（记得 cursor:none 吗），这将使光标不可见，只允许我们的自定义光标显示。

我对这些 div 设置了样式，使它们具有独特的“光标式”外观。你绝对可以用它做得更多，也许可以添加背景图片、表情符号、贴纸等等，只要有图片就可以了。现在，让我们看一下 JavaScript。

如何使用 JavaScript 来使光标移动

const cursorRounded = document.querySelector('.rounded');
const cursorPointed = document.querySelector('.pointed');


const moveCursor = (e)=> {
  const mouseY = e.clientY;
  const mouseX = e.clientX;
   
  cursorRounded.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`;
  
  cursorPointed.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`;
 
}

window.addEventListener('mousemove', moveCursor)

我在全局窗口对象上添加了一个事件监听器来监听任何鼠标移动。当鼠标移动时，moveCursor 函数表达式被调用，它接收事件对象作为参数。有了这个参数，我就能在页面的任何一点上获得鼠标的 X 和 Y 坐标。

我已经使用JavaScript querySelector 从 DOM 中选择了每种光标。所以我所要做的就是根据鼠标的 X 和 Y 坐标移动它们，方法是用 translate3d 值控制样式上的 transform 属性。这样，当鼠标移动到网页上的任何一点时，这些 div 就能移动。

而你所看到的反斜线被称为模板字面量。这样就可以很容易地写出变量，把它们附加到字符串中。另一种方法是将变量与字符串连接起来。

很简单，对吗？

下面是一个 CodePen 示例和上述代码片段的结果：

使用 JavaScript 自定义鼠标指针

哪种方法效果最好

现在就看你作为开发者选择哪种最适合你的方法了。如果你想使用一些漂亮的表情符号或图像作为光标，你可以选择使用 CSS。另一方面，你可能想使用 JavaScript，这样你就可以根据自己的选择定制复杂的形状，并对光标的移动进行动画处理。

无论哪种方式都可以，只要你能得到你想要的结果，并打动你的网站的所有访问者。

我希望你从这篇文章中学到了很多东西，我期待着看到你用这些知识建立的网站。

想了解更多的 CSS 技巧，请在 Twitter 上关注我。

谢谢你阅读本文。

CSS 字体颜色——如何为 HTML 中的文本设置样式

Miya Liu — Fri, 18 Nov 2022 10:50:00 +0000

原文： CSS Font Color – How to Style Text in HTML

在你正在创建的网站上设置文本颜色，一开始可能会让人困惑。但在这篇文章中，你会学到如何去设置。

如何在 HTML 中设置文本颜色

在 CSS 中，background-color 属性对于设置任何东西的背景色都是非常直接的。

那么，如果你想设置页面上某些东西的前景色，该怎么办？特别是文本，在正常情况下，你不会想为它设置背景色。

在 CSS 中没有前景色属性，所以使这成为可能的是 color 属性。

在这篇文章中，我将向你介绍如何使用 color 属性来设置文本的颜色。我们还将看看它取值的各种方式。

color 属性以 4 种不同的方式取值：命名颜色、十六进制颜色、RGB 颜色和 HSL 颜色。现在让我们来看看每一种方式。

命名的颜色

顾名思义，你使用了 color 属性，并通过命名你想要的颜色来应用这个值。这可能是红色、绿色、蓝色、橙色、深红色、青色，或任何其他命名的颜色。浏览器识别的命名颜色大约有 147 种。

基本的语法是这样的：

element {
    color: colorName
}

freeCodeCamp

 p {
     color: crimson;
}

十六进制颜色（或简称十六进制颜色）

十六进制值用于表示总共有 6 个字符的颜色。它们以磅/数字符号（#）开始，然后是 0 至 9 的任何数字，最后是 A 至 F 的任何字母。

前两个值代表红色，后两个代表绿色，而最后两个代表蓝色。使用十六进制值，你可以使用的颜色深浅没有限制。

freeCodeCamp

 p {
    color: #dc143c;
 }

RGB 颜色

RGB 是红、绿、蓝的意思。使用 RGB 颜色，你可以用你想要的红色、绿色和蓝色的量来指定颜色。所有这三种颜色都用 0 到 255 之间的数字表示。

有一种类型的 RGB 叫做 rgba。额外的 a 代表 alpha，它让你指定颜色的不透明度。它的数值从 0.0 到 1.0——0.0 表示 0% 不透明度，0.5 表示 50% 不透明度，1.0 表示 100% 不透明度。

基本语法是 rgba(amountOfRed, amountOfGreen, amountOfBlue, alpha)。

如果你不想要 alpha 值，你可以把它限制为 rgba(amountOfRed, amountOfGreen, amountOfBlue)。

下面是常规 RGB 值的语法：

freeCodeCamp

 p {
   color: rgb(220, 20, 60);
 }

这是 alpha 值为 50%（0.5）的效果：

p {
    color: rgb(219, 20, 60, 0.5);
}

HSL 颜色

HSL 是色相、饱和度和亮度的缩写。它是在 CSS 中为文本（以及其他任何需要颜色的东西）指定颜色的另一种方式。

色相 Hue 代表 360° 的色轮。所以，0° 是红色，120° 是绿色，240° 是蓝色。
饱和度 Saturation 是指颜色中的灰色量，以百分比表示。0% 是灰色的阴影，100% 是颜色本身。
明度 Lightness 是指颜色中的暗度和亮度，以百分比表示。0% 是黑色，100% 是白色。

就像 RGB 颜色一样，你也可以设置颜色的不透明度。所以，也有 hsla。

完整的基本语法是 hsl(colorDegree, saturationPercentage, lightnessPercentage, alpha)。如果你不想要 alpha 值，你可以把它限制为 hsl(colorDegree, saturationPercentage, lightnessPercentage)。

freeCodeCamp

 p {
   color: hsl(348, 83%, 47%);
 }

你可以像这样给 hsl 颜色应用一个特定的不透明度：

 p {
   color: hsla(348, 83%, 47%, 0.5);
  }

你应该使用命名颜色、Hex 颜色、RGB 颜色还是 HSL 颜色来设置颜色？

CSS 的奇妙之处在于，有多种方法可以做同一件事。你已经看到了这一点，在文本中应用颜色。

既然你可以用 4 种不同的方式来应用颜色，你一定想知道哪种方式是最好用的。

当你使用命名的颜色时，你在应用不同颜色的深浅方面有点受限制。红色、绿色、蓝色、黄色或任何其他命名的颜色都有很多变化，你无法使用命名的颜色。你只能使用浏览器认可的大约 147 种预定义颜色。

十六进制的颜色是非常动态的。它们是开发者中最常用的。使用十六进制颜色，你可以使用各种色调，甚至使用一种从未有人使用过的颜色。

RGB 颜色和十六进制颜色一样是动态的。除了能够指定你想要多少红色、绿色和蓝色，从 0 到 255，你还可以通过额外的 alpha 值设置你想要的颜色的透明度。

HSL 是最有活力的。你可以在色轮中从 0 到 360 度指定你想要的确切颜色，设置你想要的饱和度和暗度的百分比，还可以设置 0.0 到 1.0 的不透明度。

因此，这真的取决于你和你的使用情况——以及你想发挥多大程度的创造性。

总结

对文本应用颜色有助于使你的网站对访问者更有吸引力。正确的颜色组合也可以帮助你的内容变得更具有可读性。

在这篇文章中，你已经学会了如何用颜色属性的 4 种不同的值来给文本应用颜色。

谢谢你阅读本文，继续编码吧。

CSS - freeCodeCamp.org

如何使用 CSS 使文本垂直居中

如何使用 Line Height 使文本居中

如何使用 Flexbox 将文本居中

如何使用 CSS Grid 使文本居中

总结

媒体查询与容器查询——该使用哪个以及何时使用？

目录

响应式和内在网页设计

什么是媒体查询

什么是容器查询

媒体查询和容器查询比较

媒体查询和容器查询的主要区别

基于视口 vs. 基于容器

模块化和灵活性

复杂性和维护

你应该使用哪个以及什么时候使用

理解和舒适度

项目需求和复杂性

未来趋势和协作

总结

CSS 过渡与动画手册——如何用 CSS 为元素制作动画

目录

什么是 CSS 过渡？

不使用 CSS 过渡如何在鼠标悬停时更改图片的尺寸

使用 CSS 过渡如何在鼠标悬停时更改图片的尺寸

CSS 过渡属性的种类

什么是必需 CSS 过渡属性

什么是 transition-property？

什么是 transition-duration ？

必需 CSS 过渡属性的示例

如何在 3 秒内完成元素宽度的过渡

如何在 5 秒内完成字体尺寸的过渡

什么是可选 CSS 过渡属性

什么是 transition-timing-function？

什么是 transition-delay？

可选 CSS 过渡属性的示例

如何使用 ease-out 速度完成元素宽度的过渡

如何使用 linear 速度完成元素宽度的过渡

如何使用 2 秒的延迟完成元素宽度的过渡

CSS 过渡属性的缩写

什么是 CSS 动画？

CSS 动画的组成

什么是 CSS @keyframes？

CSS @keyframes 的语法

CSS @keyframes 的示例

如何定义 change-color 的关键帧

如何定义 shape-image 的关键帧

什么是 CSS animation 属性？

什么是 CSS animation-name 属性？

什么是 CSS animation-duration 属性？

如何在 3 秒内完成更改元素的颜色的动画

如何在 7 秒内完成更改图片边框和宽度的动画

什么是 CSS animation-timing-function 属性？

如何使用线性速度完成更改元素宽度的动画

如何使用 ease-in-out 和 线性速度完成更改元素宽度的动画

什么是 CSS animation-delay 属性？

如何 4 秒延迟后完成更改元素宽度的动画

如何从动画序列的第四秒开始完成更改元素宽度的动画

什么是 CSS animation-iteration-count 属性？

如何完成两次更改元素宽度的动画

如何无限重复更改元素宽度的动画

什么是 CSS animation-direction 属性？

如何每次都以反向开始完成改变元素宽度的动画

如何交替动画方向地完成更改元素宽度的动画

什么是 CSS animation-play-state 属性？

什么是 CSS animation-fill-mode 属性？

如何在动画结束为元素增加样式

如何在动画延迟这段时间增加样式

如何在动画延迟时和完成动画后增加样式

什么是 CSS animation 属性？

CSS 过渡和动画的重要知识要点

总结

这还有些有用的 React Typescript 资源

CSS Flexbox 手册——附带实用示例的完整指南

目录

什么是 Flexbox

使用 Flexbox 有什么好处

主轴和交叉轴

Flex 容器和 Flex 项

什么是 `transition-property`？

什么是 `transition-duration` ？

什么是 `transition-timing-function`？

什么是 `transition-delay`？

什么是 CSS `@keyframes`？

CSS `@keyframes` 的语法

如何定义 `change-color` 的关键帧

如何定义 `shape-image` 的关键帧

什么是 CSS `animation-name` 属性？

什么是 CSS `animation-duration` 属性？

什么是 CSS `animation-timing-function` 属性？

如何使用 ease-in-out 和线性速度完成更改元素宽度的动画

什么是 CSS `animation-delay` 属性？

什么是 CSS `animation-iteration-count` 属性？

什么是 CSS `animation-direction` 属性？

什么是 CSS `animation-play-state` 属性？

什么是 CSS `animation-fill-mode` 属性？

什么是 CSS `animation` 属性？

了解 `Flex` 和 `Inline-flex`

`display: flex`

`display: inline-flex`

`flex-direction` 属性

`flex-direction: row`

`flex-direction: column`

`flex-direction: row-reverse`

`flex-direction: column-reverse`

`flex-wrap` 属性

`flex-wrap: nowrap`

`flex-wrap: wrap`

`flex-wrap: wrap-reverse`

`flex-flow` 缩写属性

`justify-content` 属性

`justify-content: flex-start`

`justify-content: flex-end`

`justify-content: center`

`justify-content: space-between`

`justify-content: space-evenly`

`justify-content: space-around`

`align-items` 属性

`align-items: stretch`

`align-items: flex-start`

`align-items: flex-end`

`align-items: center`

`align-items: baseline`

`align-content` 属性

`align-content: stretch`

`align-content: flex-start`

`align-content: flex-end`

`align-content: center`

`align-content: space-between`

`align-content: space-evenly`

`align-content: space-around`

`place-content` 属性

`order` 属性

`align-self` 属性

`flex-grow` 属性

`flex-shrink` 属性

`flex-basis` 属性

`flex` 缩写属性

如何使用 `align-items` 属性