视觉格式化模型
视觉格式化模型的三种定位体系：常规流、浮动、绝对定位。
任何一个元素都必须属于其中的某一种定位体系。不同的定位体系中，元素在包含块中的尺寸和位置会有一些差异
一、基础复习
一）三种基本定位机制：
网页常见的布局方式
1.常规流/标准流：
1）块级元素独占一行-->垂直布局
2）行内元素一行显示多个-->水平布局
2.浮动
1）可以让原本垂直布局的块级元素变成水平布局
3.定位
1）可以让元素自由的摆放在网页的任意位置
2）一般用于盒子之间的层叠情况
二、css标准流
一）标准流概述
介绍：标准流又叫文档流，是浏览器在渲染显示网页内容是默认采用的一套排版规则
这套规则规定了应该以何种方式排列元素
二）常见的标准流排版规则
1.块级元素：从上往下，垂直布局，独占一行；
2.行内元素 或 行内块元素：从左往右，水平布局，空间不够则自行换行；
块级原素：
行内元素：
三）块级元素补充：
盒子位置：盒子在包含块的垂直方向上依次摆放，垂直方向上若两个外边距相邻，则会出现折叠情况。(垂直相邻)
垂直方向：水平方向上不会重叠；
合并：两个盒子外边距都是正数的情况下，取最大值；均为负数时取最小；一正一负则相加。
三、css浮动
一）浮动的概述
当元素的float属性值为left或right时的元素为浮动元素
代码：float
取值：
| 属性名 | 效果 |
|---|---|
| float：none | 不浮动 |
| float：left | 左浮动 |
| float：right | 右浮动 |
左浮动的盒子向上向左排列；
右浮动的盒子向上向右排列；
浮动盒子的顶边不得高于上一个盒子的顶边；
若放不下，则换行。
二）浮动的使用场景
1.早期的作用：图文环绕（可搭配外边距一起）
2.现在的作用：
1）让垂直布局的盒子变成水平布局（块级元素排成一行）
如：一个在上方窗口左，一个在窗口右上方（当浏览器窗口变大缩小时，其左右浮动位置大小都不会改变）
.box1{
height：300px;
width：300px;
background-color:red;
/*左浮动*/
float:left;
}
.box2{
height：300px;
width：300px;
background-color:red;
/*右浮动*/
float:right;
}
三）浮动的特点
1.浮动元素会脱离标准流，在标准流中不占位置(原位置会被其下一个元素自动补位)；
2.浮动元素比标准流高半个级别，可以覆盖标准流中的（后一个补位的）元素；
3.下一个浮动元素会再上一个浮动元素的后面进行左右浮动；
4.浮动元素回受到上面元素边界的印象；（如果遇到独占一行的块级元素，则抵着上边界浮动，或可将块级元素变为行内元素display： block/ inline-block）
5.浮动元素有特殊的显示效果：
1）一行可以显示多个（就算是块级元素，在全部添加相同浮动后也是在一行显示）
2）可以设置宽高
注意点：
1）浮动的元素不能通过text-align：centenr或margin-auto，让浮动元素本身居中，而让浮动元素中的文本在浮动块中居中还是可以的，用 ： text-align: center; line-height: 50px; （数值为浮动块的高度）
\
四）当常规流遇上浮动：
常规流盒子和浮动盒子混合摆放：
*浮动盒子在摆放时要避开常规流盒子；
*常规流盒子在摆放时无视浮动盒子
高度坍塌：常规流盒子的自动高度计算时无视浮动盒子
五）清除浮动
1.介绍
含义：清除浮动带来的影响，对一个元素清除浮动，可以让该元素在摆放时，出现在浮动元素的下方
影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素.
原因：子元素浮动后脱离文档流--->不占位置
目的：需要父元素有高度，从而不影响其他网页元素的布局
2.使用方法
1）直接给父元素设置高度（简单粗暴的解决方式）
2）额外标签法：
在父元素内容的最后添加一个块级元素（或最后一个子元素），给添加的块级元素设置clear：both属性，可以防止父元素的高度坍塌，让内容不会重叠在一起。
属性名：clear
默认值：none
取值：none、left、right、both
缺点：会添加很多额外的标签让页面结构变得复杂
3）单伪元素清除法
基本写法：（用伪元素代替了额外的标签）
父级：：after{
/*在父级最后添加一个元素*/
content：''；
/*添加空内容*/
display：block；
/*转换为块级元素*/
clear：both；
/*清除浮动*/
}
补充写法：（不用记）
父级：：after{
/*在父级最后添加一个元素*/
content：''；
/*添加空内容*/
display：block；
/*转换为块级元素*/
clear：both；
/*清除浮动*/
/*补充内容，其作用是在网页中看不到添加的这个伪元素*/
height：0；
visibility：hidden；
/*让当前元素隐藏起来*/
}
4）双伪元素清除法（固定使用套路）
.clearfix：：before，
.clearfix：：after{
content：''；
display：table；
}
.clearfix：：after{
clear：both;
}
在 html中给父元素类名中添加 clearfix。
5）给父元素设置 overflow：hidden（用于父元素不设置高的时候）最优化
方法：直接给父元素设置 overflow：hidden。
特点：最优化
补充六）BFC块级格式化上下文
1.介绍：
他是一个独立的渲染区域，与区域外部分不相干。
2.创建的方法：
1)float的值不能是none；
2)position的值不是static或者relative；
3)display的值是inline-block、table-cell、flex、table-caption或者inline-flex；
4)overflow的值不是visible。
/*
1.html标签本身就是一个BFC盒子；
2.浮动元素本身就是一个BFC盒子；（给父元素也加一个浮动）
3.行内块元素本身就是一个BFC盒子；（把父元素变成行内块元素：添加display：ilnline-block）
4.overflow的值不是visible。（给父元素添加overflow：hidden属性）
*/
3.bfc的作用：
作用1：解决margin塌陷
利用bfc解决上下相邻的两个margin的重叠现象。
作用2：解决父级元素的高度塌陷（什么时候会出现高度坍塌？
作用3：清除浮动
BFC盒子会默认包裹住内部子元素（标准流、浮动）
自适应两栏式布局
四、定位
一）定位的常见应用：
1.可以解决盒子与盒子之间的层叠问题：
定位之后的元素层级最高，可以层叠在其他盒子上面；
2.可以让盒子始终固定在屏幕中的某个位置，不会因为滚动页面而移动。
二）使用定位的步骤：
1.第一步设置定位方式：
*属性名：position
*常见属性值：
| 意思 | 取值 | 写法 |
|---|---|---|
| 静态位置（静态定位） | static | position： static |
| 相对位置（相对定位） | relative | position： relative |
| 绝对位置（绝对定位） | absolute | position： absolute |
| 固定位置（固定定位） | fixed | position： fixed |
| 粘性位置（不常用） | sticky | position： sticky |
2.第二步设置方位属性和偏移值：
*偏移值设置分为两个方向，水平和垂直方向各选一个使用即可；
*选取的原则一般是就近原则（离哪个近用哪个）
*常见取值：
| 方向 | 属性名 | 属性值 | 含义 |
|---|---|---|---|
| 水平 | left | 数字+px | 距离左边的距离 |
| 水平 | right | 数字+px | 距离右边的距离 |
| 垂直 | top | 数字+px | 距离上边的距离 |
| 垂直 | bottom | 数字+px | 距离下边的距离 |
三）五种属性值及其使用方法
1.静态定位 static
*介绍：静态定位是默认值，就是之前认识的标准流。
*代码：position： static
*注意点：
静态定位就是之前认识的标准流，不能通过方位属性进行移动。
2.相对定位 relative
*介绍：相对于盒子原来的位置偏移，原本所占空间不变，没有脱离文档流，一般会用来做绝对定位的元父素。
*代码：position： relative
*特点：
1）需要配合方位属性实现移动（top、bottom、left、right）；
2）相对于自己原来的位置进行移动；
3）原本所占空间不变，没有脱离文档流
*应用场景：
1）配合绝对定位组成“子绝父相”
2）用于小范围的移动
*基础写法：
div{
position:relative；
top:30px;
left:50px;
}
3.绝对定位 absolute
*介绍：相对于设置了定位属性（除static）的父元素偏移；如果没有就相对于html元素
*代码：position： absolute
*特点：
1）需要配合方位属性实现移动（top、bottom、left、right）；
2）默认相对于浏览器可视区域进行移动（若其父级祖先级有其他定位属性，则相对于其最近的有定位的元素进行移动）；
3）在页面中不占位置-->已经脱离文档流
*补充：
1）当浮动元素被设置为绝对定位，元素的float属性会被强制改为none（float属性失效）
2）绝对定位元素对其他元素不会造成任何影响
*应用场景：
1）配合相对定位组成“子绝父相”
*绝对定位相对于谁移动？
1.祖先元素中没有定位-->默认相对于浏览器进行移动；
2.祖先元素中有定位-->相对于最近的且有定位的元素进行移动
补充：“子绝父相”
*场景：
让子元素相对于父元素进行自由移动。
*含义：
子元素：绝对定位
父元素：相对定位
*特点：父元素是相对定位，对网页布局影响小。（若两个都是绝对定位，则会覆盖页面中的其他内容；若父元素是相对定位，那子元素移动不会对页面中的其他内容产生影响）
4.固定定位 fixed
*介绍：相对于浏览器窗口进行定位移动，位置固定，不会随窗口的滚动而移动
*代码：position: fixed
*特点：
1）需要配合方位属性实现移动（top、bottom、left、right）；
2）相对于浏览器可视区域进行移动
3）在页面中不占位置-->已经脱离文档流
*应用场景：
1）让盒子固定在屏幕中的某个位置（如淘宝的搜索框、导航栏）
5.粘性定位 sticky
介绍：相对于视口，依靠滚动位置；
代码：position: sticky
特点：
1）以浏览器的可视窗口为参照点移动元素（固定定位的特点）
2）粘性定位占有原先的位置（相对定位的特点）
3）必需添加方位属性才能生效（top、bottom、right、left）
.box01{position: sticky；
top：0；}
注意：方位值表示当此区域在距视口为0时固定住不再往上。
6.总结：
| 定位方式 | 属性值 | 相对于谁移动 | 是否占位置 |
|---|---|---|---|
| 静态定位 | static | 不能通过方位属性进行移动 （ 标准流） | 占位置（未脱离文档流） |
| 相对定位 | relative | 相对于自己原来的位置进行移动 | 占位置（未脱离文档流） |
| 绝对定位 | absolute | 相对于最近的且有定位的祖先元素移动 | 不占位置（离文档流） |
| 固定定位 | fixed | 相对于浏览器可视区域进行移动 | 不占位置（离文档流） |
| 粘性定位 | sticky | 依赖与用户滚动，绝对定位+一定距离高度 | 不占位置（离文档流） |
四）元素的层级关系
1.不同布局方式（三种）元素的层级关系
定位元素层级>浮动元素层级>标准流元素层级（默认层级）
2.不同定位之间的层级关系
1）相对、绝对、固定三种定位方式的层级默认相同；
2）三种定位同时存在时，则按照html的默认排序，即写在最下面的元素层级越高，会覆盖写在上面的元素
3.手动更改定位元素的层级
*场景：改变定位元素的层级
*属性名：z-index
*属性值：数字
*特点：数字越大，层级越高，堆叠在越上方
\
