CSS 超详细讲解（从基础到高级实战）

CSS（Cascading Style Sheets，层叠样式表）是前端开发三大核心之一，负责页面的：

• 布局
• 样式
• 动画
• 响应式适配
• 交互视觉体验

现代前端中，CSS 已经不仅仅是“改颜色”，而是：

• 页面架构能力
• 动画能力
• UI 工程化能力
• 组件化能力
• 设计系统能力

---

一、CSS 基础知识

---

1. CSS 是什么

HTML：结构
CSS：样式
JavaScript：行为

示例：

<h1 class="title">Hello CSS</h1>

.title {
  color: red;
  font-size: 32px;
}

---

2. CSS 引入方式

（1）行内样式

<div style="color:red;">内容</div>

不推荐：

• 难维护
• 权重高
• 无法复用

---

（2）内部样式

<style>
  .box {
    color: blue;
  }
</style>

---

（3）外部样式（推荐）

<link rel="stylesheet" href="style.css">

工程化项目标准方案。

---

3. CSS 选择器

---

（1）基础选择器

标签选择器

div {
  color: red;
}

类选择器（最常用）

.box {
  width: 100px;
}

ID 选择器

#app {
  background: #000;
}

---

（2）组合选择器

后代选择器

.box p {
  color: red;
}

子元素选择器

.box > p {
  color: blue;
}

相邻兄弟

h1 + p {
  color: green;
}

---

（3）伪类选择器

a:hover {
  color: red;
}

常见：

• :hover
• :focus
• :active
• :nth-child()
• :first-child
• :last-child

---

（4）伪元素

.title::before {
  content: "🔥";
}

常见：

• ::before
• ::after

---

4. CSS 权重机制（面试高频）

---

权重计算

选择器	权重
行内样式	1000
ID	100
class	10
标签	1

示例：

#app .box p {
}

权重：

100 + 10 + 1 = 111

---

!important

color: red !important;

优先级最高。

但：

❌ 不建议滥用。

---

5. 盒模型（超级重点）

---

标准盒模型

width = content

---

IE盒模型

box-sizing: border-box;

实际开发必须：

* {
  box-sizing: border-box;
}

---

盒模型组成

content
padding
border
margin

---

二、CSS 布局（核心）

---

1. display

---

block

display: block;

特点：

• 独占一行
• 可设置宽高

---

inline

display: inline;

特点：

• 不换行
• 不支持宽高

---

inline-block

display: inline-block;

开发常用。

---

2. position 定位

---

static

默认定位。

---

relative

相对自身定位。

position: relative;
left: 20px;

---

absolute

相对最近定位父元素。

position: absolute;
top: 0;

---

fixed

固定定位：

position: fixed;
bottom: 20px;

常用于：

• 返回顶部
• 悬浮按钮

---

sticky（高级）

position: sticky;
top: 0;

吸顶效果。

---

3. Flex 布局（现代开发核心）

---

开启 Flex

display: flex;

---

主轴方向

flex-direction: row;

---

主轴对齐

justify-content: center;

---

交叉轴对齐

align-items: center;

---

实现水平垂直居中

display: flex;
justify-content: center;
align-items: center;

---

flex:1 原理

flex: 1;

等价：

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;

---

Flex 面试题

为什么 Flex 可以居中？

因为：

• 主轴控制横向
• 交叉轴控制纵向

---

4. Grid 布局（高级）

---

开启 Grid

display: grid;

---

定义列

grid-template-columns: 1fr 1fr 1fr;

---

gap

gap: 20px;

---

实战场景

适合：

• 后台管理
• 数据大屏
• 卡片布局

---

三、响应式布局（移动端重点）

---

1. 媒体查询

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

---

2. rem 适配

html {
  font-size: 16px;
}

width: 2rem;

---

3. vw/vh

width: 50vw;
height: 100vh;

---

4. 移动端适配方案

现代推荐：

• Flex
• Grid
• vw
• clamp()
• 媒体查询

---

四、CSS 动画（高级重点）

---

1. transition 过渡

.box {
  transition: all .3s;
}

---

hover 动画

.box:hover {
  transform: scale(1.1);
}

---

2. transform

---

位移

transform: translateX(100px);

---

缩放

transform: scale(1.2);

---

旋转

transform: rotate(45deg);

---

3. animation 动画

---

定义动画

@keyframes move {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(200px);
  }
}

---

使用动画

.box {
  animation: move 2s infinite;
}

---

4. 动画性能优化（面试高频）

推荐动画属性：

transform
opacity

原因：

不会触发重排。

---

避免：

width
height
top
left

容易导致：

• 重排
• 重绘

---

五、CSS 高级知识

---

1. BFC（高频面试）

BFC：

块级格式化上下文

作用：

• 清除浮动
• 防止 margin 重叠
• 独立布局

---

触发 BFC

