HTML/CSS 核心知识

这是一份面向面试与日常开发的 HTML/CSS 核心知识汇总:从浏览器如何把代码变成像素(关键渲染路径)讲起,再到盒模型、等高、居中等布局基本功,最后覆盖选择器优先级、BFC 与浮动清除等高频考点。全文按「渲染篇 → 布局篇 → 选择器与浮动篇」组织,每章配对比表与可复制代码。

导航目录

HTML 渲染流程详解

DOM树结构示意图

DOM 树与 CSSOM 树合并生成渲染树（Render Tree）示意图

一图看懂关键渲染路径（CRP）

浏览器把代码变成屏幕像素,本质是一条流水线:DOM + CSSOM → 渲染树 → 布局 → 绘制 → 合成。理解这条链路,就能定位「白屏、闪烁、卡顿」出在哪一环、该优化什么。

text

HTML ──► DOM 树 ──┐
                  ├──► 渲染树（Render Tree）──► 布局（Layout/Reflow）──► 绘制（Paint）──► 合成（Composite·显示）
CSS  ──► CSSOM 树 ─┘

1. DOM 树构建

浏览器解析 HTML，生成树形结构的 DOM（Document Object Model）
每个元素对应一个节点，节点包含属性与父子关系

2. CSSOM 树构建

解析 CSS，生成 CSSOM（CSS Object Model）
CSSOM 体现继承与层叠（cascade）规则，决定“最终生效的样式”

3. 渲染树生成（Render Tree）

将 DOM 与 CSSOM 合并，生成渲染树（只包含可见节点）
display: none 的节点不会进入渲染树

4. 布局阶段（Layout/Reflow）

计算渲染树中每个节点的几何信息：位置、尺寸
盒模型、浮动、定位、Flex/Grid 等规则会在此阶段参与计算

5. 绘制阶段（Paint）

将节点的视觉样式转成绘制指令（文字、背景、边框、阴影等）

6. 合成与显示

把各图层（layer）进行合成并显示，常见由 GPU 加速完成
常见更利于合成的属性：transform、opacity、filter（是否分层由浏览器决定）

7. JavaScript 执行

JS 执行可能修改 DOM/CSSOM，从而触发布局或重绘
可通过 defer / async 降低对解析与首屏渲染的阻塞（取决于脚本类型与位置）

8. 资源加载

解析过程中会触发额外资源请求（CSS/JS/图片/字体等）
首屏性能的关键通常在“关键渲染路径”（Critical Rendering Path）

CSS 渲染阻塞机制

并行构建：HTML 解析（DOM 构建）与 CSS 下载/解析（CSSOM 构建）可以并行进行
渲染阻塞：CSSOM 未就绪时，浏览器通常不会进行首屏绘制（避免“无样式内容闪烁”）
优化思路：尽量让“首屏必须的 CSS”更早到达、更快解析；把非关键 CSS 延后

示例：首屏关键 CSS 优先，其余 CSS 延后加载（按需取舍）

html

<!-- 关键 CSS：阻塞但尽量小、尽量早 -->
<link rel="stylesheet" href="/styles/critical.css" />

<!-- 非关键 CSS：延后加载（避免阻塞首屏渲染） -->
<link
  rel="preload"
  href="/styles/non-critical.css"
  as="style"
  onload="this.rel='stylesheet'"
/>
<noscript><link rel="stylesheet" href="/styles/non-critical.css" /></noscript>

CSS 阻塞渲染,JS 阻塞解析

CSS 默认阻塞渲染(不阻塞 DOM 解析):CSSOM 没就绪浏览器不敢绘制,以免无样式内容闪烁(FOUC)。
JS(无 defer/async)默认阻塞 DOM 解析:脚本可能改动 DOM/CSSOM。首屏优化常把关键 CSS 内联、非关键脚本加 defer。

显示控制对比表

属性	占位情况	触发行为	性能影响
`display: none`	❌ 不占位	回流(Reflow)	高
`visibility: hidden`	✅ 占位	重绘(Repaint)	中

三者别混:none / hidden / opacity:0

display: none:不渲染、不占位,切换会触发回流,且元素不可交互。
visibility: hidden:占位但不可见,触发重绘,同样不可交互。
opacity: 0:占位且仍可点击(事件照常触发),开销最小、可参与合成层动画。

盒模型深度解析

盒子的四层结构

