CSS 面试题

.black {
   color: #000000; 
}

此规则将网页中所有具有类“.black”的元素内部的文本颜色设置为黑色。

11. 什么是 ID 选择器？

ID 选择器通过唯一的id 属性来定位特定元素，以便单独对其进行样式设置。在 CSS 中，ID 由"#"（哈希）符号表示。

#main-heading {
   color: #333333; 
}

此规则将 id 为“main-heading”的元素的文本颜色设置为深灰色。

12. 什么是元素选择器？

元素选择器将样式应用于网页中特定 HTML 元素的所有实例。它直接使用标签名称，无需任何符号。

p {
   font-size: 16px; 
}

此规则将所有`<p>`（段落）元素的字体大小设置为 16px。

13. 什么是属性选择器？

CSS 中的属性选择器根据特定属性的存在或值来定位元素。它由属性名称周围的方括号表示。

a[target="_blank"] {
   color: blue;
   text-decoration: underline;
}

此规则将蓝色和下划线样式应用于所有具有属性`target="_blank"`的`<a>`元素，表示在新标签页中打开的链接。

14. 如何在 CSS 中添加注释？

在 CSS 中，可以使用`/* */`添加注释。`/*`和`*/`之间的任何内容都被视为注释，浏览器不会呈现它们。以下是 CSS 中添加注释的语法。

/* This is a comment */
p {
    color: red; /* Set text color to red */
}

CSS 注释旨在供开发人员使用，浏览器在渲染网页时会忽略它们。它们在文档、调试等方面很有用。

15. 如何在 CSS 中设置颜色？

在 CSS 中，`color`属性用于设置元素的文本颜色。您可以使用多种格式指定颜色，例如名称、HEX、RGB、RGBA、HSL 和 HSLA 值。

/* Examples of setting color */
p {
    color: blue;           /* Named color */
    color: #ff0000;        /* HEX color */
    color: rgb(255, 0, 0); /* RGB color */
    color: rgba(255, 0, 0, 0.5); /* RGBA color with 50% opacity */
    color: hsl(0, 100%, 50%);    /* HSL color */
    color: hsla(0, 100%, 50%, 0.5); /* HSLA color with 50% opacity */
}

• 命名颜色：使用标准颜色名称（如`red`、`blue`等）设置颜色。
• HEX 颜色：使用 HEX 代码设置颜色，例如`#ff0000`。
• RGB 颜色：使用 RGB 值设置颜色，例如`rgb(255, 0, 0)`。
• RGBA 颜色：类似于 RGB，但包含一个用于不透明度的 alpha 参数，例如`rgba(255, 0, 0, 0.5)`。
• HSL 颜色：使用 HSL（色相、饱和度、亮度）设置颜色，例如`hsl(0, 100%, 50%)`。
• HSLA 颜色：类似于 HSL，但包含一个 alpha 参数，例如`hsla(0, 100%, 50%, 0.5)`。

15. 什么是 CSS 背景属性？

CSS 中的背景属性用于控制 HTML 元素的背景图形。我们可以为所有元素的 HTML 结构设置纯色、图像、渐变。

• background-color: 用于为元素定义纯色背景。
• background-image: 用于将图像或渐变设置为背景。
• background-position: 用于指定背景图像的起始位置。
• background-size: 用于调整背景图像的大小。

16. CSS 边框属性有哪些？

CSS 中的边框属性用于控制 HTML 元素周围边框的外观。使用这些属性，我们可以设置边框的颜色、样式、宽度，甚至应用圆角。

• border-width: 指定边框的宽度，可以使用像素、em 等单位，或`thin`、`medium`、`thick`等关键字。
• border-style: 定义边框的样式，例如`solid`、`dashed`、`dotted`或`none`。
• border-color: 设置边框的颜色。可以使用颜色名称、HEX 代码、RGB 或 HSL 值指定。
• border-radius: 指定边框角的圆角。

/* Example of border properties */
.box {
    border-width: 2px;
    border-style: solid;
    border-color: #3498db;
    border-radius: 10px;
}

17. 什么是 CSS 过渡？

CSS 过渡用于在指定的时间段内平滑地更改 CSS 属性。请查看下面的示例。

