2025🌟CSS大厂面试必考！！！---CSS知识模块汇总问答✅

3Katrina
427 阅读15分钟

前言

大家好，我是3Katrina，为了迎接九月份即将到来的秋招面试季，以及复习一下之前所学的知识点，我准备最近更新几篇面试的知识模块汇总文章，也是为了建立自己的知识体系，把自己学的各种各样的知识点系统地梳理一遍。

今天，这篇文章就会以问答的方式来温故而知新！系统化梳理CSS中大厂面试需要掌握的知识点！

上面说的有点啰嗦了，让我们直接开始今天的知识模块汇总吧！

image.png

一、基础概念

涉及内容：css的声明，声明块、选择器、role

Q1: CSS声明块(declaration block)由什么组成？写一个例子说明

/* 例子 */
h1 {
  color: red;      /* 声明(declaration) */
  font-size: 24px; /* 声明由属性(property)和值(value)组成 */
}
上面的整个结构是一个role
  • 声明 = 属性 + 值 + 分号
  • 声明块 = 大括号包围的一组声明
  • 选择器 = {}前面的内容，有各种各样的选择器
  • 规则集(role) = 选择器 + 声明块

Q2：在CSS中，有哪些选择器？

在CSS中，常见的选择器有以下几类：

  1. 基础选择器：

    • 元素选择器（如 div）
    • 类选择器（如 .class）
    • ID选择器（如 #id）
    • 通配符选择器（如 *）

  2. 组合选择器：

    • 后代选择器（如 div p）
    • 子元素选择器（如 div > p）
    • 相邻兄弟选择器（如 div + p）
    • 通用兄弟选择器（如 div ~ p）

  3. 属性选择器：

    • 存在选择器（如 [target]）
    • 值匹配选择器（如 [type="text"]）

  4. 伪类选择器：

    • 动态伪类（如 :hover, :active）
    • 结构伪类（如 :first-child, :nth-child(n)）

  5. 伪元素选择器：

    • 如 ::before, ::after

  6. 其他：

    • 群组选择器（如 div, p）

关于这部分内容，大家如果想要详细了解，可以查看这篇的文章《CSS选择器完全手册：从基础选择器到高级伪类实战》，这篇文章是和上面两个问题非常挂钩的，这篇文章我杜撰了很久，确保小白也能看得懂，强烈建议可以去读一遍


二、层叠样式

涉及内容：层叠样式的计算、css继承

Q1: 计算下列选择器的权重：#nav .list li:hover

解答：

#nav → 100 (ID)
.list → 10 (class)
li → 1 (元素)
:hover → 10 (伪类)
总权重：121

总结：

  • 权重计算：!important > 行内样式(1000) > ID(100) > class/伪类/属性(10) > 元素/伪元素(1)
  • 层叠顺序：来源重要性 > 权重 > 代码顺序

Q2: 什么情况下应该使用 !important？为什么通常不推荐使用？

参考答案：

  • 适用场景：

    • 覆盖第三方库的样式
    • 处理最高优先级的需求（如可访问性样式）

  • 不推荐原因：

    • 破坏样式表的可维护性
    • 导致优先级战争（需要更多 !important 来覆盖）
    • 难以调试

Q3: 解释 CSS 继承机制，哪些属性是可继承的？

参考答案：

  • 可继承属性（典型例子）：

    • 文本相关：font, color, line-height
    • 列表相关：list-style
    • 表格相关：border-collapse

  • 不可继承属性：

    • 盒模型相关：margin, padding, border
    • 定位相关：position, top, z-index

三、文档流概念

涉及内容：文档流详解

Q1: 请讲讲什么是文档流？

文档流（Normal Flow）  是指 HTML 元素默认的布局方式，浏览器按照元素在 HTML 中的书写顺序，从上到下、从左到右依次排列元素。

文档流的特点：

  1. 块级元素（如 div、p）默认独占一行，垂直排列。
  2. 行内元素（如 span、a）默认水平排列，直到占满一行才换行。
  3. 元素顺序 遵循 HTML 结构，未脱离文档流的元素会相互影响布局。