从内到外依次是 content(内容) → padding(内边距) → border(边框) → margin(外边距)。box-sizing 决定 width/height 到底量到哪一层:标准盒模型(content-box)只量内容,IE 盒模型(border-box)量到边框。

text

┌───────────────────────────────────┐
│ margin（外边距·元素间距）          │
│  ┌─────────────────────────────┐  │
│  │ border（边框）               │  │
│  │  ┌───────────────────────┐  │  │
│  │  │ padding（内边距）      │  │  │
│  │  │  ┌─────────────────┐  │  │  │
│  │  │  │ content（内容区  │  │  │  │
│  │  │  │ width/height）   │  │  │  │
│  │  │  └─────────────────┘  │  │  │
│  │  └───────────────────────┘  │  │
│  └─────────────────────────────┘  │
└───────────────────────────────────┘

css

/* 盒模型设置示例 */
.box {
  box-sizing: content-box; /* 默认：标准盒模型 */
  /* box-sizing: border-box; 常用：更易控宽高（历史上 IE 行为类似） */
}

盒模型分类

模型类型	宽度计算规则
content-box	width = 内容宽度
border-box	width = 内容宽度 + padding + border
padding-box	width = 内容宽度 + padding
margin-box	包含外边距的特殊模型（实验性）

补充理解：当你写下 width: 200px 时，最容易“踩坑”的就是 padding/border 会不会把盒子撑大。

content-box：width 只约束内容区，padding/border 会额外增加可见宽度
border-box：width 约束到边框，padding/border 会被“包含在 200px 内”

示例（更直观）：

css

.a {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  border: 2px solid #000;
}
.b {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 2px solid #000;
}

计算结果 & 全局重置

上例中 .a(content-box)实际占位宽 = 200 + 20×2 + 2×2 = 244px;.b(border-box)则恒为 200px,padding/border 向内挤占内容区。为省心,现代项目常做全局重置:

css

*,
*::before,
*::after {
  box-sizing: border-box;
}

响应式等高布局方案

css

/* 现代Flexbox方案 */
.container {
  display: flex;
  align-items: stretch; /* 默认值，可省略 */
}

为什么 Flex 天生等高

align-items 默认就是 stretch,子项会被拉伸到与最高项等高——这正是「多列卡片自动等高」的原理,无需 JS 或 height 硬写。Grid 同理默认 stretch。

居中布局全攻略

水平居中方案

元素类型	实现方式
行内元素	`text-align: center` (父容器)
块级元素	`margin: 0 auto`
绝对定位元素	`left:50% + transform:translateX(-50%)`
Flex 布局	`justify-content: center`

垂直居中方案

场景	实现方式
单行文本	`line-height: 容器高度`
绝对定位元素	`top:50% + transform:translateY(-50%)`
Flex 布局	`align-items: center`
表格布局	`display: table-cell + vertical-align: middle`

完美居中方案

css

/* Flex 常用方案 */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

居中优先级:能用 Flex 就别用 absolute

首选 display: flex; justify-content: center; align-items: center;——一行两轴居中,响应式友好、不脱离文档流。
未知宽高的绝对定位元素,用 top/left: 50% + transform: translate(-50%, -50%)。
单行文本竖直居中,line-height = 容器高度 最省事。
新写法 place-items: center(Grid)可再省一行。

选择器优先级矩阵

优先级顺序	示例	权重值
`!important` 声明	`color: red !important`	∞（最高）
内联样式	`<div style="...">`	1000
ID 选择器	`#header`	0100
类/属性/伪类选择器	`.nav`, `:hover`	0010
元素/伪元素选择器	`div`, `::before`	0001
继承样式	父元素属性继承	0000（最低）

权重计算与匹配方向

权重比较逐级进行:先比内联,再比 ID 数量,再比类/属性/伪类,最后比元素/伪元素;同级才比数量,高级永远压低级。!important 是逃生舱,应尽量少用。
浏览器实际匹配从右向左(先按最右的 key selector 过滤,再回溯验证),所以最右侧写得越精准,匹配越高效。

元素类型特性表

特性	行内元素	块级元素
宽度设置	❌ 无效	✅ 有效
上下外边距	❌ 无效	✅ 有效
水平排列	✅ 自动	❌ 独占一行
典型元素	`<span>`, `<a>`, `<img>`	`<div>`, `<p>`, `<ul>`