以下代码模拟了当用户将鼠标悬停在按钮上时，按钮的背景颜色从浅蓝色平滑过渡到深天蓝色的效果。

.button {
    background-color: lightblue;
    transition: background-color 0.3s ease; /* Smooth color change on hover */
}

.button:hover {
    background-color: deepskyblue;
}

18. 如何在 CSS 中隐藏元素

我们可以通过设置`display`或`visibility`属性来隐藏 CSS 中的元素。

• 使用display：当您将元素的 display 属性设置为`none`时，它将从文档流中移除，它占用的空间也将被移除。
• 使用visibility：将 visibility 属性设置为`hidden`使元素不可见，但它仍然在布局中占用空间。

/* The element will not be visible and won't take up space */
.hidden {
    display: none; 
}

/* The element will not be visible but will still take up space */
.invisible {
    visibility: hidden; 
}

19. 解释一下 margin 和 padding 的区别

margin 和 padding 都用于在元素周围创建空间，但目的不同。Margin 是元素外部的空间，在元素和其他元素之间创建距离，而 padding 是元素内部的空间，即内容和元素边框之间的空间。下图显示了盒模型结构中元素的 padding 和 margin。

通过示例了解更多信息，CSS 外边距和CSS 内边距。

20. 解释 CSS 盒模型

CSS 盒模型，如上图所示，是一个布局概念，描述了元素如何在网页上显示。此模型将每个元素视为一个矩形框，由内容、填充、边框和边距区域组成。我们有两种类型的盒模型。

• 标准盒模型：在此模型中，元素的内容区域仅由元素的高度和宽度定义。填充、边框和边距添加到内容区域之外。以下是标准盒模型的代码。

.box {
    width: 300px;
    height: 100px;
    padding: 20px;
    box-sizing: content-box; /* This is the default value */
}

• 替代盒模型：在此模型中，元素的内容区域包括元素的高度、宽度、填充、边距和边框。

.box{
    width: 300px;
    height: 150px;
    padding: 20px;
    box-sizing: border-box; /* Margin & padding included in content area */
}

中级 CSS 问题及解答

本节将涵盖 CSS 中 15 个中级问题，涵盖高级选择器、布局系统、动画、calc() 函数、媒体查询、内联块显示、特异性以及响应式单位等关键主题。

21. 什么是伪类和伪元素选择器？

CSS 中的伪类用于根据元素的状态或其在文档树中的位置来选择和设置元素的样式，无需添加额外的类或 JavaScript。例如，当鼠标移过或点击按钮时为其设置样式。

/* Example of Pseudo-class, Styling a link when mouse hovered*/
a:hover {
    color: red;
}

CSS 中的伪元素用于设置元素的特定部分的样式，这些部分不是 DOM（文档对象模型）的一部分，并且不存在于 HTML 标记中。例如，段落的第一字母、输入元素内的占位符文本或文档中选定的部分。

/* Example of pseudo-element, Styling first letter of a paragraph */
p::first-letter { 
    text-transform: uppercase;
    font-size: 2em;
    color: darkred;
    font-style: italic;
}

22. 什么是后代选择器和子选择器？

CSS 中的后代选择器用于选择嵌套在另一个元素内的元素，无论嵌套深度如何。它们由父选择器和子选择器之间的空格表示。例如，如果要设置所有在 div 内部的段落的样式，则可以编写

/* Example of Descendant Selector */
div p {
    color: blue; /* Affects all paragraphs inside any div */
}

子选择器仅选择直接嵌套在父元素内的元素，并且不考虑更深的嵌套级别。这由>符号表示。例如，要仅设置特定 div 内部的段落的样式，则可以编写

/* Example of Child Selector */
div > p {
    color: green; /* Affects only the direct child paragraphs of a div */
}

23. 什么是相邻兄弟选择器和通用兄弟选择器？

CSS 中的相邻兄弟选择器用于选择紧挨着特定元素的元素，它们共享相同的父元素。相邻兄弟选择器由加号（+）表示。例如，如果要选择紧随 h2 元素之后的第一个 p 元素，则可以编写

/* Example of Adjacent Sibling Selector */
h2 + p {
    color: red; /* Affects only the first paragraph immediately after an h2 */
}

