Dan Levy

测验：你了解 CSS基础吗？（2025）

你足够前端吗？

测验：你了解 CSS 吗？

1. 

热身：字体

选择 唯一无效的 ❌ font-size：

10cx 不正确，因为 cx 不是一个真实的 CSS 单位。（至少在撰写本文时是如此。）

常用单位包括熟悉的 px、rem、em。

较新的单位对动态、响应式布局很有用。

  • ch - 0 字符的宽度
  • vmin - 视口最小值
  • vmax - 视口最大值
  • vh - 视口高度
  • vw - 视口宽度

还有一些一直存在但很少使用的单位，例如表示厘米的 cm、mm、表示英寸的 in、以及表示点的 pt。

2. 

热身：颜色

你能找出 唯一 有效的 👍 十六进制代码吗？

十六进制代码可用于在 CSS 中表示颜色。它们以 # 开头，必须包含 3、4、6 或 8 位十六进制数字。

3 位十六进制代码是 6 位代码的简写形式，每个字符会重复一次。4 位代码则包含透明度的 alpha 通道。

例如 #ABC 等同于 #AABBCC，#ABCD 等同于 #AABBCCDD。想了解更多十六进制值的处理方式，请查看我的 JavaScript 数字测验。

3. 

热身：单位

以下哪个单位 不是 有效的 ❌ CSS 单位？

像 ch、vmin、vmax、vh、vw 这样的新单位在动态/响应式布局中非常有用。

还有一些一直存在但很少使用的单位，例如表示厘米的 cm、mm、表示英寸的 in、表示点的 pt、pc、表示大写字母大小的 cap，以及等于字母 x 高度的 ex。

常用单位包括熟悉的像素单位 px、相对于元素字体大小的 em，以及 rem——它其实只是相对于根元素的 em 单位，别想太多，它并不是对已逝的 90 年代乐队 R.E.M. 的致敬。

4. 

选择器：基础

以下 HTML 最匹配哪个选择器？

<a id="home" name="home" href="/home">Home</a>

正确答案是 a#home[name='home']，它同时匹配 id 和 name 属性。在标准模式的 HTML 中，ID 值区分大小写，所以 #Home 不匹配 id="home"。空格是后代组合符，会选择某个祖先元素内的另一个元素，而不是把多个条件组合到同一个链接上。

:contains() 选择器不是标准的 CSS 选择器，但在某些 JS 库中可用。

5. 

选择器：基础

哪个选择器匹配下面的 HTML 按钮？

<button onclick="openModal()">Contact</button>

正确答案是 button[onclick]，它匹配属性 onclick 的存在。

请注意，:link 只针对未访问的 href 链接，::click 不是有效的伪元素，且 :focus 只针对获得焦点的元素。

6. 

选择器：基础

以下哪个选择器是无效的？

选择器 c > > d {} 无效，因为子组合符 > 被重复使用且两者之间没有选择器。

其余选择器都是有效的。像 c {} 这样的类型选择器在语法上是合法的 CSS，即使 c 不是标准的 HTML 元素。

7. 

选择器：基础

以下 HTML 中，哪个选择器匹配最后一个链接？

<nav>
  <a name="home" href="/home">Home</a>
  <a name="login" href="/login">Login</a>
  <a name="help" href="/help">Help</a>
</nav>

正确的选择器是 a:last-child，它匹配当 <a> 同时也是其父元素的最后一个子节点时的最后一个 <a>。nav:nth-child(3) 会匹配其父元素的第三个子元素 <nav>。

8. 

选择器：特异性

哪个选择器会拥有更高的优先级？

a#quote 选择器因包含 ID 而拥有最高的特异性，优先级高于仅使用标签或类的选择器。

9. 

布局：居中

哪条声明能让行内文本在其包含块内水平居中？

使用 text-align: center; 可以让块级元素中的文本水平居中。CSS 没有 align 属性。margin: 0 auto; 可以让具有受限宽度的块水平居中，但不会让块内的文本居中。

align-content 在支持的布局上下文中对齐内容，例如网格和多行弹性容器；它不是文本对齐属性。text-content 也不是有效的 CSS 属性。

10. 

布局：居中

如何在现代流式布局中垂直居中块容器内的内容？

使用 align-content 是在流式布局中垂直居中块容器内容的现代方法。

align-items 和 justify-content 属性用于 flexbox 和 grid 布局，而不是流式布局。

margin: 0 auto; 和 margin: auto; 都只能水平居中块级元素，无法垂直居中。

11. 

布局：单位

以下 HTML 中 <a> 链接文本的像素大小是多少？

<body style="font-size: 40px !important;">
  <nav style="font-size: 50%;">
    <a style="font-size: 25%;">HOME</a>
  </nav>
</body>

对于 <a>，font-size 计算结果为 5px：40px（body） * 50%（nav） = 20px，然后 20px * 25% = 5px。

12. 

单位：REM

下面 HTML 中的 “HOME” 链接，1.2rem 的像素大小是多少？

<html style="font-size: 10px;">
  <body style="font-size: 20px;">
    <a style="font-size: 1.2rem;">HOME</a>
  </body>
</html>

1.2rem 转换为 12px，因为 rem 单位引用根元素或 <html> 的字体大小，这里设为 10px。

13. 

单位：EM

和前一道题类似，下面 HTML 中 “HOME” 链接的 1.2em 对应的像素大小是多少？

<html style="font-size: 10px;">
  <body style="font-size: 20px;">
    <a style="font-size: 1.2em;">HOME</a>
  </body>
</html>

1.2em 转换为 24px，因为 em 单位引用继承的字体大小，这里设置为 20px。

14. 

选择器：特异性

哪个选择器的特异性最低？

:where(.card) .title 的特异性最低。:where() 伪类及其内部内容的特异性为 0-0-0，因此仅计算 .title。而 :is(.card) .title 保留了 .card 的特异性，.card .title 包含两个类选择器，#card .title 则包含一个 ID 选择器。

Loading comments...