BFC 深度解析

核心特性

包含浮动：让父容器把浮动子元素“包起来”，避免高度塌陷
阻止外边距合并（margin collapse）：解决相邻块级元素的 margin 重叠问题
创建独立布局环境：让内部布局不影响外部，常用于避免浮动/布局相互干扰

触发条件（满足其一即可）

css

/* 常见触发方式 */
.bfc-container {
  float: left; /* 浮动元素 */
  position: absolute; /* 绝对定位 */
  display: inline-block; /* 行内块元素 */
  overflow: hidden; /* 非 visible 的 overflow */
}

BFC(块级格式化上下文)是一个「隔离容器」,一旦触发,它就同时具备下面三种能力:

text

触发 BFC（overflow/float/position/inline-block）
    ├── 包含内部浮动·父容器不塌陷
    ├── 阻止与外部 margin 合并
    └── 独立布局环境·内外互不干扰

浮动清除方案对比

方法	实现方式	优点	缺点
空 div 法	`<div style="clear:both"></div>`	简单直观	产生冗余 HTML
父容器 overflow	`overflow: auto/hidden`	代码简洁	可能影响绝对定位元素
伪元素法	`::after { content:""; clear:both }`	语义化好	需处理 IE6/7 兼容
创建 BFC	`overflow: hidden`	现代规范方案	可能隐藏溢出内容
固定高度	`height: 200px`	简单直接	缺乏响应式灵活性

最佳实践与副作用

优先使用伪元素 clearfix(语义好、无冗余标签);布局允许时再配合 BFC(overflow: hidden)。但要留意 overflow: hidden 会裁掉溢出内容(如下拉菜单、气泡阴影),这种场景改用 clearfix 或 display: flow-root(专为触发 BFC 而生、无副作用)。

css

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
/* 触发BFC */
.parent {
  overflow: hidden;
}

结语

面试速记 · 一页带走

渲染:DOM + CSSOM → 渲染树 → 布局 → 绘制 → 合成;CSS 阻塞渲染、JS 阻塞解析。
盒模型:border-box 所见即所得,建议全局重置;width 量到哪层由 box-sizing 决定。
居中:两轴居中首选 Flex(justify-content + align-items),未知宽高绝对定位用 translate(-50%,-50%)。
优先级:内联 > ID > 类/伪类 > 元素;逐级比较,!important 慎用。
BFC:隔离容器,解决高度塌陷 / margin 合并;现代首选 display: flow-root。
清浮动:伪元素 clearfix 最通用,overflow:hidden 会裁溢出内容。

HTML/CSS 核心知识 ​

导航目录 ​

渲染篇 · 从代码到像素 ​

布局篇 · 盒模型与定位基本功 ​

选择器与浮动篇 · 高频考点 ​

HTML 渲染流程详解 ​

1. DOM 树构建 ​

2. CSSOM 树构建 ​

3. 渲染树生成（Render Tree） ​

4. 布局阶段（Layout/Reflow） ​

5. 绘制阶段（Paint） ​

6. 合成与显示 ​

7. JavaScript 执行 ​

8. 资源加载 ​

CSS 渲染阻塞机制 ​

显示控制对比表 ​

盒模型深度解析 ​

盒模型分类 ​

响应式等高布局方案 ​

居中布局全攻略 ​

水平居中方案 ​

垂直居中方案 ​

完美居中方案 ​

选择器优先级矩阵 ​

元素类型特性表 ​

BFC 深度解析 ​

核心特性 ​

触发条件（满足其一即可） ​

浮动清除方案对比 ​

结语 ​

HTML/CSS 核心知识

导航目录

渲染篇 · 从代码到像素

布局篇 · 盒模型与定位基本功

选择器与浮动篇 · 高频考点

HTML 渲染流程详解

1. DOM 树构建

2. CSSOM 树构建

3. 渲染树生成（Render Tree）

4. 布局阶段（Layout/Reflow）

5. 绘制阶段（Paint）

6. 合成与显示

7. JavaScript 执行

8. 资源加载

CSS 渲染阻塞机制

显示控制对比表

盒模型深度解析

盒模型分类

响应式等高布局方案

居中布局全攻略

水平居中方案

垂直居中方案

完美居中方案

选择器优先级矩阵

元素类型特性表

BFC 深度解析

核心特性

触发条件（满足其一即可）

浮动清除方案对比

结语