通用兄弟选择器选择所有共享相同父元素并且位于特定元素之后的元素，不一定紧挨着它。通用兄弟选择器由波浪号（~）表示。例如，如果要设置所有 h2 元素的兄弟元素 p 元素的样式，则可以编写

/* Example of General Sibling Selector */
h2 ~ p {
    color: purple; /* Affects all paragraphs that are siblings of h2 */
}

24. 什么是 flexbox 布局系统？如何设置 flex 布局？

Flexbox是 CSS 中的一维布局系统，用于水平或垂直排列容器内的项目。此系统使用多个属性来控制项目的大小和对齐，从而确保响应式设计。该图显示了容器中的 flexbox 布局。

设计 flexbox 系统非常简单。我们只需要将容器的display属性设置为 flex。然后，我们可以使用 flex 相关的属性来控制容器内项目的对齐方式。以下代码显示了 flex 布局系统的示例。

.container {
    display: flex;
    justify-content: space-between; /* Ensures Evenly spaced items */
    align-items: center; /* Centering items Vertically */
}
.item {
    background-color: lightcoral;
    padding: 20px;
    border: 3px solid #ccc;
}

25. 解释 CSS 网格布局以及如何设置它？

CSS 网格布局是一个用于开发响应式网页的二维布局系统。网格布局非常适合创建网页的整体结构，而 flexbox 主要用于对齐容器内的项目。下图显示了具有 12 列结构的网格布局。

要使用网格布局，请将容器的display属性设置为`grid`。然后，我们可以使用 grid-template-rows 和 grid-template-columns 等属性定义行和列的数量和大小。以下示例代码显示了一个基本的网格布局。

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Creates 3 columns */
    grid-template-rows: auto; /* Rows adjust based on content height */
    gap: 10px; /* Space between grid items */
}
.item {
    background-color: lightblue;
    padding: 20px;
    border: 2px solid #ddd;
}

26. 如何在 CSS 中创建动画？

我们可以使用@keyframes 规则在 CSS 中设置动画。`@keyframes`规则通过指定动画元素在动画的不同阶段的外观来定义动画。请考虑以下定义关键帧规则的代码。

@keyframes colorChange {
    0% {
        background-color: red;
    }
    50% {
        background-color: green;
    }
    100% {
        background-color: blue;
    }
}

此关键帧规则是为名为 colorChange 的动画定义的。

• 在动画总持续时间的 0%（即 0 秒）时，背景颜色将为红色。
• 在总时间的 50%（即 2.5 秒）时，背景颜色更改为绿色
• 在总持续时间的 100%（即 5 秒）时，颜色更改为蓝色。

现在，关键帧规则已定义。我们可以将其应用于网页中的任何元素。以下代码将动画应用于类“.box”。

.box{
    animation: colorChange 5s infinite;
}

此代码将为具有类`.box`的元素定义动画，动画名称为`colorChange`，运行 5 秒，并且无限次重复。

27. 如何在 CSS 中使用 calc() 函数？

CSS 中的`calc()`函数用于在 CSS 属性中直接执行计算。此函数可以对值进行加、减、乘或除运算，使其在需要元素具有灵活尺寸的响应式设计中特别有用。

/* Example using calc() to set width */
div {
   width: calc(100% - 20px); /*Sets width as total width minus 20px*/
}

使用`calc()`，您可以在单个计算中混合不同的单位（如`px`、`%`和`em`），这对于需要适应各种屏幕尺寸的布局非常有用。

28. 解释如何在 CSS 中使用 nth-child() 选择器

：nth-child(n) 是一个伪类，它将样式应用于元素的任何指定的直接子元素。

/* Syntax */
tag:nth-child(number / expression / odd / even) {
    property: value;
} 

伪类 nth-child 可以将数字、数学表达式或奇数、偶数等值作为参数。

• 数字：我们可以为此函数指定任何数字，表示子元素的顺序，例如 nth-child(4) 将选择父元素的第 4 个子元素。
• 奇数/偶数：我们还可以使用此函数选择子元素的所有奇数/偶数出现。
• 表达式：我们可以为此函数提供任何有意义的数学表达式，以变量'n'表示。例如，nth-child(3n) 将选择所有在 3 的倍数处出现的子元素。

