视觉格式化模型、盒模型的尺寸

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

视口：可视窗口

视口的尺寸仅受到浏览器可视窗口大小的影响，和内容无关

包含块（containing block）

每个元素都有一个包含块，它是指元素在页面中摆放的位置。

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

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

注：当定位体系发生变化时包含块就不同了

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

1.常规流（normal flow）

2.浮动（float）

3.绝对定位（absolute positioned）

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

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

定位体系判断：

定位体系判断的步骤：当取值不是position，才看第二步float的判断。

1.判定元素的position属性值是不是absolute（绝对位置）、fixed（固定位置）

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

fixed（固定位置）：

当浮动元素被设置为绝对定位，属于绝对定位，float属性被强制设置为none。

绝对定位元素不会对其他任何元素造成影响。

绝对定位元素的位置可通过left、top、right、bottom来设置 （偏移量的设置）

position：fixed； 起始位置是视口的左上角

适用场景：pc页面头部 移动端footer 广告 侧边栏 目录 回到顶部 即时通讯

absolute（绝对位置）

绝对位置寻找包含块：包含我，理我最近元素的position的值不等于默认值（static）

适用场景：20个及以上的标签需要重叠在一起的时候

z-index堆叠级别

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

默认值为0

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

无法继承

2.判定元素的float属性值是不是left（左浮动）、right（右浮动）

不浮动：none 浮动定位：左浮动、右浮动

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

position的默认值：static float的默认值是：none （都没有继承性，不影响父子级）

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

弊端：

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

浮动脱离文档，常规流盒子的自动高度计算时，无视浮动盒子--高度坍塌

清除浮动：

1.属性名clear left right both（缺点需要在html写一个空标签）

对最后一个子元素使用clear：both使用，可防止父元素高度坍塌。

2.在父元素添加overflow：hidden；

相对位置relative

起始位置：标签原位置的左上角。

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

将盒子的position属性设置为relative，以启动相对位置（不可继承）

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

元素默认状态下都是常规流定位

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

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

垂直方向

margin为auto：0px‘

height为auto：适应内容的高度

常规流盒子和浮动盒子混合摆放

1.浮动盒子在摆放时，要避开常规流盒子

2.常规流盒子在摆放时，无视浮动盒子。

盒模型的尺寸

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

margin、padding、width的百分比：是包含块宽度的百分比

height的百分比是包含块高度的百分比（很少用）

尺寸受到定位体系的影响

不同的定位体系，auto的计算规则不同

px、em：取设置的值

%：根据包含块的尺寸据算

auto：按照不同定位体系的规则计算

盒模型=盒子尺寸 定位体系=盒子位置

盒子的位置

盒子在包含块的垂直方向上依次摆放。

依次摆放：按照html元素书写方式顺序从上到下摆放

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

触发外边距合并条件，垂直两个外边距之间没有padding、border、content

外边距合并规则：

1.相同值，取一个。

2.都是正值取最大。

3.都是负值取最小。

4.一正一负则相加。

overflow:hidden防止合并

视觉格式化模型、盒模型的尺寸

原文：https://www.cnblogs.com/gaoliang54264/p/14858599.html