面试题-CSS高频8题

Sun_light
145 阅读4分钟

这篇是把常见 CSS 面试点用最短路径串起来的复习稿，按“是什么—怎么用—易错点—小例子”的节奏走一遍。内容来自日常面试高频题，读完基本能覆盖主问点。

1. 盒子模型

  • 是什么
    • 每个元素是一个“盒子”，由 content、padding、border、margin 组成。 image.png
  • 两种模型
    • 标准盒模型 content-box：width 指内容宽度。
    • 怪异盒模型 border-box：width = content + padding + border。
  • 记忆与使用
    • 页面通用做法：全局设 box-sizing: border-box，布局更可控。
  • 小例子
.box {
  width: 200px;
  padding: 20px;
  border: 10px solid #333;
  box-sizing: border-box;
}

2. 选择器与优先级

  • 常见选择器
    • 标签、类、id、通配符、后代、子代、相邻、群组、伪类(:hover 等)、伪元素(::after 等)、属性选择器([type="text"])。 image.png
  • 优先级顺序
    • !important > 内联样式 > id > 类/伪类/属性 > 标签/伪元素。
    • 权重常用记法：内联 1000，id 100，类 10，标签 1。
  • 易错点
    • 叠加关系从右往左匹配；相同权重按“后写覆盖先写”。
    • 少用 !important，优先调整选择器设计。
  • 小例子
#app .title span {
  color: red;
}
.title span {
  color: blue;
}

3. 长度单位 px、em、rem、vw、vh

  • 分类
    • 绝对：px。
    • 相对：em、rem、vw、vh。
  • 特点
    • em 相对父元素字体大小；rem 相对根元素字体大小；vw/vh 相对视口宽高百分比。
  • 场景
    • 响应式和移动端常用 rem、vw、vh；组件内部缩放可用 em。
  • 小例子
.title {
  font-size: 2rem;
  padding-left: 5vw;
}
.icon {
  font-size: 1.2em;
}

4. 隐藏元素的方式与区别

  • 方法与行为
    • display: none 不占文档流，不能响应事件。
    • visibility: hidden 占文档流，不能响应事件。
    • opacity: 0 占文档流，可以响应事件。
    • width: 0; height: 0 不占空间，通常也无法交互。
    • clip-path: polygon(0 0, 0 0, 0 0, 0 0) 占文档流，一般不可交互。
  • 小例子
.hide1 { display: none; }
.hide2 { visibility: hidden; }
.hide3 { opacity: 0; }

5. BFC 块级格式化上下文

  • 是什么
    • 一个独立的布局环境，内部布局不受外部影响。
  • 特性
    • 垂直方向一个接一个放置；解决父容器和子容器导致的margin重叠, 但BFC内部兄弟容器 margin 可能折叠；浮动元素会参与 BFC 高度计算。
  • 触发方式
    • overflow: hidden/auto/scroll；float: left/right；position: absolute/fixed；display: inline-block/table-cell/flex/grid。
  • 小例子
.parent {
  overflow: hidden;
}
.child {
  float: left;
}

6. 水平垂直居中的常见方法

  • 弹性布局
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
  • 网格布局
.grid-center {
  display: grid;
  place-items: center;
}
  • 定位法
.abs-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

7. 多栏布局

  • 两栏
.layout {
  display: flex;
}
.left {
  width: 200px;
}
.right {
  flex: 1;
}
  • 三栏
.grid3 {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
}

8. 回流与重绘

  • 渲染流程速记
    • 解析 HTML 得到 DOM；解析 CSS 得到 CSSOM；合并为渲染树；做布局计算（回流）；GPU 绘制（重绘）。
  • 会触发回流的情况
    • 刷新页面；元素几何属性变化（大小、位置、显示状态）；添加/删除可见元素；窗口尺寸改变等。
  • 会强制刷新布局队列的属性
    • 访问 offsetWidth/offsetHeight/offsetTop/offsetLeft、scrollWidth/scrollHeight/scrollTop/scrollLeft、clientWidth/clientHeight/clientTop/clientLeft 会让浏览器立即计算最新布局。
  • 减少回流重绘的三板斧
    1. 先把要频繁操作的元素从文档流中剥离，批量处理后再回流（如 position 脱离或隐藏）。
    2. 使用文档碎片构建节点树，最后一次性挂载。
    3. 使用克隆节点：clone 一份离线修改，替换原节点以减少多次布局。
  • 小例子（批量插入）
const frag = document.createDocumentFragment();
for(let i=0;i<100;i++){
  const div = document.createElement('div');
  frag.appendChild(div);
}
document.body.appendChild(frag);
  • 小例子（克隆节点）
const oldNode = document.getElementById('demo');
const newNode = oldNode.cloneNode(true);
newNode.style.color = 'red';
oldNode.parentNode.replaceChild(newNode, oldNode);

9. 复习清单速记

  • 盒模型：记 border-box，宽度即所见即所得。
  • 选择器：权重口诀 1000 > 100 > 10 > 1，少用 !important。
  • 单位：rem 相对根，em 相对父，vw/vh 相对视口，响应式优先相对单位。
  • 隐藏：display none 不占位；visibility hidden 占位；opacity 0 可点但不可见。
  • BFC：用来清浮动、断开 margin 折叠；overflow 或 flex 等可触发。
  • 居中：grid place-items center；flex 双轴居中；定位 translate 万金油。
  • 多栏：两栏 flex: 1；三栏 grid 更优雅。
  • 回流重绘：读写分离、批量操作、离线修改后替换。

这些题目覆盖了 CSS 基础到布局与性能的核心链路。面试时不要着急，先把“概念—原因—选择策略”说清，再用 1～2 行简洁示例点到为止，往往就能拿到满意分数。祝你面试顺利，复习高效！

avatar
文章
阅读
粉丝