/* Examples */
/* Apply Style to 2nd child of div */
div:nth-child(2){
   background-color:red;
}

/* Apply Style to all odd children of li */
li:nth-child(odd) {
   background-color: lightgray;
}

/* Apply Style to 2n+1 th children, where n is 1, 2 ,3..., */
li:nth-child(2n+1) {
   background-color: lightblue;
}

29. 如何将元素居中于容器内？

将元素居中于容器内可以通过多种方式完成，具体取决于布局和所需的居中类型。以下是一些常见的方法

• 使用 Flexbox：在容器上应用`display: flex;`和`justify-content: center;`以及`align-items: center;`以水平和垂直居中元素。

.container {
    display: flex;
    justify-content: center; /* Horizontal Centering */
    align-items: center; /* Vertical Centering */
    height: 200px;
}

通过为容器设置上述代码，容器内的元素将居中。但是，如果容器中有多个元素，则可以使用`justify-content: space-around`在所有元素周围提供均匀的间距。

• 使用 Margin Auto（水平居中）：对于块级元素，您可以使用`margin: auto;`将元素水平居中。

/* Horizontal centering with margin auto */
.element {
    width: 100px;
    height: 50px;
    background-color: lightgreen;
    margin: auto;
}

30. 什么是 CSS 媒体查询？它是如何工作的？

CSS 中的媒体查询用于根据屏幕尺寸、分辨率和用户设备的其他特征应用不同的 CSS 样式。媒体查询使用@media规则，在满足特定条件时包含额外的 CSS 属性块。媒体查询还可以用于单独设置页面的可打印版本的样式。

@media not|only mediatype and (media feature) and (media feature) {
    CSS-Code;
}

这里，媒体类型可以是屏幕、打印、语音等，媒体特征可以是宽度、高度、纵横比、方向等特性。

/* Example */

/* Style for screen size less than 500px */
@media screen and (max-width: 500px) {
    .container {
        flex-direction: column; /* Column layout on small screen */
    }
}

/* Styles for landscape orientation screen */
@media (orientation: landscape) {
    body {
        color: blue;
    }
}

31. 如何为打印设置网页样式？

要明确为打印设置页面样式，我们有两种方法

• 使用外部样式表：我们可以为打印需求专门使用外部样式表。为此，我们需要为链接标签的media属性设置为“print”。将以下标签添加到 HTML 文档的头部部分。

<link href="/path/to/print.css" media="print" rel="stylesheet" />

print.css 将如下所示

body{
    background-color: white;
    color: black;
}
.navbar{
    display: none;
}

• 使用媒体查询和 @page：CSS 媒体查询可用于在内部样式表本身中设置可打印版本的样式。@page规则用于控制打印内容的大小、方向和边距等方面。

@media print {
    body{
        background-color: white;
        color: black;
    }
    .navbar{
        display: none;
    }
}  
@page {
    size: A4 portrait; /* A4 size, portrait orientation */
    margin: 2cm; /* 2cm margins on all sides */
}

32. 什么是 CSS 特异性？如何覆盖特异性？

CSS 中选择器的特异性顺序是确定哪个选择器对元素具有最高优先级，当多个选择器指定相同的属性时。

例如，如果使用类选择器和 ID 选择器在 HTML 元素上指定了 CSS 属性，则将在该元素上应用特异性值最高的选择器（在本例中为 Id 选择器）中声明的属性。以下是 CSS 中特异性的一些规则。

• 特异性值最高的选择器将生效。
• 对于特异性值相等的情况，最新的规则优先。
• 内部 CSS 样式始终优先于外部样式表

但是，如果任何属性标记为!important，则特异性顺序变得无关紧要。这意味着，如果任何选择器中的任何属性标记为 important，则无论使用哪个选择器，该属性都具有最高优先级。以下代码显示了如何覆盖特异性。

#unique {
    color: darkgreen; /* This is ignored */
}

.special {
    color: blue !important; /* This will take effect */
}

<p id="unique" class="special"> This is paragraph </p>

查看有关!important 规则的章节以了解更多信息。

33. 解释内联、块和内联块元素之间的区别。

内联、块和内联块是 CSS display属性的值。下表显示了“display: inline”、“display: block”和“display: inline-block”属性之间的区别。

