一、 基本概念
- 视觉格式化模型（visual formatting model）：CSS的一种机制，它规定了页面中的多个盒子如何布局
- 视觉格式化模型：是一套非常复杂的机制，包含错综复杂的CSS规范；本章的课程从实用的角度出发，仅学习在划分页面区域的时候需要的核心知识；由于划分页面区域时几乎都使用的是块盒，因此，本章仍然只涉及块盒
- 多个盒子如何布局：HTML中的每个元素都会在页面中生成盒子；这些盒子如何排列、如何相互影响，由视觉格式化模型定义。
- 主要受到两个因素的影响：元素的盒模形；元素的定位体系。
4.
二、视口
- 视口：可视窗口，通常指浏览器的可视区域（视口的尺寸仅受到浏览器可视窗口大小的影响，和内容无关；当网页内容的尺寸超过视口尺寸时，浏览器会出现滚动条）
- 包含块：每个元素都有一个包含块，它是指元素在页面中摆放的区域；通常情况下，元素的包含块是它父元素的内容盒（content-box）；根元素的包含块是初始化包含块（initial containing block）。
2.
三、定位体系概述
三、1、视觉格式化模型规定，定位体系一共有三种：常规流（normal flow）；浮动（float）；绝对定位（absolute positioned）
2、任何一个元素，必须属于其中一种定位体系；不同的定位体系中，元素在包含块中的尺寸和位置会有一些差异。
定位体系判断：
四、 盒模型和定位体系
盒模型=盒子尺子 定位体系=盒子位置
定位体系影响盒模型。
和模型中的尺寸：margin：px、em、%、auto。
Border：px、em。
Padding：px、em、%、auto。
Width：px、em、%、auto。
Height：px、em、%、auto。
尺寸为设定的值，与定位体系无关。
尺寸是包含块尺寸的百分比：margin、padding、width的百分比：是包含块宽度的百分比：height的百分比很少用。
模型中的尺寸-auto：尺寸受到定位体系的影响，不同的定位体系，auto的计算规则不一样
五、 常规流
常规流：又叫做普通流、文档流、普通文档流；常规流是最常见的定位体系，所有元素默认状态下都是常规流定位
常规流盒子水平方向上的尺寸，必须等于包含块的宽度
水平方向：常规流盒子水平方向上的尺寸，必须等于包含块的宽度；如果不行，则强行将margin-right设置为auto
盒子位置：盒子在包含块的垂直方向上依次摆放：依次摆放：按照HTML元素的书写顺序从上到下摆放；盒子在包含块中占据的尺寸是整个盒子的尺寸
垂直方向上，若两个外边距相邻，则进行合并（折叠）
垂直方向：水平方向上的外边距不会合并
外边距相邻：两个外边距之间没有border、padding和content
合并：均为正数取最大，均为负数取最小，一正一负则相加
六、 浮动
当元素的float属性取值为left或right时，元素属于浮动定位，浮动不可继承；默认值none；left左浮动；right右浮动。
|
属性 |
常规流 |
浮动 |
|
Margin-left：auto |
尽量撑满包含块 |
0px |
|
Margin-right：auto |
尽量撑满包含块 |
0px |
|
Margin-top：auto |
0px |
0px |
|
Margin-bottom：auto |
0px |
0px |
|
Width：auto |
尽量撑满包含块 |
适应内容宽度 |
|
Height：auto |
尽量撑满包含块 |
适应内容宽度 |
浮动盒子的位置：
- 左浮动的盒子向上向左排列
- 右浮动的盒子向上向右排列
- 浮动盒子的顶边不得高于上一个盒子的顶边
- 若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能
- 容纳盒子，然后再向左或向右移动
5.常规流遇上浮动：
常规流盒子和浮动盒子混合摆放
- 1. 浮动盒子在摆放时，要避开常规流盒子
- 2. 常规流盒子在摆放时，无视浮动盒子
- 3. 常规流盒子的自动高度计算时，无视浮动盒子 —— 高度坍塌
3.
清除浮动
对一个元素清除浮动，可以让该元素在摆放时，出现在浮动元素的下方
对最后一个子元素使用clear:both，可防止父元素高度坍塌
Clear：不可继承；默认值none
取值：none不清除浮动；
Left：清除左浮动，元素在左浮动的盒子下方摆放
right：清除右浮动，元素在右浮动的盒子下方摆放
both：清除左右浮动，元素在浮动的盒子下方摆放
盒子的相对位置：
相对位置，是指相对于盒子在原本定位体系下的位置
将盒子的position属性设置为relative，以启用相对位置
Position：不可继承，默认值static；
取值：static：静态位置，盒子在原本定位体系下的位置
relation：相对位置，盒子相对于原本的位置进行偏移
absolute：绝对位置
fixed：固定位置
Position：relation：可通过left、top、right、bottom设置偏移量
当浮动元素被设置为绝对定位：
某个元素：float:left; position:absolute; 元素只能属于一种定位体系
如果元素被设置为绝对定位，float属性会被强制设置为none
绝对定位元素不会对其他任何元素造成任何影响
可通过left、top、right、bottom来设置
绝对定位元素的包含块
通常情况下，元素的包含块是它父元素的内容盒（content-box）
绝对定位元素除外
绝对定位中，盒子的位置由left、top、right、bottom四个属性决定；它们表示盒子离包含块边缘的距离
|
属性 |
浮动 |
|
margin-left:auto
|
0px
|
|
margin-right:auto
|
0px
|
|
margin-top:auto
|
0px
|
|
margin-bottom:auto
|
0px
|
|
auto
|
适应内容宽度
|
|
height:auto
|
适应内容宽度
|
少部分情况下，盒子中auto值需要适应盒子的位置
堆叠级别：它决定了元素谁显示在前谁显示在后；通常情况下，堆叠级别越高，显示越靠前；通过z-index属性可设置元素的堆叠级别；
z-index；不可继承；默认值auto；
取值：auto：自动，通常情况下，书写顺序靠后的元素靠前显示
数值：手动设置堆叠级别，堆叠级别高的元素靠前显示
使用z-index属性时需要注意的：不要用于静态位置的元素；尽量不要使用z-index