视觉格式化模型2

（视觉格式化模型）

一、相关概念： 1. 视觉格式化模型（visual formating model）: CSS的一种机制，由大量CSS规范组成，规定了多个元素在页面中如何布局。

2. 视口（viewport）： 即可视窗口，通常指浏览器的可视区域。 尺寸仅受浏览器可视窗口大小的影响，和内容无关。 当王爷内容的尺寸超过视口尺寸时，浏览器会出现滚动条。

3. 包含块（containing block）： 即元素在页面中的摆放区域，每个元素都有包含块。 通常情况下，包含块时它父元素的内容盒（content­box）。

html标签的包含块：由浏览器自动生成的初始化包含块（initial containing block），即 浏览器在渲染页面之间会给html生成一个最初的包含块来存放。

二、视觉格式化模型 元素在包含块中的尺寸和位置，主要受两个元素的影响：即元素的盒模型和元素的定位体系。

1.元素的定位体系： 任何一个元素，必须属于其中一种定位体系。

定位体系有三种：常规流（normal flow）、浮动（float）、绝对定位（absolute positioned） 定位体系判定： 开始→position的值是absolute或fixed?→否→float的值是left或right？→否 ↓ ↓ ↓ 是 是 常规流 ↓ ↓ 绝对定位 浮动 2. 盒模型中的尺寸： em：取父级元素的倍数。例如：font­size：2em；表示取父级元素font­size的2倍。

rem：取根元素的倍数。 %：百分率，表示取父级元素的宽度的百分比。 auto：自动，一般来说，是元素内容所占的宽度。

①盒模型中的尺寸­%：表示尺寸是包含块尺寸的百分比。 margin、padding、width的百分比：指包含块宽度的百分比。 height（很少用）。

②盒模型中的auto：尺寸收到定位体系的影响，不同定位体系，auto的计算规则不一样。

③margin的取值可取负值，这样两个盒子就形成重叠。

三、常规流： 又叫普通流、文档流、普通文档流。 盒模型中的auto值：块级元素在常规流定位体系中尺寸取值为自动值的时候计算尺寸方式如 下：

①水平方向： 常规流盒子水平方向上的尺寸，必须等于包含块的宽度。 块级元素在常规流中水平居中的方法：一是给块级元素一个固定宽值，二是margin的左和右 设置为auto。这样就可以水平自动居中。 当左右外边距和width都是固定，无法满足包含块的宽度时，则右外边距会被强制改成auto， 从未撑满包含块的宽度。

②垂直方向： margin为auto时，垂直方向上为0px。 height为auto时，适应内容的宽度。 若两个外边距相邻，则进行合并（折叠）：当都是正值时，取最大值；当都是负值时，取最 小值；当两个数一正一负时，取相加。 若外边距取负值时，可调整标签的位置，即两个标签可以相互重叠。