下面的交互部分显示了这些值之间的视觉差异。

34. CSS 中边框和轮廓有什么区别？

在 CSS 中，轮廓用于在元素边框的外部创建线条，而不会影响其大小或布局。但是，边框用于在元素之间创建可见的分隔。这意味着边框将在布局中占用空间，但轮廓不会在布局中占用空间。下图显示了元素的轮廓和边框。

• 轮廓不占用空间，这意味着如果边距不足，轮廓可能会与相邻元素重叠。另一方面，边框永远不会与相邻元素重叠。
• 轮廓在所有侧面的外观始终相同。但边框可以在每一侧有所不同。
• 轮廓不必是矩形，因为它们遵循其应用到的元素的形状。
• 轮廓通常用于在元素获得焦点（通过按 Tab 键或单击）时突出显示元素。而边框用于在元素之间进行视觉分隔。

访问CSS 轮廓和CSS 边框，以查看示例并了解更多信息。

35. 如何在 CSS 中设置已访问链接的样式？

要在 CSS 中设置已访问链接的样式，我们可以使用：visited 伪类，它以用户已点击的链接为目标。这是一个示例。

 
a:visited {
  color: purple;     /* Change the text color */
  font-weight: bold; /* Make the link bold */
}

• 出于安全原因，已访问链接的样式选项有限。这意味着我们不能将显示、位置等揭示布局更改的属性应用于已访问链接。
• 通常允许的属性包括颜色、背景颜色、文本装饰和轮廓。

36. 什么是响应式单位？为什么要使用它们？

响应式单位是在 CSS 中使用的一组特殊单位，用于描述可以根据视口宽度或高度由浏览器缩放的测量值。最常见的响应式单位是

• vw（视口宽度）：此单位基于视口宽度的 1%。例如，10vw 等于视口总宽度的 10%。
• vh（视口高度）：此单位基于视口高度的 1%。例如，50vh 将是视口高度的一半。
• vmin：此单位采用视口宽度和高度之间的较小值。当您希望大小适应纵向和横向方向时，它很有用。
• vmax：此单位采用视口宽度和高度之间的较大值，对于需要在较大视口中最大化空间的设计很有用。

高级 CSS 面试问题及解答

本节将涵盖 CSS 中的 10 个高级问题，其中包括剪辑路径、导入规则、自定义属性、CSS 级联规则、计数器、Houdini API、容器查询和关键 CSS 等主题。

37. 解释 clip-path 属性及其用例

CSS 中的clip-path属性用于定义元素的可见区域。这可以用于掩盖元素形状的某些部分以创建视觉效果。以下是 clip-path 属性的语法。

clip-path: shape-function | URL | none;

• 形状函数：定义基本形状，例如 circle()、ellipse()、polygon() 或 inset()
• URL：链接到 SVG <clipPath> 元素以进行更复杂的剪辑。
• 无：删除所有剪辑，并使元素完全可见。

我们可以将 clip-path 应用于图像以赋予它们自定义形状，例如圆形、三角形或多边形。这样，我们就可以将个人资料图片显示为圆形，而无需使用实际的圆形图像。

/* Clips an element to circular path */
clip-path: circle(50%);

/*  Clips the element into an elliptical shape */
clip-path: ellipse(50% 40%);

/* Clips the element into a custom polygonal shape */
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

/* Clips the element by an inset rectangle */
clip-path: inset(10% 20%);

38. 什么是 CSS 中的 @import 规则，它是如何使用的？

CSS 中的 @import 规则用于将外部 CSS 文件导入样式表。这有助于我们将 CSS 代码分离到多个文件中，然后将它们组合到单个样式表中。以下是 @import 规则的语法。

/* Syntax */
@import url("styles.css");

• 为了避免潜在的渲染问题，请在样式表的开头使用 @import。
• 每个 @import 规则都会创建一个额外的 HTTP 请求，这可能会减慢页面加载时间。因此，HTML 中的内联 <link> 元素通常更受青睐，以获得更好的性能。
• 在 SASS 等预处理器中不会出现性能问题，因为文件在交付之前会合并成一个。

假设您有一个主样式表 main.css，并且想要导入一个重置文件和一个主题文件。您可以像这样组织它

