CSS 作为前端三巨头之一，在面试中出现的频率极高。很多时候不是我们不会写样式，而是面对面试官的提问，总感觉说不到点子上。今天整理了几个高频 CSS 面试题，结合实际代码例子聊聊怎么回答更得体。
CSS 盒子模型：布局的基石
面试官大概率会先问："说说你对 CSS 盒子模型的理解？"
其实浏览器渲染元素时，都会把它变成一个 "盒子"。这个盒子由四部分组成：内容区（content）、内边距（padding）、边框（border）和外边距（margin）。
关键要区分两种盒子模型：
-
标准盒模型：设置的
width和height只包含内容区，padding 和 border 会让盒子实际尺寸变大。就像买的手机，标称 6.7 英寸指的是屏幕，加了手机壳（border）就更宽了。 -
IE 怪异盒模型：
width和height包含内容、padding 和 border。相当于买手机时直接告诉你 "连壳带膜的总尺寸"。
通过box-sizing属性可以切换：
/* 标准盒模型（默认） */
box-sizing: content-box;
/* IE怪异盒模型（推荐） */
box-sizing: border-box;
实际开发中强烈推荐全局使用border-box，看这个例子：
.box{
width: 200px;
padding: 20px;
border: 2px solid red;
box-sizing: border-box; /* 总宽度始终是200px */
}
再也不用为了算总宽度疯狂心算了！
选择器与优先级：样式的 "军令状"
"CSS 有哪些选择器？优先级怎么算？" 这题几乎必问。
常见选择器分类：
-
基础选择器：id（
#box）、类（.box）、标签（div）、通配符（*） -
组合选择器：后代（
div .box）、子代（div > .box）、相邻（div + .box）、群组（div, .box） -
特殊选择器：属性（
[type="text"]）、伪类（:hover）、伪元素（::after）
优先级是重点，记住这个顺序：
!important > id 选择器 > 类 / 伪类 / 属性选择器 > 标签选择器
（后代、子代、相邻这些组合选择器的优先级由组成它的基础选择器决定）
举个例子：
/* 优先级：id选择器 */
#box { color: red; }
/* 优先级：类选择器 < id选择器 */
.box { color: blue; }
/* 加了!important优先级最高 */
.box { color: green !important; }
单位大比拼：em/px/rem/vw/vh
"这些单位有什么区别？什么时候用？"
简单分类：
-
绝对单位：px（像素），固定大小，不随其他因素变化
-
相对单位：
-
em：相对于父元素字体大小（父元素 16px 时，1em=16px）
-
rem：相对于根元素（html）字体大小，方便整体调整
-
vw：视口宽度的 1%（100vw = 满屏宽）
-
vh：视口高度的 1%（100vh = 满屏高）
-
响应式布局推荐用相对单位，比如做移动端适配时：
/* 3.html中的响应式例子 */
.box{
width: 25vw; /* 占视口宽度的25% */
}
@media screen and (max-width: 1000px) {
.box{
width: calc(100vw/3); /* 屏幕变小时每行显示3个 */
}
}
隐藏元素的 N 种方式，区别在哪？
这个问题能看出你对 CSS 细节的掌握程度。
常见方法及区别：
-
display: none：元素彻底消失，不占位置，不响应事件 -
visibility: hidden：元素看不见，但位置保留，不响应事件 -
opacity: 0：完全透明，位置保留，能响应事件（点一下试试？） -
width: 0; height: 0; overflow: hidden：元素尺寸为 0，不占位置 -
clip-path: polygon(0 0, 0 0, 0 0, 0 0)：裁剪成看不见的形状，占位置
/* 4.html中的例子 */
.box {
/* 五种隐藏方式选一种试试 */
/* display: none; */
/* visibility: hidden; */
/* opacity: 0; */
/* width: 0; height: 0; overflow: hidden; */
/* clip-path: polygon(0 0, 0 0, 0 0, 0 0); */
}
BFC：解决布局 "疑难杂症" 的利器
"BFC 是什么？有什么用？" 这个问题能区分初级和中级前端。
BFC（块级格式化上下文）是一个独立的渲染区域，内部元素的布局不受外部影响。
特性：
-
内部元素垂直排列
-
计算 BFC 高度时会包含浮动元素（清除浮动）
-
防止 margin 重叠（父子 / 兄弟元素）
创建 BFC 的方式：
-
overflow: auto/hidden（最常用） -
float: left/right -
position: absolute/fixed -
display: flex/inline-block
实际用途：
- 清除浮动（解决父元素高度塌陷）：
.parent{
overflow: hidden; /* 触发BFC */
}
.child{
float: left;
}
- 防止 margin 重叠：给父元素加
overflow: auto，避免子元素 margin"穿出" 父元素。
元素居中：面试必考的 "送分题"
"怎么让元素水平垂直居中？" 至少说出 3 种方法才算合格。
- Flex 布局（最推荐）：
.parent{
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
- 定位 + transform（不需要知道元素宽高）：
.child{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
- Grid 布局（简单直接）：
.parent{
display: grid;
place-items: center;
}
- Table 布局（兼容性好）：
.parent{
display: table-cell;
text-align: center;
vertical-align: middle;
}
多栏布局：两栏与三栏的实现
布局题常考，需要掌握多种方案。
两栏布局（左固定右自适应）
方法 1：浮动 + margin
/* 7.1.html示例 */
.left{
float: left;
width: 200px;
}
.right{
margin-left: 200px; /* 避开左侧固定区域 */
}
方法 2：inline-block+calc
/* 7.html示例 */
.container{
font-size: 0; /* 消除间隙 */
}
.left{
display: inline-block;
width: 200px;
}
.right{
display: inline-block;
width: calc(100% - 200px); /* 计算剩余宽度 */
}
三栏布局（两边固定中间自适应）
现代方案：Flex 布局（支持内容优先加载）
/* 7.2.html示例 */
.container{
display: flex;
}
.left, .right{
width: 200px;
}
.middle{
flex: 1; /* 占满剩余空间 */
}
.left{
order: -1; /* 让左边栏显示在前面 */
}
Grid 布局更简洁：
/* 7.3.html示例 */
.container{
display: grid;
grid-template-columns: 200px 1fr 200px; /* 左200，中自适应，右200 */
}
经典方案：圣杯布局和双飞翼布局（用浮动 + 负 margin 实现，了解原理即可）
总结
CSS 面试题看似零散，其实都围绕着布局、盒模型、样式优先级这些核心概念。回答时不要只说定义，结合实际使用场景和代码示例，会让面试官觉得你不仅懂理论，还能解决实际问题。