脱离文档流的方式：

  • float（浮动）
  • position: absolute/fixed（绝对/固定定位）

脱离文档流后，元素不再占据原来的空间，其他元素会重新排列。

总结：文档流是浏览器默认的布局方式，理解它有助于掌握 CSS 布局的核心机制。


Q2: 行内元素和块级元素有哪些，它们有什么特点？

1. 常见的行内元素（Inline）

<span>、<a>、<strong>、<em>、<img>、<input>、<button>、<label> 等。

特点：

  • 默认不换行，多个行内元素会排列在同一行，直到空间不足才换行。
  • 宽高由内容决定，直接设置 width 和 height 无效（但 img、input 等替换元素可以设置）。
  • 只能包含行内元素或文本（不能嵌套块级元素，如 <a> 里不能放 <div>）。
  • margin/padding 左右生效，上下不占空间（不影响行高，但可能覆盖其他行）。

2. 常见的块级元素（Block-level）

<div>、<p>、<h1>~<h6>、<ul>、<ol>、<li>、<section>、<article> 等。

特点：

  • 默认独占一行，前后会自动换行。
  • 可以设置宽高（width/height） ，默认宽度占满父容器（width: 100%）。
  • 可以包含行内元素和块级元素（如 <div> 里可以放 <p> 或 <span>）。
  • margin/padding 上下左右均生效，会影响布局。

3. 特殊的 display: inline-block行内块元素

  • 兼具行内和块级特点：

    • 像行内元素一样不换行排列。
    • 像块级元素一样可设置宽高、margin/padding 完全生效。

  • 典型应用：导航菜单、按钮组、图片列表等。


Q3: 讲讲标准和模型和怪异盒模型

1. 标准盒模型（box-sizing: content-box，默认）

  • 组成：

    • width 和 height 仅指 内容区域（content）  的尺寸。
    • 实际占用空间 = width/height + padding + border + margin。

2. 怪异盒模型（box-sizing: border-box）

  • 组成：

    • width 和 height 包含 内容（content）+ 内边距（padding）+ 边框（border）。
    • 实际占用空间 = width/height（已含 padding 和 border） + margin。

Q4: 讲讲position: absolute 和 position: relative 的区别？

1. position: relative（相对定位）

  • 特点：

    • 不脱离文档流，元素仍在原始位置占据空间。
    • 定位基准：相对于 自身原本的位置 进行偏移（通过 top、right、bottom、left 调整）。
    • 不影响其他元素布局，周围的元素仍按它原本的位置排列。

2. position: absolute（绝对定位）

  • 特点：

    • 脱离文档流，元素不再占据原始空间，后续元素会填补其位置。
    • 定位基准：相对于 最近的已定位祖先元素（即 position 非 static 的父级），如果没有则相对于 <body>。
    • 需要显式设置偏移量（如 top、left），否则位置可能失控。

四、BFC

涉及内容：BFC的定义、父容器塌陷问题详解

Q1: 什么是 BFC（块级格式化上下文）？它有什么作用和触发条件？

参考答案：

  • 定义：BFC 是页面上的一个独立渲染区域，内部元素不影响外部布局

  • 特点：整个html就是一个大的BFC，符合文档流，在html中，某些元素可以通过特定的css创建新的BFC，这些新的 BFC 会独立于外部环境进行渲染。

  • 触发条件：

    • overflow: hidden/auto/scroll（非 visible）。
    • float: left/right（非 none）。
    • position: absolute/fixed。
    • display: inline-block/flex/grid 等。

  • 作用：

    • 防止外边距重叠（margin collapse）。
    • 清除浮动（避免父元素高度塌陷）。
    • 阻止元素被浮动元素覆盖。

Q2：什么是父元素塌陷，如何解决父容器塌陷？

1.什么是父元素塌陷？

父元素塌陷（Parent Collapse）是指 父容器的高度无法自动撑开，导致布局异常的现象。常见于以下场景：

  • 子元素浮动（float） ：浮动元素脱离文档流，父元素高度计算时忽略浮动子元素。
  • 子元素绝对定位（position: absolute/fixed） ：绝对定位元素脱离文档流，父元素高度塌陷。

