视觉格式化模型（visual formatting model）&定位体系

几个基本概念

视觉格式化模型

css的一种机制，它规定了页面中的多个盒子如何布局

视口

视口(viewport)：可视窗口，通常指浏览器的可视区域

• 视口的尺寸仅受到浏览器可视窗口大小的影响，和内容无关
• 当网页内容的尺寸大小超过视口的尺寸大小，浏览器会出现滚动条

包含块

包含块（containing block）：

每个元素都有一个包含块，它是值元素在页面摆放的区域

注：HTML的包含块是初始化包含块（initial containing block ）

通常情况下，元素的包含块是它父元素的内容盒（content-box）

注：当当前标签的定位体系发生变化时，元素的包含块不一定是它父元素的内容盒

一、 定位体系

是什么？？

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

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

视觉化格式模型规定，定位体系一共有三种：

• 常规流(normal）

• 浮动（float）

• 绝对定位（absolute positioned）

定位体系的判断步骤

step1.判定元素的position属性值是不是以下的取值：

absolute 绝对位置 ，fixed 固定位置

如果是其中某一个取值，则当前元素就属于’‘绝对定位’’

step2.判定元素的float属性值是不是以下的取值：

left 左浮动， right 右浮动

如果是其中某一个取值，则当前元素就属于’‘浮动’’

注：第一步满足之后，第二步不用判断,相反，第一步不满足时，再判断第二步

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

position默认值：static

fixed 默认值：none

二、常规流

盒模型中的尺寸

尺寸是包含块尺寸的百分比 %

除了高是包含块高的百分比（height），其他都是包含块宽度的百分比（margin，padding，width）

定位体系影响 auto值，盒子在包含块中的位置

盒模型中的auto值

盒模型中的auto值-水平方向（margin-left，margin-right，内容width）

常规流盒子水平方向的尺寸，必须等于包含块的宽度

如果不行，则强行将margin-right 设置为auto

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

margin为auto：0px

height为auto：适应内容的高度

盒模型中的盒子位置

• 盒子在包含块的垂直方向上一次摆放

依次摆放：按照HTML元素的书写顺序从上往下摆放

• 垂直方向上，若两个外边距相邻，则进行合并（折叠）

水平方向上的外边距不能合并

外边距相邻：两个外边距之间没有border，padding，content

overflow：hidden 附加功能：禁止外边距合并

外边距合并规则：

1.相同值去、，取一个

2.都是正值，取最大

3.都是负值取小

4.一正一负相加

三、浮动

属性	常规流	浮动
margin-left：auto	尽量撑满包含块	0px
margin-right：auto	尽量撑满包含块	0px
margin-top：auto	0px	0px
margin-bottom：auto	0px	0px
width:auto	尽量撑满包含块	适应内容宽度
height:auto	适应内容高度	适应内容高度

是否可以继承：否

默认值：none

取值：none 不浮动

​ left 左浮动

​ right 右浮动

浮动的初衷是为了实现文字环绕

盒子位置

左浮动的盒子向上向左排列

右浮动的盒子向上向右排列

• 浮动的盒子顶边不得高于上一个盒子的顶变
• 若剩余空间无法放下浮动盒子，则该盒子向下移动，直到具备足够的空间容纳盒子，然后向左或向右移动

子级浮动，父级元素高度塌陷

常规流会无视浮动，所以没有高度

清除浮动

1.clear属性名 left right both

缺点：需要在HTML写一个空标签

解决方式：给父元素添加伪元素

清除：clear：both

overflow：hidden 附加功能：清除浮动

三、绝对定位

• 当浮动元素被设置为绝对定位（元素同时拥有绝对和浮动定位）

属于绝对定位，float属性被强制设置为none

• 绝对定位元素不会对其他元素造成影响

• 绝对定位元素的位置

取值：left right top bottom

• 绝对定位元素的包含块

通常情况下，元素的包含块时是父元素的内容区域

1.固定位置

• • 当position：fixed时

• 固定位置（fixed）

起始位置是视口的左上角，偏移量的设置啊（移动）

• 适用场景

移动端的底部，

PC端：页面的头部…

以下五个情况的元素，推荐用aside

1.广告

2.侧边栏

3.目录

4.回到顶部

5.即时通讯

2.绝对位置

• • 当position ：absolute 时

• 绝对位置（absolute）

绝对位置找包含块

包含我，离我最近的元素position值不等于static（默认值）

• 适用场景

2个及以上的标签需要重叠在一起的时候

堆叠级别：z-index

不可继承

有效的范围：相对，绝对，固定位置

默认值：0

取值范围：正负值（数字越大越靠上，数字越小越靠下）

大半部分绝对定位盒子中auto值计算规则和浮动盒子相同

属性	浮动
margin-left： auto	0 px
margin-right： auto	0 px
margin-top： auto	0 px
margin-bottom： auto	0 px
width: auto	适应内容宽度
height: auto	适应内容高度