@import url("reset.css");
@import url("theme.css");

/* Additional styles */
body {
    font-family: Arial, sans-serif;
}

39. 什么是 CSS 中的自定义属性？什么是 :root？

自定义属性是 CSS 中的变量，用于存储和在样式表中重用值。这与其他编程语言中的变量相同。:root伪类用于在 CSS 中声明自定义属性。我们也可以使用任何其他选择器来声明变量，但在 root: 选择器中声明变量将提供对变量的全局访问权限。以下代码显示了如何在 CSS 中声明和使用自定义属性。

/* Declare custom properties */
:root {
    --primary-color: #3498db;
    --font-size-large: 1.5rem;
}

/* Use custom properties */
body{
    background-color: var(--primary-color);
    font-size: var(--font-size-large)
}

40. 解释 CSS 级联以及样式是如何应用的。

CSS 级联是浏览器在多个规则可能应用于同一元素时确定应用哪个样式的过程。CSS 遵循特定的顺序来解决冲突并决定应用哪个样式。此顺序包括

• !important 标签： 使用 `!important` 标记的样式具有最高优先级，并覆盖其他样式。
• 特异性： 浏览器会检查每个选择器的特异性。ID 选择器（`#id`）比类选择器（`.class`）更具特异性，类选择器又比标签选择器（`p`、`div`）更具特异性。
• 源顺序： 如果两个规则具有相同的权重和特异性，则 CSS 中最后定义的规则将被应用。

CSS 中的每个选择器 都有一个特异性级别，级联顺序由此特异性顺序决定。以下是 CSS 选择器的特异性顺序。

• 内联样式： 使用 style 属性为元素定义的样式具有最高优先级。
• ID 选择器： 在选择器中，ID 选择器具有最高优先级。
• 类、属性和伪类： 这些是下一个优先级。类选择器以 . 为前缀，属性选择器使用方括号 []，伪类以
• 元素和伪元素： 这些具有最低的特异性。元素选择器直接使用元素名称，伪元素以 :: 为前缀。

使用 CSS 级联，样式根据权重、特异性和源顺序的组合应用，允许开发人员控制元素在各种条件下的样式。

41. 什么是 CSS 计数器，如何实现它们？

CSS 计数器 是一种由 CSS 维护的变量，可以在文档的不同位置递增、递减或重置。例如，我们可以使用计数器自动为段落、标题和列表分配编号。请按照以下步骤在网页中为列表项实现自动计数器

• 初始化计数器： 要开始使用计数器，首先需要使用 counter-reset 属性对其进行初始化。

body {
    counter-reset: section;
} 

此代码初始化一个名为 section 的计数器，其初始值为 0。每次 body 元素出现时，计数器都会重置为 0。

• 递增计数器： 要递增计数器，请使用 counter-increment 属性。

li::before {
    counter-increment: section;
}

此代码每次 <li> 元素出现时都会递增 section 计数器，并在文本前显示计数。

• 显示计数器： 要显示计数器的值，请使用 counters() 函数。

li::before {
    content: counters(section, ".") " ";
}

此代码在 li 元素内容之前显示 section 计数器的值，后跟一个句点和一个空格。

42. 什么是 CSS Houdini 及其 API？

CSS Houdini 是一组用于创建自定义样式、布局和动画效果的低级 API。使用 Houdini，开发人员可以访问浏览器的 CSS 引擎来定义新的属性并实现自定义绘制函数。以下是 CSS Houdini 中的 API。

• CSS 属性和值 API： 这些 API 用于定义具有特定类型和默认值的自定义属性。此外，这些对于创建可以响应应用程序中变量更改的自定义样式非常有用。
• 绘制 API (绘制工作线程)： 用于创建可作为背景图像或边框使用的自定义绘制函数。它可以在 CSS 中直接生成复杂的图案、渐变或形状，而无需外部图像。
• 动画工作线程： 用于创建对滚动、用户交互或基于时间事件做出响应的自定义动画。通过它我们可以创建复杂的动画。
• 布局 API： 用于创建自定义布局算法，如砌体或网格布局。
• 类型化 OM： 它提供了一种方法来处理 CSS 值作为结构化数据而不是纯字符串。

