DanLevy.net

测验：你了解现代CSS吗？（2025版）

你的前端功力够吗？

测验：你了解CSS吗？

1. 

热身

使用名为 --main-color 的 CSS 变量来设置元素背景颜色的正确方法是什么？

:root {
  --main-color: blue;
}
div {
  /* How do we use --main-color here? */
}

CSS 变量通过 var 函数使用，因此正确答案是 background-color: var(--main-color);。此语法会获取 --main-color 的值并应用它。

其他选项可能来自其他语言或预处理器语法，例如 Sass 或 Less。

2. 

CSS 函数

如果父容器宽度为 400px，以下元素的计算宽度是多少？

div {
  width: min(250px, 50%);
}

min() 函数会选择 250px 和父容器宽度 50% 中的最小值。

要理解计算值，我们需要将相对单位转换为像素：

  • 400px 的 50% 是 200px
  • 250px 已经是像素值
/* This gets computed to */
width: min(250px, 200px);
/* -> 200px wins */

min() 函数在响应式设计中特别有用，可以确保组件（或字体大小）不超过某个限制。

3. 

CSS 函数

假设一个容器的宽度为 200px，那么 <div> 的计算宽度是多少？

div {
  width: max(50px, 10%, 6rem);
}

max() 函数接受两个或更多输入，并自动使用最大值。假设根字体大小为浏览器默认的 16px，则宽度计算结果为 96px。

要理解计算值，我们需要将相对单位转换为像素：

  • 50px 已经是像素单位
  • 200px 的 10% 是 20px
  • 6rem 是 6 * 16px（默认字体大小），即 96px
/* This gets computed to */
width: max(50px, 20px, 96px);
/* -> 96px wins */

4. 

CSS 网格函数

在 CSS 网格轨道中使用 minmax(100px, 200px) 的效果是什么？

grid-template-columns: minmax(100px, 200px);

使用 minmax(100px, 200px) 允许网格轨道在 100px 和 200px 之间调整大小，适应可用空间，但绝不会低于 100px 或高于 200px。

你可以创建自动调整的布局，其中容器和子元素各自在计算布局中发挥作用。当与 repeat() 和 auto-fill 或 auto-fit 结合使用时，这非常强大，它会在约束条件下创建尽可能多的轨道。

5. 

CSS 变量

以下 CSS 的背景颜色是什么？

div {
  background: var(--primary, olivedrab);
}

var() 函数允许你在变量未定义时设置一个回退值。在这个例子中，背景色将是 olivedrab（#6b8e23），因为 --primary 未定义。

这是确保你的样式在变量缺失或不支持时不会出错的好方法。

6. 

CSS 函数

clamp() 的作用是什么？

.card {
  width: clamp(200px, 50vw, 500px);
}

clamp() 函数允许宽度基于 50vw 缩放，但将其保持在 200px 到 500px 的范围内。

这意味着当 50vw 小于 200px 时，宽度为 200px；当 50vw 大于 500px 时，宽度为 500px；在这两个限制之间则为线性变化。

它让你实现自动魔法般的响应式设计！关于 clamp 需要知道的是，它结合了固定单位与响应式或计算单位。

通常你不会想对字体大小使用视口单位，但使用 clamp() 可以确保字体大小不会变得太小或太大。

7. 

CSS嵌套

CSS原生支持嵌套吗？

是的！我们终于有了原生CSS嵌套！CSS在近年（2023年）引入了原生嵌套语法，允许直接在CSS中进行层级样式设置。

8. 

CSS 嵌套

这是原生 CSS 嵌套的正确用法吗？

.container {
  color: black;
  .title {
    color: white;
    background: black;
  }
}

.title 类嵌套在 .container 类中，属性按预期应用。

这是一种将相关样式保持在一起并避免长选择器的好方法。

9. 

CSS 嵌套

.container 的直接子元素 div 会应用什么背景颜色？

.container {
  background-color: red;
  > div {
    background-color: white;
  }
  background-color: blue !important;
}

嵌套规则中的 > 选择器仅对 .container 内的直接子元素 div 应用 background-color: white。

最后一条规则 background-color: blue !important; 是个小干扰。它在嵌套规则之外，将应用于所有 .container 元素。

10. 

CSS变量

如何在运行时更改CSS变量的值？

CSS变量可以通过类和JavaScript设置。它们甚至可以在技术上被使用’之后’才定义。

document.documentElement.style.setProperty('--main-color', 'blue');

这将把整个文档的--main-color的值改为blue。

CSS变量是可变的，可以在运行时通过JavaScript更改。

它们也可以通过添加或删除类来更改，这是主题化的常见模式。

11. 

CSS 变量

该元素的计算宽度是多少？

:root {
  --base-width: 100px;
}
div {
  width: calc(var(--base-width) + 10px);
}

calc() 函数将 --base-width 的值（100px）与额外的 10px 相结合，最终宽度为 110px。

Loading comments...