盒子的定位和布局

 

一、基本概念

（一）视觉格式化模型

1. 视觉格式化模型（visual formatting model）：CSS的一种机制，它规定了页面中的多个盒子如何布局
2. css的一种机制，视觉格式化模型属于css范畴
3. 多个盒子如何布局，中的每个HTML元素都会在页面盒子中生成
4. 这些盒子如何排列、如何相互影响，由视觉格式化模型定义
5. 视觉格式化模型是一套非常复杂的机制，包含错综复杂的CSS规范
6. 本章的课程从实用的角度出发，仅学习在划分页面区域的时候需要的核心知识
7. 由于划分页面区域时几乎都使用的是块盒，因此，本章仍然只涉及块盒

（二）视口

1. 视口（viewport）：可视窗口，通常指浏览器的可视区域
2. 视口的尺寸仅受到浏览器可视窗口大小的影响，和内容无关
3. 当网页内容的尺寸超过视口尺寸时，浏览器会出现滚动条

（三）包含块

1. 包含块（containing block）：每个元素都有一个包含块，它是指元素在页面中摆放的区域
2. 通常情况下，元素的包含块是它父元素的内容盒（content-box）
3. 包含块：初始化包含块（initial containing block）初始化包含块是浏览器在渲染前自动生成的一块区域
4. 包含块（containing block）：每个元素都有一个包含块，它是指元素在页面中摆放的区域
5. 通常情况下，元素的包含块是它父元素的内容盒（content-box）
6. 根元素的包含块是初始化包含块（initial containing block）

二、定位体系概述

（一）什么是定位体系

1. 视觉格式化模型规定，定位体系一共有三种：常规流（normal flow）浮动（float）绝对定位（absolute positioned）
2. 任何一个元素，必须属于其中一种定位体系
3. 不同的定位体系中，元素在包含块中的尺寸和位置会有一些差异

（二）定位体系判定

1. position是一个CSS属性，默认值为static
2. 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的计算规则不一样

四、常规流

（一）常规流

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

（二）盒模型中的auto值

1. 常规流盒子水平方向上的尺寸，必须等于包含块的宽度
2. margin为auto：0px；height为auto：适应内容的高度
3. 水平方向：常规流盒子水平方向上的尺寸，必须等于包含块的宽度，如果不行，则强行将margin-right设置为auto
4. 垂直方向：margin为auto：0px；height为auto：适应内容的高度

五、盒子位置

1. 盒子在包含块的垂直方向上依次摆放，盒子在包含块的垂直方向上依次摆放。
2. 依次摆放：按照HTML元素的书写顺序从上到下摆放
3. 依次摆放：按照HTML元素的书写顺序从上到下摆放
4. 垂直方向上，若两个外边距相邻，则进行合并（折叠）
5. 垂直方向：水平方向上的外边距不会合并
6. 外边距相邻：两个外边距之间没有border、padding和content
7. 合并：均为正数取最大，均为负数取最小，一正一负则相加
8. 左浮动的盒子向上向左排列
9. 右浮动的盒子向上向右排列
10. 浮动盒子的顶边不得高于上一个盒子的顶边
11. 若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左或向右移动

六、浮动

1. 当元素的float属性取值为left或right时，元素属于浮动定位

 

 

七、当常规流遇上浮动

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

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

（二）清楚浮动

1. 对一个元素清除浮动，可以让该元素在摆放时，出现在浮动元素的下方
2. Clear：none（不清除浮动）/left（清除左浮动，元素在左浮动的盒子下方摆放）/right（清除右浮动，元素在右浮动的盒子下方摆放）/both（清除右浮动，元素在浮动的盒子下方摆放）
3. Clear both：对最后一个子元素使用该值，可防止父元素高度坍塌

八、盒子的相对位置

1. 相对位置，是指相对于盒子在原本定位体系下的位置，将盒子的position属性设置为relative，以启用相对位置
2. 取值为static时：静态位置，盒子在原本定位体系下的位置
3. 取值为relative时：相对位置，盒子相对于原本的位置进行偏移
4. 取值为absolute时：为绝对位置（绝对定位）
5. 取值为fixed时：为固定位置（绝对定位）

九、绝对定位的概述

1. 当浮动元素被设置为绝对定位，元素只能属于一种定位体系
2. 如果元素被设置为绝对定位，float属性会被强制设置为none
3. 绝对定位元素对其他元素的影响，绝对定位元素不会对其他任何元素造成任何影响
4. 绝对定位元素的位置，可通过left、top、right、bottom来设置
5. 绝对定位元素的包含块：通常情况下，元素的包含块是它父元素的内容盒（content-box），绝对定位元素除外

十、绝对定位的位置和尺寸

（一）盒子的位置

绝对定位中，盒子的位置由left、top、right、bottom四个属性决定，它们表示盒子离包含块边缘的距离

（二）盒子中的auto值

1. 大部分情况下，盒子中auto值计算规则和浮动盒子相同，少部分情况下，盒子中auto值需要适应盒子的位置

十一、堆叠级别

1. 堆叠级别（stack level），它决定了元素谁显示在前谁显示在后
2. 通常情况下，堆叠级别越高，显示越靠前
3. 通过z-index属性可设置元素的堆叠级别
4. 不要用于静态位置的元素
5. 尽量不要使用z-index

十二、块级格式化上下文

1. 全称Block Formatting Context，简称BFC，它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局
2. 常规流块盒在水平方向上，必须撑满包含块
3. 常规流块盒在包含块的垂直方向上依次摆放
4. 常规流块盒若外边距无缝相邻，则进行外边距合并
5. 常规流块盒的自动高度和摆放位置，无视浮动元素
6. Bfc渲染区域：BFC渲染区域：这个区域由某个HTML元素创建，以下元素会在其内部创建BFC区域：根元素，浮动和绝对定位元素，overflow不等于visible的块盒
7. 不同的BFC区域，它们进行渲染时互不干扰
8. 创建BFC的元素，隔绝了它内部和外部的联系，内部的渲染不会影响到外部
9. 创建BFC的元素，它的自动高度需要计算浮动元素
10. 创建BFC的元素，它的边框盒不会与浮动元素重叠
11. 创建BFC的元素，不会和它的子元素进行外边距合并

 十三、弹性布局

1. 一个盒子，如果将其display属性设置为 flex ，该盒子变为弹性盒（弹性容器），该盒子的所有子元素，自动变为弹性项目。弹性盒本身按照自身的定位体系排列，弹性布局影响的仅仅是弹性盒中的弹性项目
2. 属性：

　　 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. 项目属性

(1) order 更改弹性项目的排列顺序，顺序为从小到大进行排列

(2) flex-shrink 更改弹性项目的压缩比例

　　 1 默认

　　 0 不压缩

(3) flex-grow 更改弹性项目的增长比例

　　 0 默认 不增长

(4) flex-basis 弹性项目在压缩或增长前的基础宽度，若不设置，默认值为auto，表示与width属性值相同

(5) 速写 flex：grow shrink basis; 同时设置增长、压缩、基础值