示例：

   <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent {
    border: 2px solid #ff0000;
    background: #f0f0f0;
    }

    .float-child {
  float: left;
  width: 100px;
  height: 100px;
  background: lightblue;
    }   

.sibling {
  background: yellow;
}

    </style>
</head>
<body>
    <div class="parent">
        <div class="float-child">浮动元素</div>
      </div>
      <div class="sibling">相邻兄弟元素</div>
</body>
</html>

  • 表现：

    • 父元素 .parent 设置了红色边框和灰色背景，但高度塌陷为 0（仅剩 2px 边框高度）。
    • 相邻兄弟元素 .sibling（黄色背景）会紧贴在父元素边框下方，仿佛浮动元素不存在。

  • 原因：
    子元素 .float-child 设置了 float: left，脱离文档流，导致父元素无法自动计算其高度。

image.png

2. 解决方法（针对示例的 4 种方案）

方法1：Clearfix（最经典）

.parent::after {
  content: "";
  display: block;
  clear: both; /* 清除左右浮动 */
}

效果：

  • 父元素高度恢复，包含浮动子元素。
  • 兄弟元素 .sibling 正常排列在下方。

方法2：触发 BFC（推荐）

.parent {
  overflow: hidden; /* 或 auto */
}

效果：

  • 父元素形成 BFC，自动计算浮动元素高度。
  • 注意：若子元素超出父容器，overflow: hidden 会裁剪内容。

方法3：Flex 布局（现代方案）

.parent {
  display: flex; /* 父元素变为 Flex 容器 */
}

效果：

  • 直接避免浮动问题，父元素高度正常。
  • 无需额外清除浮动代码。

方法4：手动设置高度（不推荐）

.parent {
  height: 100px; /* 需提前知道子元素高度 */
}

缺点：

  • 不灵活，子元素高度变化时需同步调整。

调整后效果：父元素创建了一个新的BFC，因此可以计算里面浮动元素的高度

image.png


五、BEM命名规范

涉及知识：BEM 的基本概念和设计原则。

Q1: 什么是 BEM 命名规范？它的核心思想是什么？

参考答案：
BEM（Block-Element-Modifier）是一种 CSS 命名方法论，核心思想是模块化和可维护性，通过以下方式组织类名：

  • Block（块） ：独立的组件（如 .header、.menu）。
  • Element（元素） ：块的组成部分（如 .menu__item）。
  • Modifier（修饰符） ：表示状态或变体（如 .menu__item--active）。

优点：

  • 避免样式冲突（通过层级关系）。
  • 提高代码可读性和团队协作效率。

Q2: 请用 BEM 规范改写以下代码

原始代码：

<div class="user-card">
  <img class="avatar" src="..." alt="Avatar">
  <h3 class="name">John Doe</h3>
  <button class="btn active">Follow</button>
</div>

BEM 改写后：

<div class="user-card">
  <img class="user-card__avatar" src="..." alt="Avatar">
  <h3 class="user-card__name">John Doe</h3>
  <button class="user-card__btn user-card__btn--active">Follow</button>
</div>

关键点：

  • 块名（user-card）作为前缀。
  • 元素用 __ 连接（如 user-card__avatar）。
  • 修饰符用 -- 连接（如 user-card__btn--active）。

这部分知识点可以看这篇文章《从WEUI看BEM的强大：组件化开发的命名艺术》


六、flex

涉及内容：flex基础概念，flex的相关计算

Q1: Flex 布局的核心概念是什么？请解释 flex container 和 flex item 的区别

参考答案：

在现代CSS布局中，Flexbox（弹性盒子）因其强大的对齐和空间分配能力，成为前端开发的核心工具之一。

  • Flex Container：通过 display: flex 定义的容器，控制内部项目的排列方式

  • Flex Item：Flex 容器内的直接子元素，受Flex Container的管控


Q2: 请讲讲Flex中的重要属性

Flex是现代化CSS几乎用得最多的布局方式，让我们对它的重要属性进行讲解！