overflow: hidden;
display: flow-root;
position: absolute;

---

2. 重排与重绘（必问）

---

重排 Reflow

元素几何属性变化。

例如：

width
height
margin

代价大。

---

重绘 Repaint

颜色变化：

background
color

性能较好。

---

3. CSS 变量

:root {
  --main-color: #409eff;
}

使用：

color: var(--main-color);

---

4. clamp()

响应式神器。

font-size: clamp(14px, 2vw, 24px);

---

六、CSS 预处理器（重点）

---

什么是 CSS 预处理器

增强 CSS。

例如：

• 变量
• 嵌套
• 函数
• mixin
• 循环

---

主流：

• Sass/SCSS（最主流）
• Less
• Stylus

---

七、SCSS 超详细讲解

---

1. 安装

npm install sass

---

2. 变量

$primary-color: #409eff;

.box {
  color: $primary-color;
}

---

3. 嵌套

.card {
  .title {
    color: red;
  }
}

---

4. mixin（超级重要）

---

定义

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

---

使用

.box {
  @include flex-center;
}

---

5. 继承

%btn {
  padding: 10px;
}

.primary-btn {
  @extend %btn;
}

---

6. 循环

@for $i from 1 through 5 {
  .mt-#{$i} {
    margin-top: #{$i * 10}px;
  }
}

---

八、项目中的 CSS 架构

---

1. BEM 规范（企业高频）

.card {}
.card__title {}
.card--active {}

---

2. CSS Modules

React 常见：

style.module.css

避免样式污染。

---

3. Scoped

Vue：

<style scoped>
</style>

---

4. 原子化 CSS

例如：

• TailwindCSS

特点：

• 开发快
• 维护强

---

九、CSS 工程化

---

PostCSS

自动：

• 补前缀
• 转换兼容

---

Autoprefixer

display: flex;

自动变：

-webkit-flex

---

十、CSS 面试常考点（重点）

---

1. 盒模型区别

标准盒模型 vs IE盒模型。

---

2. Flex 常考

• flex:1
• justify-content
• align-items

---

3. BFC

作用：

• 清除浮动
• 防止 margin 合并

---

4. position 区别

• relative
• absolute
• fixed
• sticky

---

5. 水平垂直居中

---

Flex方案（推荐）

display: flex;
justify-content: center;
align-items: center;

---

6. rem/vw 区别

---

rem

相对根字体。

---

vw

相对视口。

---

7. CSS 隐藏元素的方法

---

display:none

不占位置。

---

visibility:hidden

占位置。

---

opacity:0

透明但可点击。

---

8. 重排和重绘

性能优化高频。

---

9. transition 和 animation 区别

---

transition

状态变化触发。

---

animation

自动执行动画。

---

十一、CSS 实战能力提升路线

---

第一阶段（基础）

掌握：

• 选择器
• 盒模型
• Flex
• 定位
• 动画

---

第二阶段（项目）

练：

• 企业官网
• 后台系统
• 电商首页
• 移动端页面

---

第三阶段（高级）

深入：

• Grid
• SCSS
• Tailwind
• CSS架构
• 动画系统

---

第四阶段（专家）

掌握：

• 设计系统
• UI规范
• 组件库
• CSS性能优化

---

十二、如何强化自己的 CSS 能力

---

1. 多临摹优秀网站

推荐：

• Awwwards
• Dribbble
• Behance

---

2. 多写动画

重点：

• transform
• transition
• keyframes

---

3. 学会拆 UI

训练：

一个页面如何拆布局

---

4. 学设计思维

前端高手：

≠ 只会写代码

而是：

懂布局 + 懂视觉 + 懂交互

---

5. 练习 CSS 复刻

推荐：

• Apple 官网
• 小米官网
• Stripe 官网

---

十三、CSS 学习资源推荐

---

官方文档

• MDN CSS 文档
• CSS Tricks
• Sass 官方文档

---

动画学习

• Animate.css
• GSAP
• Framer Motion

---

Flex/Grid 学习

• Flexbox Froggy
• Grid Garden

---

十四、现代 CSS 技术栈（2026）

推荐掌握：

CSS3
Flex
Grid
SCSS
TailwindCSS
PostCSS
CSS Modules
响应式布局
CSS 动画
设计系统

---

十五、企业真实 CSS 开发模式

现代企业：

UI设计稿
→ 组件拆分
→ SCSS/Tailwind
→ 响应式适配
→ 动画交互
→ 主题系统
→ 暗黑模式
→ 性能优化

---

十六、CSS 学习建议（重要）

CSS 真正难的地方：

不是语法。

而是：

布局能力
视觉能力
组件化能力
工程化能力

真正的 CSS 高手：

• 能快速还原设计稿
• 能做复杂动画
• 能做响应式
• 能写可维护样式架构
• 能设计组件系统
• 能优化性能

这也是高级前端的重要分水岭。