CSS进阶01-CSS视觉格式化

（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！）

（注2：更多内容请查看我的目录。）

1. 简介

在CSS入门系列中，介绍了很多CSS的基础概念。其中讲到了盒模型。页面(文档树)可以想象成是由一个个的Box组合而成的，而视觉格式化模型(Visual formatting model)是一套规则，将这些框布局成访问者看到的样子。

2. 视觉格式化模型(visual formatting model)

CSS 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制。这是 CSS 的一个基础概念。理解视觉格式化，有助于帮助我们分辨得到的效果是应该显示的正确效果，还是浏览器兼容性的bug。

视觉格式化模型中，文档树中的每一个元素根据盒模型(Box Model) 生成0，1或者多个盒。这些盒的布局由以下内容控制：

1. 盒的尺寸和类型
2. 定位体系 Positioning Scheme （常规流，浮动和绝对定位）
3. 文档树中元素之间的关系
4. 外部信息（如：视口大小，图片的固有尺寸等）

接下来让我们从以上几个方面来详细讲解CSS的视觉格式化模型。

参考

http://www.w3.org/TR/CSS2/visuren.html

理解CSS视觉格式化

css权威指南-基本视觉格式化（水平与垂直）

CSS规范 > 9 视觉格式化模型 Visual Formatting Model

MDN-视觉格式化模型

想要清晰的明白（一）： CSS视觉格式化模型|盒模型|定位方案|BFC

深入理解BFC和Margin Collapse

NDN-视觉格式化模型

你真的了解盒模型吗？