43. 解释 `CSS 绘制 API` 和 `CSS 动画 API`。

CSS 绘制 API 和 CSS 动画 API 是 CSS Houdini 套件的两个关键组件。它们为开发人员提供了低级访问权限，以扩展和自定义 CSS 如何绘制和动画化元素。

CSS 绘制 API（也称为绘制工作线程）用于开发人员使用 JavaScript 以编程方式创建自定义图形、图案和图像，然后可以将其用作 CSS 背景、边框或其他视觉效果。绘制 API 使用一个特殊的 JavaScript 文件来定义如何绘制自定义图形。工作线程注册一个绘制函数，浏览器在需要渲染图形时调用该函数。以下代码使用 CSS 和 JavaScript 定义了绘制 API。

<!--Example: Creating a Striped Background with the Paint API-->

<!--JavaScript Code-->
<script>
    // Register a new paint worklet
    registerPaint('stripes', class {
    paint(ctx, size) {
        // Draw stripes pattern
        ctx.fillStyle = '#f06';
        for (let i = 0; i < size.width; i += 20) {
        ctx.fillRect(i, 0, 10, size.height);
        }
    }
    });
</script>

<!--CSS Implementation-->
<style>
    .element {
        background-image: paint(stripes);
    }
</style>

CSS 动画 API 用于开发人员创建复杂且高度可定制的动画，这些动画可以响应用户交互、滚动事件或任何其他动态条件。此方法允许在运行时精确控制动画，从而可以创建实时响应输入的动画。动画 API 使用动画工作线程，开发人员在其中定义动画逻辑。

<!--Example: Creating a Scroll-Based Animation -->

<!--JavaScript Code-->
<script>
// Register a new animator
registerAnimator('scrollAnimator', class {
  animate(currentTime, effect) {
    effect.localTime = currentTime * 100; // Speed up the animation
  }
});
</script>


<!--CSS Implementation-->
<style>
    .element {
        animation-timeline: paint(scrollAnimator);
        animation-name: scrollAnimation;
    }
  
    @keyframes scrollAnimation {
        from { transform: translateY(0); }
        to { transform: translateY(100px); }
    }  
</style>

44. 解释容器查询以及它们与媒体查询有何不同。

容器查询和媒体查询是 CSS 中用于根据某些条件应用样式的两种技术。CSS 中的容器查询用于根据包含元素的大小应用样式。而媒体查询用于根据视口的大小应用样式。

• 可以使用 @container 规则定义容器查询。
• 我们需要设置属性 `container-type: inline-size;` 以使元素成为触发容器查询的容器。
• 就像媒体查询一样，容器查询侦听容器宽度、高度或其他特征的变化。

以下是容器查询的 CSS 代码。

/* Make a container */
.container {
  container-type: inline-size; /* Defines the container */
  width: 100%;
}

/* Apply styles based on container size */
@container (min-width: 500px) {
  .box {
    background-color: lightblue;
  }
}

@container (min-width: 800px) {
  .box {
    background-color: lightgreen;
  }
}

45. 什么是关键 CSS 及其重要性。

关键 CSS 是一种用于优化网站加载性能的技术，它将渲染视口以上内容（无需滚动即可看到的页面部分）所需的 CSS 与其余 CSS 分离并优先处理。

以下是关键 CSS 的工作原理。

• 识别关键 CSS： 确定哪些 CSS 规则对于设置视口以上内容的样式是必要的。
• 内联关键 CSS： 将关键 CSS 直接插入 HTML 文档的 <head> 部分，以便它与页面一起立即加载。
• 延迟非关键 CSS： 通过链接到异步加载的外部 CSS 文件，在主要内容显示后加载其余 CSS（非关键 CSS）。

以下是在 HTML 文档中使用关键 CSS 的示例。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Website</title>
    <style>
        /* Critical CSS inlined directly for faster rendering */
        body { 
            font-family: Arial, sans-serif; 
        }
        .header { 
            background-color: #333; 
            color: #fff; 
            padding: 10px; }
    </style>
    <link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">
    <noscript><link rel="stylesheet" href="styles.css"></noscript>
</head>
<body>
  <div class="header">Welcome to My Website</div>
  <div class="main-content">This is the main content area.</div>
</body>
</html>