视觉格式化模型

Posted 2020-12-14 yangzisong

视觉格式化模型
css的一种机制，它规定了页面中的多个盒子如何布局

视口（viewport）
可视窗口，通常指浏览器的可视区域

包含块（containing block）
元素摆放的区域
通常情况下，元素的包含块是它父元素的内容盒
html：根包含块：初始化包含块

定位体系
1、常规流（normal flow）

2、浮动（float）
3、绝对定位（absolute positioned）
定位体系判定
1、开始>position=absolute或fixed>如果是>他就是绝对定位>结束

2、开始>position=absolute或fixed>如果不是>如果是left或right>他就是浮动>结束

3、开始>position=absolute或fixed>如果不是>如果是left或right>如果都不是>他就是常规流>结束

position默认值：static
fixed默认值：none

任何一个元素，必须属于其中一种定位体系
不同的定位体系中，元素在包含块中的尺寸和位置会有一些差异

常规流：
又叫普通流、文档流、普通文档流
常规流是最常见的定位体系，所有元素默认状态下都是常规流

auto：按照不同定位体系的规则计算
水平方向：
常规流盒子水平方向的尺寸，必须等于包含块的宽度
垂直方向：
margin为auto：0px
height为auto：适应内容的高度

width、height默认值是auto;

常规流块盒，在水平方向居中
第1步、给一个固定宽
第2步、margin：auto；
例子：
width：200px；
margin：auto；

盒子位置
盒子在包含块的垂直方向上依次摆放
依次摆放：按照HTML元素的书写顺序从上到下摆放
盒子在包含块中占据的尺寸是整个盒子的尺寸

垂直方向，若两个外边距相邻，则进行合并（折叠）
垂直方向：水平方向上的外边距不会合并
外边距相邻：两个外边距之间没有border、padding和content
垂直方向外边距合并的规则：
1、如果两个都是正值，取最大值。
2、如果两个都是正负，取最小值。
3、如果一个是正、一负，则进行相加。

外边距合并触发场景：
1、两个挨着的兄弟元素
2、父子级元素
overflow：hidden

盒子的相对位置
相对位置，是指相对于盒子在原本定位体系下的位置

将盒子的position属性设置为relative，以启用相对定位
默认值：static
取值：
static：静态位置，盒子在原本定位体系下的位置
relative：相对位置，盒子相对原本的位置进行偏移
absolute：
fixed：

设置相对位置步骤：
1、position：relative
2、某个方向的偏移量
特点：
1、不会影响其他元素
相对位置的元素，原位置与尺寸依然保留
2、相对位置的元素，会覆盖其它元素
适用场景
想要对某个元素进行位置的移动。
但又想保留其原来的位置与尺寸。