面试大厂，这些 CSS 问题一定要掌握

在现代前端中，面试对于 CSS 的考察要求较低，几乎无法与 JavaScript 相提并论，甚至无法与 JavaScript 的某一细分专题相提并论。

在现代前端面试中，虽然 CSS 考察的比重不及 JavaScript，但掌握核心的 CSS 知识点依然是前端工程师的必备技能。本文系统整理了前端面试中高频的 CSS 面试题，包含答案详解和代码示例，助你轻松应对技术面试。

💡 更多前端面试题，请查看前端面试题库

盒模型

• 题目：简述 CSS 的盒模型

CSS 的盒模型主要包括以下两种，可通过 box-sizing 属性进行配置：

• content-box：默认属性。width 只包含 content
• border-box：width 包含 (content、padding、border)

CSS specificity (权重)

• 题目：简述下 css specificity

css specificity 即 css 中关于选择器的权重，以下三种类型的选择器依次下降

1. id 选择器，如 #app
2. class、attribute 与 pseudo-classes 选择器，如 .header、[type="radio"] 与 :hover
3. type 标签选择器和伪元素选择器，如 h1、p 和 ::before

其中通配符选择器 *，组合选择器 + ~ >，否定伪类选择器 :not() 对优先级无影响

另有内联样式 <div class="foo" style="color: red;"></div> 及 !important(最高) 具有更高的权重

:not 的优先级影响 - codepen 可以看出 :not 对选择器的优先级无任何影响

CSS Specificity - codepen 可以看出十几个 class 选择器也没有一个 id 选择器权重高

补充问题:

1. 100 个 class 选择器和 id 选择器那个比较高
2. 属性选择器和类选择器哪个权重较高
3. 通配符选择器和元素选择器哪个权重教高

’+’ 与 ’~’ 选择器有什么不同

• 【Q315】’+’ 与 ’~’ 选择器有什么不同

• + 选择器匹配紧邻的兄弟元素

• ~ 选择器匹配随后的所有兄弟元素

z-index 与层叠上下文

• 题目：如何更好地给元素设置 z-index
• 题目：z-index: 999 元素一定会置于 z-index: 0 元素之上吗

z-index 高数值一定在低数值前边吗，div 层级如下所示

• A -> 3
  • AA -> 1000
• B -> 4
  • BB -> 10

代码见 zindex - codepen

不一定，更复杂的示例见 层叠上下文 - MDN

水平垂直居中

• 题目: 如何实现一个元素的水平垂直居中
• 代码: absolute/translate

宽高不定的块状元素水平垂直居中，可见以下示例

• absolute/translate

同时提供几种不同的思路：

• flex:
  • justify-content: center
  • align-content: center
• grid
  • place-items: center
• absolute/translate
  • position: absolute
  • left/top: 50%
  • transform: translate(50%)
• ##absolute/inset##

左侧固定、右侧自适应

• 题目: css 如何实现左侧固定300px，右侧自适应的布局
• 代码: 代码

提供 flex 与 grid 布局的两种思路

• flex:
  • 左侧: flex-basis: 200px
  • 右侧: flex-grow: 1; flex-shrink: 0;
• grid
  • 父容器: grid-template-columns: 200px 1fr;

.container
  .left
  .main

.container {
  display: grid;
  grid-template-columns: 300px 1fr;
}

三栏均分布局

• 题目: 如何实现三列均分布局
• 代码: 如何实现三列均分布局

同样提供 flex 与 grid 的两种方案

• flex:
  • 方案一: flex: 1;
  • 方案二: flex-basis: calc(100% / 3)
• grid:
  • 父容器: grid-template-columns: 1fr 1fr 1fr

进一步问题：如何实现十六列均分布局？

如何画一个正方形/长宽固定的长方形

• 问题：如何画一个正方形/长宽固定的长方形

过去的解决方案是使用 padding。一个元素的 padding 如若设置为百分比，则代表的是以父元素宽度为基准，根据这个原理，可设置长宽比。但实际上意义有限，毕竟你把 padding 给占了，content 无任何区域。

现代化的解决方案是使用长宽比的 CSS 属性: aspect-ratio。

CSS 如何避免样式冲突

• 题目：写 CSS 时如何避免命名样式冲突

1. BEM 式: .home-page .home-page-btn

.home-page {
  .home-page-btn {}
}

BEM 有一个缺点，就是有些太长，可适当简化，只包裹该页面组件的根类名，但有可能增加样式冲突的风险

.home-page {
  .btn {}
}

2. CSS Scoped

scoped css 会对当前组件(scope)下所有元素生成唯一的属性或类名，对所有 CSS 规则将携带唯一属性实现作用域的命名保护

// 手动写
.btn {}
 
// 编译后
.btn .jsx-1287234 {}
 

3. CSS Module

• css-modules repo
• css-modules demo

module css 会对类名进行 hash 化

CSS 变量

• 题目：有没有使用过 css variable，它解决了哪些问题

:root{
  --bgcolor: #aaa;
  --color: #000;
}

CSS 配置暗黑模式

• 题目：如何使用 CSS 实现网站的暗黑模式 (Dark Mode)

最简单来讲，可通过媒体查询 @media (prefers-color-scheme: dark) 与 CSS 变量实现。

@media (prefers-color-scheme: dark) {
    :root{
    }
}