视觉格式化模型
页面(文档树)可以想象成是由一个个的Box组合而成的，而视觉格式化模型(Visual formatting model)是一套规则，将这些框布局成访问者看到的样子。
哪些因素控制了这些布局
盒的尺寸和类型
定位体系 Positioning Scheme （常规流，浮动和绝对定位）
文档树中元素之间的关系
外部信息（如：视口大小，图片的固有尺寸等）
下文讲针对性的解释这些影响布局的因素，先来解释些概念~
元素框
css假设每个元素都会生成一个或者多个Box，称为元素框，元素框中心有内容区，内容区外周围包括了padding，border，margin，盒模型就是用来处理这些内容的一个模型
包含块
每个元素都是相对于包含块摆放，包含块就是一个元素的“布局上下文”,
p的包含块是div
//div的包含块是body
替换/非替换元素
替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。
通过 CSS content 属性来插入的对象 被称作 匿名可替换元素
如果元素的内容包含在文档之中，则为非替换元素
非替换元素的所有规则同样适用于替换元素，只有一个例外，width如果是auto,元素的高宽就是内容的固有高宽，比如img就是图片的原始大
例如浏览器会根据 标签的 src 属性的值来读取图片信息并显示出来，查看HTML代码，则看不到图片的实际内容； 标签的 type 属性来决定是显示输入框，还是单选按钮等。HTML中的 、 、 、 、 都是替换元素。
这些元素往往没有实际的内容，即是一个空元素,例如：
浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。
CSS Box(盒模型/框模型)
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式
Block Box
(图自《css权威指南》)
display ： block 、 list-item 以及 table 会让一个元素成为块级元素。正常流中，包含块的宽度 = 其父元素的width = margin + padding+ border+自身width
在Block Box中，会被水平格式化，垂直格式化
Line Box
每一行称为一条Line Box，它又是由这一行的许多inline-box组成，它的高度可以直接由line-height决定，line boxes的高度垂直堆叠形成了containing box的高度，就是我们见到的div或是p标签之类的高度了。
查看更多关于想要清晰的明白（一）：CSS视觉格式化模型|盒模型|定位方案|BFC_html/css_WEB-IT的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did112202