这是我参与「第四届青训营 」笔记创作活动的第3天
常规流
视觉格式化模型（布局规则）：页面中的多个盒子排列规则
视觉格式化模型，大体上将页面中的盒子的排列分为三种方式：
- 常规流
- 浮动
- 定位
常规流布局
常规流、文档流、普通文档流、常规文档流
所有元素，默认情况下，都属于常规流布局
总体规则：块盒独占一行，行盒水平依次排列
包含块：每个盒子都有它的包含块，包含块决定了盒子的排列区域
绝大情况下：盒子的包含块为其父元素的内容盒
块盒
- 每个块盒的总宽度，必须刚好等于包含块的宽度
宽度默认值为auto
margin取值也可以是auto，默认值0
auto：将剩余空间吸收
width吸收能力强于margin
若宽度、边框、内边框、外边距计算后，仍有剩余空间，该剩余空间被margin-right全部吸收
在常规流中，块盒在其包含块中居中，可以定宽，然后margin设置为auto
- 每个块盒垂直方向上的auto值
height：auto，适应内容的高度
margin：atuo，表示0
- 百分比取值
padding、宽高、margin可以可以取值为百分比
以上所有百分比相比于包含块的宽度
高度的百分比：
1）. 包含块的高度取决于子元素的高度，设置百分比无效 2）. 包含块的高度不取决于子元素的高度，百分比相对于父元素高度
- 上下外边距的合并
两个常规流块盒，上下外边距相邻会进行合并
两个外边距取最大值
浮动
应用场景
- 文字环绕
- 横向排列
浮动的基本特点
修改float属性为：
- left：左浮动，元素靠上靠左
- right:右浮动，元素靠上靠右
默认值为none
- 当一个元素浮动后，元素必定是块盒
- 浮动元素的包含块，和常规流一样，为父元素的内容盒
盒子尺寸
- 宽度为auto，适应内容宽度
- 高度为auto，和常规流一样，适应内容高度
- margin为auto，为0
- 边框、内边距、百分比设置于常规流一样
盒子排列
- 左浮动盒子靠上靠左
- 右浮动盒子靠上靠右
- 浮动盒子在包含块中排列时，会避开常规流盒子
- 常规流块盒在排列时，无视浮动盒子
- 行盒在排列时会避开浮动盒子
- 外边距合并不会发生
如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒叫匿名行盒
高度坍塌
高度坍塌的根源：常规流盒子的自动高度，在计算时不会考虑浮动盒子
解决方法：清除浮动，涉及CSS属性：clear
- 默认值：none
- left：清除左浮动，该元素必须出现在前面所有左浮动盒子的下方
- right：清除右浮动，该元素必须出现在前面所有右浮动盒子的下方
- both：清除左右浮动，该元素必须出现在前面所有浮动盒子的下方
定位
手动控制元素在包含块中的精准位置
CSS属性：position
position属性
- 默认值：static，静态定位（不定位）
- relative：相对定位
- absolute：绝对定位
- fixed：固定定位
position取值不是static，认为该元素是一个定位元素
定位元素会脱离文档流（相对定位除外）
一个脱离了常规流的元素：
- 文档流中的元素摆放时，会忽略脱离了文档流的元素
- 文档流中的元素计算自动高度时，会忽略脱离了文档流的元素
相对定位
不会导致元素脱离文档流，只是让元素在原来位置上进行偏离。
可以通过四个CSS属性设置其位置：
- left
- right
- top
- bottom
盒子的偏移不会对其他盒子造成任何影响
绝对定位
- 宽高为auto，适应内容
- 包含块变化找祖先元素中第一个定位元素，该元素的填充盒为其包含块。若找不到，则它的包含块为整个网页（初始化包含块）
固定定位
其他情况和绝对定位完全一样
包含块不同：固定为视口（浏览器的可视窗口）
定位下的居中
某个方向居中：
- 定宽（高）
- 将左右（上下）距离设置为0
- 将左右（上下）margin设置为auto
绝对定位和固定定位中，margin为auto时，会自动吸收剩余空间
多个定位元素重叠时
堆叠上下文
设置z-index，该值越大，越靠前
只有定位元素设置z-index有效
z-index可以是负数，如果是负数，则遇到常规流、浮动元素，则会被其覆盖
补充
- 绝对定位、固定定位一定是块盒
- 绝对定位、固定定位一定不是浮动
- 没有外边距合并
透明
每个颜色都具有透明通道，0~1
- rgba(红, 绿, 蓝, alpha)
- hex：#红绿蓝透
个人总结
常规流、浮动和定位三者相互结合构成整个页面，CSS中的重点知识，需要熟练掌握并应用
