基本概念

 

1. 基本概念

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

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

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

根元素的包含块是初始化包含块（initial containing block）。

2. 定位体系概述

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

常规流（normal flow）

浮动（float）

绝对定位（absolute positioned）

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

 

3. 盒模型和定位体系

 

 

4. 常规流-盒模型中的auto值

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

水平方向：常规流盒子水平方向上的尺寸，必须等于包含块的宽度，如果不行，则强行将margin-right设置为auto。

垂直方向：margin为auto：0px，height为auto：适应内容的高度。

盒子位置

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

垂直方向上，若两个外边距相邻，则进行合并（折叠），垂直方向：水平方向上的外边距不会合并，外边距相邻：两个外边距之间没有border、padding和content，合并：均为正数取最大，均为负数取最小，一正一负则相加。

 

 

 

5. 当常规流遇上浮动

常规流盒子和浮动盒子混合摆放，浮动盒子在摆放时，要避开常规流盒子，常规流盒子在摆放时，无视浮动盒子，常规流盒子的自动高度计算时，无视浮动盒子 —— 高度坍塌。

清除浮动

对一个元素清除浮动，可以让该元素在摆放时，出现在浮动元素的下方，对最后一个子元素使用clear:both，可防止父元素高度坍塌。

6. 绝对定位概述

当浮动元素被设置为绝对定位

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

绝对定位元素对其他元素的影响

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

绝对定位元素的位置

可通过left、top、right、bottom来设置