1. display:flex

将父容器中设置为弹性布局盒子Flex

.container{
    display:flex
}

将元素设置为 flex 容器，其直接子元素自动成为 flex 项目(Flex Item)，形成一个弹性盒子布局上下文(FFC)。

2.改变主轴

Flex默认主轴为横轴，可以通过使用 flex-direction 改变主轴方向：

.container {
  flex-direction: row; /* 默认值，水平方向从左到右 */
  flex-direction: row-reverse; /* 水平方向从右到左 */
  flex-direction: column; /* 垂直方向从上到下 */
  flex-direction: column-reverse; /* 垂直方向从下到上 */
}

3.改变主轴布局方式

我们可以通过使用 justify-content 控制主轴上的对齐方式：

.container {
  justify-content: flex-start; /* 默认值，从起点开始排列 */
  justify-content: flex-end; /* 向终点对齐 */
  justify-content: center; /* 居中对齐 */
  justify-content: space-between; /* 两端对齐，项目间间隔相等 */
  justify-content: space-around; /* 项目两侧间隔相等 */
  justify-content: space-evenly; /* 所有间隔完全相等 */
}

4.改变纵轴布局方式

使用 align-items 控制纵轴上的对齐方式：

.container {
  align-items: stretch; /* 默认值，拉伸填满容器高度 */
  align-items: flex-start; /* 沿交叉轴起点对齐 */
  align-items: flex-end; /* 沿交叉轴终点对齐 */
  align-items: center; /* 居中对齐 */
  align-items: baseline; /* 按基线对齐 */

对于纵轴排列，实际上每个子容器也可以单独定义排列方式align-self，此属性的可选值与父容器 align-items 属性完全一致，如果两者同时设置则以子容器的 align-self 属性为准。

/* 子容器的自定义排列方式 align-self */
.item {
  align-self: auto;       /* 默认值，继承父容器的 align-items */
  align-self: stretch;    /* 拉伸填满容器高度 */
  align-self: flex-start; /* 向交叉轴起点对齐 */
  align-self: flex-end;   /* 向交叉轴终点对齐 */
  align-self: center;     /* 居中对齐 */
  align-self: baseline;   /* 按基线对齐 */
}

5.换行控制

使用 flex-wrap 控制项目是否换行：

.container {
  flex-wrap: nowrap; /* 默认值，不换行 */
  flex-wrap: wrap; /* 换行，第一行在上方 */
  flex-wrap: wrap-reverse; /* 换行，第一行在下方 */
}

这部分内容给大家推荐一篇文章《 一劳永逸的搞定 flex 布局》，讲的非常好！


Q3: 如何实现一个三栏布局，左右固定宽度，中间自适应？

参考答案： 我们可以通过浮动、绝对定位等方式来实现三栏布局，但是现代化最常用、最简洁的方式就是使用flex实现：

<div class="container">
  <div class="left" style="width: 200px">左栏</div>
  <div class="middle" style="flex: 1">中栏</div>
  <div class="right" style="width: 200px">右栏</div>
</div>

.container {
  display: flex;
}

补充方案如下：

Grid 布局

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

方案三：传统浮动布局

.left { float: left; width: 200px; }
.right { float: right; width: 200px; }
.center { margin: 0 200px; }

方案四：绝对定位

.container { position: relative; }
.left { position: absolute; left: 0; width: 200px; }
.right { position: absolute; right: 0; width: 200px; }
.center { margin: 0 200px; }

Q4: 请详细讲讲Flex布局中的flex属性

flex 是 CSS Flexbox 布局中的一个复合属性，它是三个子属性的复合： flex-grow、flex-shrink 和 flex-basis 。其中：

  1. flex-grow：定义项目在容器有剩余空间时的扩张比例。
  2. flex-shrink：定义项目在容器空间不足时的收缩比例。
  3. flex-basis：设置项目的初始基准尺寸（类似width，但优先级更高）。

它们的默认值分别是：0 1 auto（不扩张、可收缩、基准尺寸为内容大小）

比如我们在业务中常见的写法flex: 1 实际上是为这三个子属性指定以下值：

  • flex-grow: 1
  • flex-shrink: 1
  • flex-basis: auto

这道题涉及到一些具体计算，这里就不展开了，但是却十分重要，大家请移步看这篇文章深入CSS弹性布局计算原理：从flex-grow扩张到flex-shrink收缩，里面讲了flex的详细计算。


七、float

涉及知识：float详解

Q1: Float 的工作原理是什么？它如何影响文档流？

参考答案：

  • 工作原理：元素浮动后会脱离正常文档流，向左/右移动直到碰到容器边缘或其他浮动元素，我们也可以说float部分脱离文档流，因为对比postion:absolute等方式，它还是有些特别的。

  • 对文档流的影响：

    • 脱离文档流（但仍在布局中影响文本和行内元素）
    • 非浮动块级元素会忽略浮动元素的位置（可能重叠）
    • 行内内容（如文本）会围绕浮动元素排列

Q2: Float 和 position: absolute 在脱离文档流方面有什么区别？

考察点：对定位机制的深入理解
参考答案：

特性Floatposition: absolute
文档流影响部分脱离（仍占据布局空间）完全脱离（不占空间）
定位基准基于文档流位置基于最近的定位祖先
对其他元素影响文本环绕效果完全不影响其他元素布局

Q3: 如何实现文字环绕图片效果？

参考答案：

<div class="container">
  <img src="photo.jpg" style="float: left; margin-right: 15px;">
  <p>这里是环绕图片的文字内容...</p>
</div>

这里利用的是float部分脱离文档流的特点，所以导致p标签里面的内容会"环绕"着img


八、stylus

涉及知识：stylus的使用与意义

Q1：什么是stylus

Stylus是一个CSS预处理器，它允许开发者使用.styl后缀的文件编写样式，然后将其编译成标准的CSS文件供浏览器使用。与原生CSS相比，Stylus提供了更多高级功能，使样式表的编写更加高效和专业。 安装Stylus非常简单，只需运行以下命令：

npm install -g stylus

Q2：请说说stylus的核心优势

1. 简洁的语法

Stylus的语法极其简洁，它允许省略花括号、分号和冒号，使用缩进来表示层级关系：

// Stylus语法
body
  font 12px Helvetica, Arial, sans-serif
  color #333

// 编译后的CSS
body {
  font: 12px Helvetica, Arial, sans-serif;
  color: #333;
}

2. 变量和计算

Stylus支持变量和数学运算，使得样式更加灵活：

primary-color = #0982c1
border-width = 5px

button
  color primary-color
  border border-width solid darken(primary-color, 10%)

3. 继承

Stylus支持选择器继承，避免重复代码：

.message
  padding 10px
  border 1px solid #eee

.warning
  @extends .message
  color #e2e21e

4. 自动补全CSS前缀

Stylus会自动为需要浏览器前缀的属性添加前缀：

    .box
      box-shadow 0 0 5px rgba(0,0,0,0.2)
      transform scale(1.1)

5. 模块化和作用域

Stylus支持模块化和作用域的概念，可以更好地组织样式代码：

// variables.styl
primary-color = #0982c1

// buttons.styl
@import 'variables'

button
  background-color primary-color

Q3：为什么要选择stylus？

  1. 更快的开发速度：简洁的语法和强大的功能大幅提升开发效率

  2. 更专业的代码结构：支持变量、混合、函数等编程概念

  3. 更好的可维护性：模块化和继承特性使代码更易于维护

  4. 自动处理兼容性：自动添加浏览器前缀，减少兼容性问题

  5. 灵活的语法：既支持简洁的缩进语法，也兼容标准CSS语法


总结

关于CSS的大厂面试题就先更新那么多，有易有难！这篇文章后续可能还会更新内容，争取全面梳理css的相关内容！

作者后续有空的话，也会跟进js系列以及react系列的大厂面试知识点，敬请期待吧！

创作不易，如果觉得对你有帮助的话，欢迎点赞！关注！收藏！

avatar
文章
阅读
粉丝