跳到主要内容

CSS 知识体系概览

什么是 CSS？​

CSS（Cascading Style Sheets，层叠样式表） 是控制网页视觉呈现的语言。如果 HTML 是房子的骨架结构，那么 CSS 就是装修——它决定了墙壁的颜色、家具的摆放位置、窗帘的样式。

/* 这段 CSS 让所有 h1 标题变成蓝色、居中对齐、字号 32px */
h1 {
  color: blue;
  text-align: center;
  font-size: 32px;
}

CSS 的"层叠"（Cascading）是一个核心概念——当多条规则同时作用于一个元素时，浏览器会按照优先级规则决定最终样式。理解层叠和优先级，是避免"为什么我的样式不生效"这类困惑的关键。

为什么 CSS 是前端面试的重灾区？​

CSS 看似简单，但它的知识体系庞大且碎片化，坑点极多：

  1. 盒模型 是 CSS 的基石——搞不清 content-box 和 border-box 会导致各种布局问题
  2. BFC（块级格式化上下文） 是理解 margin 塌陷、浮动清除的关键概念
  3. Flex 和 Grid 是现代布局方案，面试中经常要求手写实现常见布局
  4. 居中方案 被称为"CSS 经典面试题"——水平居中、垂直居中、水平垂直居中各有 5+ 种方案
  5. 响应式和移动端适配 是 C 端项目的基本功——rem、vw、1px 问题、安全区域
  6. 性能 方面，will-change、contain、content-visibility 等属性能显著提升渲染性能

核心知识点概览​

盒模型——CSS 的地基​

每个 HTML 元素都是一个"盒子"，由内到外分为四层：content（内容）→ padding（内边距）→ border（边框）→ margin（外边距）。box-sizing: border-box 让 width 包含 padding 和 border，这是现代 CSS 开发的标准做法。

BFC——理解布局"异常"的钥匙​

BFC（Block Formatting Context） 是一种独立的布局环境。BFC 内部的元素不会影响外部，外部也不会影响内部。理解 BFC 能解释很多"诡异"的布局行为：margin 为什么会合并？浮动的父元素为什么高度塌陷？overflow: hidden 为什么能清除浮动？这些都和 BFC 有关。

Flex 和 Grid——现代布局双子星​

Flex 布局是一维布局方案（主轴方向排列），几乎可以解决 90% 的布局需求；Grid 布局是二维布局方案（行列同时控制），适合复杂的网格布局。面试中经常考察两者的区别和适用场景。

定位与层叠上下文​

CSS 有 5 种定位方式：static（默认）、relative、absolute、fixed、sticky。更深一层的考点是层叠上下文——它决定了元素的"前后"关系（z 轴），理解层叠规则才能搞清楚 z-index 为什么有时"不生效"。

响应式设计与移动端适配​

响应式设计的目标是让同一个页面适配不同屏幕尺寸。核心工具包括媒体查询（@media）、容器查询（@container）、弹性单位（rem、vw、clamp()）。移动端还有 1px 物理像素问题、viewport 配置、安全区域（Safe Area）等特有挑战。

CSS 工程化​

随着项目规模增大，原生 CSS 的维护成本越来越高。业界发展出多种方案：CSS 预处理器（Sass/Less）提供变量和嵌套；CSS Modules 解决类名冲突；CSS-in-JS（styled-components）让样式与组件绑定；原子化 CSS（Tailwind）用工具类代替自定义样式。了解这些方案的优劣势和适用场景，是工程化能力的体现。

学习建议​

推荐学习路径
  1. 盒模型 + BFC → CSS 的地基，必须扎实
  2. Flex + Grid + 居中方案 → 现代布局核心，面试必考
  3. 选择器优先级 + 定位 → 理解层叠与定位机制
  4. 响应式 + 移动端适配 → C 端项目必备
  5. 动画 + 性能优化 → 进阶方向
  6. CSS-in-JS / 原子化 / 新特性 → 工程化和前沿技术

相关链接​