6 道 CSS 面试高频题，从原理到代码一次性讲透（下）前言这些是前端面试中被问烂却又答不好的 CSS 经典题。很多同

前言

"flex 布局你怎么理解？" "BFC 是什么？" "怎么用 CSS 画三角形？"

这些是前端面试中被问烂却又答不好的 CSS 经典题。很多同学能背出几个属性，却讲不清原理、说不出场景，面试时三两句就被追问到卡壳。

本文把 6 道 CSS 布局高频题 系统梳理一遍，每道题都按照「原理 → 代码 → 面试话术」三段式拆解，既能当复习提纲，也能直接拿去背。

1. 元素水平垂直居中的实现方案

核心：分三类记

① 宽高未知（首选）

/* flex 最常用 */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* grid 一步到位 */
.parent {
  display: grid;
  place-items: center;
}

/* absolute + transform（位移自身一半） */
.child {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

② 宽高已知

.child {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  height: 100px;
  margin: -50px 0 0 -100px; /* 负 margin = 自身一半 */
}

/* 或：四方向置 0 + margin:auto 均分剩余空间 */
.child {
  position: absolute;
  inset: 0;
  width: 200px;
  height: 100px;
  margin: auto;
}

③ 单行文本

.parent {
  text-align: center;
  line-height: 100px; /* 行高 = 容器高度 */
}

面试话术：首选 flex / grid，都不需要知道宽高；宽高已知时用负 margin 或 margin: auto；单行文本用 text-align + line-height。

2. 说说你对 flex 布局的理解

是什么

flex 是 CSS3 的一维布局模型。给容器设置 display: flex 后，子元素沿主轴排列，可灵活分配空间、对齐，轻松实现水平排列、垂直居中、等分布局等传统写法很难实现的效果。

核心属性（两条轴 + 两组属性）

容器属性	作用	项目属性	作用
flex-direction	主轴方向 row / column	flex: 1	等分剩余空间
justify-content	主轴对齐	flex-grow	放大比例
align-items	侧轴对齐	order	排列顺序
flex-wrap	是否换行	align-self	单项覆盖对齐

让 ul 中 li 水平排列

ul {
  display: flex;
  justify-content: space-between; /* 均匀分布 */
}

相比 float: left 的写法，flex 没有高度塌陷、不需要清除浮动、天然响应式。

三栏布局（左右固定，中间自适应）

.container {
  display: flex;
}
.left,
.right {
  width: 200px;
}
.center {
  flex: 1;
}

3. 你是怎么处理浮动的

问题的根源

float 最初是为图文环绕设计的（文字环绕图片），并不是用来做整体布局的。拿它做布局会带来经典问题——父元素高度塌陷：

li {
  float: left; /* ul 高度变为 0，后面的元素会"钻"上来重叠 */
}

原因：浮动元素脱离文档流，父元素计算高度时感知不到它们。

三种方案

① 伪元素 clearfix（标准写法，最推荐）

.parent::after {
  content: "";
  display: block;
  clear: both;
}

在父元素末尾"塞"一个不可见的块级元素并清除浮动，让父元素重新包裹住浮动子元素。无副作用，是生产环境的标准写法。

② overflow: hidden（触发 BFC）

.parent {
  overflow: hidden; /* 副作用：溢出内容被裁剪 */
}

原理是触发了父元素的 BFC——BFC 计算高度时会把浮动子元素算进去（详见第 4 题）。

③ 末尾加空标签

<div style="clear: both;"></div>
<!-- 污染 HTML 结构，不推荐 -->

面试话术：推荐 clearfix；现代布局优先 flex / grid，浮动已基本退役。

4. 说说你对 BFC 的理解

是什么

BFC（Block Formatting Context，块级格式化上下文）= 一块独立的渲染区域，内部布局不受外界影响，像"隔离结界"。

触发条件（记 4 个）

float 不为 none
position: absolute | fixed
overflow: hidden | auto
display: flex | grid | inline-block

根元素 <html> 天然是 BFC。

三条关键规则 → 三个应用

规则	应用
相邻盒子 margin 重叠	解决父子 margin-top 塌陷、兄弟 margin 重叠
BFC 区域不与浮动重叠	自适应两栏布局
计算高度包含浮动	清除浮动（高度塌陷）

/* 解决 margin-top 穿透 bug：给父元素触发 BFC */
.parent {
  overflow: hidden;
}

面试话术：记住「三条规则 + 三个应用」即可覆盖大部分考题。

5. 你是怎么做响应式布局的

公式：flex/grid 打底 + 媒体查询断点 + vw/rem 等比缩放

① 媒体查询（核心）

@media screen and (max-width: 768px) {
  .box {
    width: 100%;
  }
}

② flex / grid 弹性布局：容器变化时子元素自动伸缩换行（内功）

③ 百分比 %：宽度相对父元素，实现流式布局

④ vw / vh 视口单位：相对视口，移动端常配 postcss 转 vw

⑤ rem + 动态根字号

document.documentElement.style.fontSize =
  document.documentElement.clientWidth / 10 + "px";

⑥ 图片响应式

img {
  max-width: 100%;
}

移动端必备

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

否则手机按 980px 默认视口渲染后再缩小，响应式全部失效。

6. 怎么用 CSS 画一个三角形

原理

元素宽高为 0 时，四个 border 的交界处是 45° 斜切，形成四个三角形；把不需要的三个边框设为透明，只给一个上色，就得到一个三角形。

实现（向上）

.triangle {
  width: 0;
  height: 0;
  border: 50px solid transparent; /* 先全透明 */
  border-bottom-color: red; /* 给对边上色 = 朝上 */
}

口诀：想朝哪，就给它的"对边"上色。

四方向速查

向上 border-bottom-color;
向下 border-top-color;
向左 border-right-color;
向右 border-left-color;

加分项：气泡框尖角 = 两个三角错位叠加

.pop::before,
.pop::after {
  content: "";
  border: 10px solid transparent;
}
.pop::before {
  border-bottom-color: #ccc; /* 外：边框色 */
}
.pop::after {
  border-bottom-color: #fff; /* 内：盖出白边 */
  top: 2px;
}

总结

这 6 道题覆盖了 CSS 布局的核心考点，记住这几条主线：

居中：flex / grid 首选，按"宽高是否已知"分类记忆
flex：两条轴 + 容器/项目两组属性，三栏布局是必背
浮动 & BFC：浮动的副作用靠 BFC 来解决，两者是一对
响应式：弹性布局打底，媒体查询做断点，vw/rem 做等比缩放
三角形：border 斜切原理 + "对边上色"口诀

如果你觉得有用，点赞 + 收藏，面试前翻一翻，稳了 👍

6 道 CSS 面试高频题，从原理到代码一次性讲透（下）

前言

目录