CSS 视觉格式化模子
CSS 视觉格式化模子（Visual Formatting Model）是 CSS 的核心布局机制，它界说了浏览器怎样将 DOM 树转换为可视化布局。以下是其核心要点解析：1. 根本概念
视觉格式化模子通过以下要素控制元素布局：
[*] 视口（Viewport）：浏览器渲染区域
[*] 包罗块（Containing Block）：元素布局的参考坐标系
[*] 盒模子（Box Model）：内容区、内边距、边框、外边距
[*] 格式化上下文（Formatting Context）：布局规则集合
2. 关键布局规则
（1）盒类型（display 属性）
类型特性块级盒独占一行，可设置宽高（如 <div>、<p>）行内盒不换行，宽高由内容决定（如 <span>、<a>）行内块盒行内布局但可设宽高（如 <img>、<button>）弹性盒通过 display: flex 启用弹性布局网格盒通过 display: grid 启用网格布局 （2）定位方案
定位模式（position）脱离文档流定位基准典型用例static (默认)否正常流普通文档流布局relative否自身原始位置微调元素位置absolute是最近非 static 祖先弹出层、精确定位fixed是视口固定导航栏、悬浮按钮sticky否→是最近滚动祖先+视口吸顶效果 （3）浮动（float）
[*] 使元素脱离通例流，向左右移动直到碰到容器边缘
[*] 触发块格式化上下文（BFC）
[*] 经典题目：父元素高度塌陷（通过 clearfix 解决）
3. 格式化上下文
（1）块级格式化上下文（BFC）
触发条件：
float: left/right;
position: absolute/fixed;
display: inline-block/table-cell/flex/grid;
overflow: hidden/auto/scroll; 特性：
[*] 内部盒子垂直分列
[*] 垂直边距折叠（Margin Collapse）
[*] 隔离外部浮动影响
（2）行内格式化上下文（IFC）
[*] 水中分列行内级盒子
[*] 通过 vertical-align 控制垂直对齐
[*] 典型应用：文本行布局
（3）弹性格式化上下文（FFC）
[*] display: flex 触发
[*] 通过主轴/交叉轴控制子项布局
（4）网格格式化上下文（GFC）
[*] display: grid 触发
[*] 二维网格布局系统
4. 层叠与渲染次序
元素按以下次序层叠（从底到顶）：
[*] 定位元素的 z-index: -1
[*] 通例流块级盒
[*] 浮动盒
[*] 通例盛行内盒
[*] z-index: 0 的定位元素
[*] z-index: 1+ 的定位元素
5. 经典布局题目与解决方案
题目解决方案垂直居中Flexbox (align-items: center + justify-content: center)等高列Flexbox 或 Grid 布局打扫浮动clearfix 或父元素触发 BFC外边距折叠触发 BFC 或改用 padding圣杯布局Flexbox/Grid 或传统浮动方案 6. 现代布局实践
（1）Flexbox 示例
.container {
display: flex;
justify-content: space-between;
align-items: center;
} （2）Grid 示例
.container {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 20px;
} （3）多列布局
.container {
column-count: 3;
column-gap: 1em;
} 7. 性能优化要点
[*] 镌汰重排：优先使用 transform/opacity 做动画
[*] 制止深层嵌套：复杂选择器影响渲染性能
[*] 公道使用 contain 属性：限制浏览器重绘范围
[*] 硬件加速：will-change: transform
可视化总结
https://i-blog.csdnimg.cn/direct/78b57c62e1d64254bde64c397f088a2b.png
理解视觉格式化模子是掌握 CSS 布局的核心，现代布局方案（Flexbox/Grid）虽简化了开发，但底层仍遵循此模子规则。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]