HTML/CSS 核心知识

导航目录

HTML 渲染流程详解
CSS 渲染阻塞机制
显示控制对比表
盒模型深度解析
盒模型分类
响应式等高布局方案
居中布局全攻略
选择器优先级矩阵
元素类型特性表
BFC 深度解析
浮动清除方案对比

HTML 渲染流程详解

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

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>

显示控制对比表

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

盒模型深度解析

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;
}

响应式等高布局方案

css

/* 现代Flexbox方案 */
.container {
  display: flex;
  align-items: 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;
}

选择器优先级矩阵

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

⚠️ 注意：选择器匹配通常可以理解为从右向左更高效（先过滤再验证），因此最右侧选择器写得越“精准”，通常越有利于匹配性能与可读性。

元素类型特性表

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

BFC 深度解析

核心特性

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

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

css

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

浮动清除方案对比

方法	实现方式	优点	缺点
空 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），通常更稳。

css

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

HTML/CSS 核心知识 ​

导航目录 ​

HTML 渲染流程详解 ​

1. DOM 树构建 ​

2. CSSOM 树构建 ​

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

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

5. 绘制阶段（Paint） ​

6. 合成与显示 ​

7. JavaScript 执行 ​

8. 资源加载 ​

CSS 渲染阻塞机制 ​

显示控制对比表 ​

盒模型深度解析 ​

盒模型分类 ​

响应式等高布局方案 ​

居中布局全攻略 ​

水平居中方案 ​

垂直居中方案 ​

完美居中方案 ​

选择器优先级矩阵 ​

元素类型特性表 ​

BFC 深度解析 ​

核心特性 ​

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

浮动清除方案对比 ​