视觉格式化模型

视觉格式化模型

英文：visual formatting model,CSS的一种机制，它规定了页面中的多个盒子如何布局

元素在包含块中的位置和尺寸，主要受两个因素影响：元素盒模型、元素的定位体系

定位体系概述：

视觉格式化模型规定，定位体系一共有三种：常规流，浮动（float），绝对定位（absolute positioned）

任何一个元素必须属于其中一种定位体系

不同的定位体系中，元素再包含块中的尺寸和位置会有一些差异

定位体系判定：

默认情况下元素为常规流定位

常规流定位：

• 块级元素（block）：占满整个可用空间的宽度（整行），自动换行
• 行内元素（inline）：每个行内元素紧挨着显示，直到占完可用空间宽度再换行

定位体系判定：

先判断position的值是absolut或fixed吗？是，即为绝对定位，否，则再判断float的值是left或right吗？是，即为浮动，否，则为常规流

position默认值为static float默认值为none

盒模型中的尺寸：只有margin可以取负值，auto按照不同定位体系的规定计算

常规流：

又叫普通流、文档流、普通文档流、常规文档流

盒模型中的auto值--水平方向：

常规流盒子水平方向上的尺寸，必须等于包含块的宽度，当包含块的宽度大于子元素的宽度时：如果margin left(和right)：auto width：auto时，占满整个空间的就是width；如果margin left(和right)：auto width：10px时，margin占满剩余空间，实现width水平居中；如果margin left：10px margin right：auto width：auto时，右侧被width占满；如果margin left：10px margin right：10px width：10px,且三个值加起来仍小于包含块的宽度指时，则右侧的margin变成自动（auto）填充剩余空间

盒模型中的auto值--垂直方向：

margin为auto：0px height为auto:适应内容的高度

Include block:

containing block, each element has a containing block, which refers to the area where the element is placed on the page. Usually, the containing block of an element is the content box of its parent element

Viewport:

viewport, the visible window, usually refers to the visible area of ​​the browser, and the visible area on different devices is different