盒子的定位和布局
一、基本概念
（一）视觉格式化模型
- 视觉格式化模型（visual formatting model）：CSS的一种机制，它规定了页面中的多个盒子如何布局
- css的一种机制，视觉格式化模型属于css范畴
- 多个盒子如何布局，中的每个HTML元素都会在页面盒子中生成
- 这些盒子如何排列、如何相互影响，由视觉格式化模型定义
- 视觉格式化模型是一套非常复杂的机制，包含错综复杂的CSS规范
- 本章的课程从实用的角度出发，仅学习在划分页面区域的时候需要的核心知识
- 由于划分页面区域时几乎都使用的是块盒，因此，本章仍然只涉及块盒
（二）视口
- 视口（viewport）：可视窗口，通常指浏览器的可视区域
- 视口的尺寸仅受到浏览器可视窗口大小的影响，和内容无关
- 当网页内容的尺寸超过视口尺寸时，浏览器会出现滚动条
（三）包含块
- 包含块（containing block）：每个元素都有一个包含块，它是指元素在页面中摆放的区域
- 通常情况下，元素的包含块是它父元素的内容盒（content-box）
- 包含块：初始化包含块（initial containing block）初始化包含块是浏览器在渲染前自动生成的一块区域
- 包含块（containing block）：每个元素都有一个包含块，它是指元素在页面中摆放的区域
- 通常情况下，元素的包含块是它父元素的内容盒（content-box）
- 根元素的包含块是初始化包含块（initial containing block）
二、定位体系概述
（一）什么是定位体系
- 视觉格式化模型规定，定位体系一共有三种：常规流（normal flow）浮动（float）绝对定位（absolute positioned）
- 任何一个元素，必须属于其中一种定位体系
- 不同的定位体系中，元素在包含块中的尺寸和位置会有一些差异
（二）定位体系判定
- position是一个CSS属性，默认值为static
- float是一个CSS属性默认值为none
三、盒模型的定位体系
1．定位体系影响盒模型等于最终盒子尺寸；定位体系等于盒子尺寸
2．盒模型中的尺寸：margin：px、em、%、auto；border：px、em；padding：px、em、%；width：px、em、%、auto；height：px、em、%、auto
3．尺寸为设定的值，与定位体系无关
4．尺寸是包含块尺寸的百分比，margin、padding、width的百分比：是包含块宽度的百分比；height的百分比（很少使用）
5．尺寸受到定位体系的影响
6．不同的定位体系，auto的计算规则不一样
四、常规流
（一）常规流
- 常规流，又叫做普通流、文档流、普通文档流
- 常规流是最常见的定位体系，所有元素默认状态下都是常规流定位
（二）盒模型中的auto值
- 常规流盒子水平方向上的尺寸，必须等于包含块的宽度
- margin为auto：0px；height为auto：适应内容的高度
- 水平方向：常规流盒子水平方向上的尺寸，必须等于包含块的宽度，如果不行，则强行将margin-right设置为auto
- 垂直方向：margin为auto：0px；height为auto：适应内容的高度
五、盒子位置
- 盒子在包含块的垂直方向上依次摆放，盒子在包含块的垂直方向上依次摆放。
- 依次摆放：按照HTML元素的书写顺序从上到下摆放
- 依次摆放：按照HTML元素的书写顺序从上到下摆放
- 垂直方向上，若两个外边距相邻，则进行合并（折叠）
- 垂直方向：水平方向上的外边距不会合并
- 外边距相邻：两个外边距之间没有border、padding和content
- 合并：均为正数取最大，均为负数取最小，一正一负则相加
- 左浮动的盒子向上向左排列
- 右浮动的盒子向上向右排列
- 浮动盒子的顶边不得高于上一个盒子的顶边
- 若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左或向右移动
六、浮动
- 当元素的float属性取值为left或right时，元素属于浮动定位
七、当常规流遇上浮动
（一）常规流盒子和浮动盒子混合摆放
- 浮动盒子在摆放时，要避开常规流盒子
- 常规流盒子在摆放时，无视浮动盒子
（二）清楚浮动
- 对一个元素清除浮动，可以让该元素在摆放时，出现在浮动元素的下方
- Clear：none（不清除浮动）/left（清除左浮动，元素在左浮动的盒子下方摆放）/right（清除右浮动，元素在右浮动的盒子下方摆放）/both（清除右浮动，元素在浮动的盒子下方摆放）
- Clear both：对最后一个子元素使用该值，可防止父元素高度坍塌
八、盒子的相对位置
- 相对位置，是指相对于盒子在原本定位体系下的位置，将盒子的position属性设置为relative，以启用相对位置
- 取值为static时：静态位置，盒子在原本定位体系下的位置
- 取值为relative时：相对位置，盒子相对于原本的位置进行偏移
- 取值为absolute时：为绝对位置（绝对定位）
- 取值为fixed时：为固定位置（绝对定位）
九、绝对定位的概述
- 当浮动元素被设置为绝对定位，元素只能属于一种定位体系
- 如果元素被设置为绝对定位，float属性会被强制设置为none
- 绝对定位元素对其他元素的影响，绝对定位元素不会对其他任何元素造成任何影响
- 绝对定位元素的位置，可通过left、top、right、bottom来设置
- 绝对定位元素的包含块：通常情况下，元素的包含块是它父元素的内容盒（content-box），绝对定位元素除外
十、绝对定位的位置和尺寸
（一）盒子的位置
绝对定位中，盒子的位置由left、top、right、bottom四个属性决定，它们表示盒子离包含块边缘的距离
（二）盒子中的auto值
- 大部分情况下，盒子中auto值计算规则和浮动盒子相同，少部分情况下，盒子中auto值需要适应盒子的位置
十一、堆叠级别
- 堆叠级别（stack level），它决定了元素谁显示在前谁显示在后
- 通常情况下，堆叠级别越高，显示越靠前
- 通过z-index属性可设置元素的堆叠级别
- 不要用于静态位置的元素
- 尽量不要使用z-index
十二、块级格式化上下文
- 全称Block Formatting Context，简称BFC，它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局
- 常规流块盒在水平方向上，必须撑满包含块
- 常规流块盒在包含块的垂直方向上依次摆放
- 常规流块盒若外边距无缝相邻，则进行外边距合并
- 常规流块盒的自动高度和摆放位置，无视浮动元素
- Bfc渲染区域：BFC渲染区域：这个区域由某个HTML元素创建，以下元素会在其内部创建BFC区域：根元素，浮动和绝对定位元素，overflow不等于visible的块盒
- 不同的BFC区域，它们进行渲染时互不干扰
- 创建BFC的元素，隔绝了它内部和外部的联系，内部的渲染不会影响到外部
- 创建BFC的元素，它的自动高度需要计算浮动元素
- 创建BFC的元素，它的边框盒不会与浮动元素重叠
- 创建BFC的元素，不会和它的子元素进行外边距合并
十三、弹性布局
- 一个盒子，如果将其display属性设置为 flex ，该盒子变为弹性盒（弹性容器），该盒子的所有子元素，自动变为弹性项目。弹性盒本身按照自身的定位体系排列，弹性布局影响的仅仅是弹性盒中的弹性项目
- 属性：
flex-direction ：更改主轴方向
row 行 默认值
row-reverse 反向 主轴从右向左
column 列 按主轴从上往下排列
column-reverse 按主轴从下往上
justify-content ：更改主轴对其方式
flex-start 默认值 主轴起点一次排列
flex-end 主轴终点对齐
center 主轴中线对齐
space-between 左右项目靠边，中间平均分布
space-around 所有项目平均分布
align-items: 更改侧轴对齐方式
stretch 默认值 拉伸
flex-start 侧轴起点对齐
flex-end 侧轴终点对齐
flex-center 侧轴中线对齐
flex-wrap
wrap （换行）
nowrap （不换行）
align-content
规则：弹性项目宽度自动时，表示适应内容的宽度和高度。margin为自动时，会吸收弹性容器的剩余空间。
- 项目属性
(1) order 更改弹性项目的排列顺序，顺序为从小到大进行排列
(2) flex-shrink 更改弹性项目的压缩比例
1 默认
0 不压缩
(3) flex-grow 更改弹性项目的增长比例
0 默认 不增长
(4) flex-basis 弹性项目在压缩或增长前的基础宽度，若不设置，默认值为auto，表示与width属性值相同
(5) 速写 flex：grow shrink basis; 同时设置增长、压缩、基础值
