视觉格式化模型
Posted zhangzhiyong
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了视觉格式化模型相关的知识，希望对你有一定的参考价值。
定义：视觉格式化模型（visual formating model）: CSS的一种机制，由大量CSS规范组成，规定了多个元素在页面中如何布局。
一、视觉格式化模型
①元素的定位体系
- 任何一个元素，必须属于其中一种定位体系。
- 定位体系有三种：常规流（normal flow）、浮动（float）、绝对定位（absolute positioned）。
开始→position的值是absolute或fixed?→否→float的值是left或right？→否
↓ ↓ ↓
是 是 常规流
↓ ↓
绝对定位 浮动
②盒模型中的尺寸：
- em：取父级元素的倍数。例如：font-size：2em；表示取父级元素font-size的2倍。
- rem：取根元素的倍数。
- %：百分率，表示取父级元素的宽度的百分比。
- auto：自动，一般来说，是元素内容所占的宽度。
- 盒模型中的尺寸-%：表示尺寸是包含块尺寸的百分比。
- margin、padding、width的百分比：指包含块宽度的百分比。
- height（很少用）。
- 盒模型中的auto：尺寸收到定位体系的影响，不同定位体系，auto的计算规则不一样。
- margin的取值可取负值，这样两个盒子就形成重叠。
二、 常规流：
- 又叫普通流、文档流、普通文档流。
- 盒模型中的auto值：块级元素在常规流定位体系中尺寸取值为自动值的时候计算尺寸方式如下：
①水平方向： - 常规流盒子水平方向上的尺寸，必须等于包含块的宽度。
- 块级元素在常规流中水平居中的方法：一是给块级元素一个固定宽值，二是margin的左和右设置为auto。这样就可以水平自动居中。
- 当左右外边距和width都是固定，无法满足包含块的宽度时，则右外边距会被强制改成auto，从未撑满包含块的宽度。
②垂直方向： - margin为auto时，垂直方向上为0px。
- height为auto时，适应内容的宽度。
- 若两个外边距相邻，则进行合并（折叠）：当都是正值时，取最大值；当都是负值时，取最小值；当两个数一正一负时，取相加。
- 若外边距取负值时，可调整标签的位置，即两个标签可以相互重叠。
三、浮动
- 当元素的float属性取值为left或right时，元素属于浮动定位。
1. 盒模型中的auto值：
| 属性 | 常规流 | 浮动 | | :-------- | --------: | :------: | | margin-left:auto | 尽量撑满包含块| 0px | | margin-right:auto | 尽量撑满包含块 | 0px | | margin-top:auto | 0px | 0px | | margin-bottom:auto | 0px | 0px | | width:auto | 尽量撑满包含块 | 适应内容宽度 | | height:auto | 适应内容高度 | 适应内容高度 |
2. 盒子的位置：
- 左浮动的盒子：先向上再向左排列。
- 右浮动的盒子：先向上再向右排列。
- 浮动盒子的顶边不得高于上一个盒子的顶边。
- 若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左或向右移动。
3. 当常规流遇上浮动：
- 浮动盒子在摆放时，要避开常规流盒子。
- 常规流盒子在摆放时，无视浮动盒子。
- 浮动盒子脱离文档流，子级元素浮动时、父级元素高度塌陷。
4. 清除浮动（解决高度塌陷）：
- 对一个元素，清除浮动，可以让该元素在摆放时，出现在浮动元素的下方。
header:after{ 在header元素里创建的最后一个元素
content:""; 元素内容为空
display:block; 改为块级元素
clear:both;} 清除左右浮动
通过以上方法，将父级元素的高度计算至最底边。
5. float取值 - 不可继承。
- none（默认值）：不清除浮动
- left：清除左浮动，元素在左浮动的盒子下方摆放。
- right：清除右浮动，元素在右浮动的盒子下方摆放。
- both：清除左右浮动，元素在左右浮动的盒子下方摆放。
四、绝对定位体系
1. 盒子的相对位置：
- 指相对于盒子在原来定位体系下的位置。
- 不会脱离文档流。
- 将盒子的position属性设置成ralative，以启用相对位置。
- position属性：不可继承。
- static（默认）：静态位置（原本位置）。
- relative：相对位置，盒子相对原本的位置进行便偏移。
- absolute：绝对位置。
- fixed：固定位置。
- 盒子偏移后，不会对其他盒子位置造成影响，但可能出现覆盖其他内容的情况。
- 以下情况可用相对位置：
- 原有位置需要继续占用时。
- 盒子间需要重叠的时候。
2.绝对定位
- 当浮动元素被设置为绝对定位，float属性会被强制设置为none。
- 绝对定位不会对其他腾和元素造成任何影响，而且不占原来的位置。
- 绝对定位可通过left、top、right、bottom来设置。
①固定位置（position:fixed）
- 固定位置根据相对视口的偏移量来变化，要脱离文档流。
- 一般在形成重叠时使用。
- 代码所在位置先后对固定位置的标签没有影响，故一般写到body结束标签前。
②绝对位置（position:absolute）
子元素起始位置判断：
position:absolute
↓
从里往外依次判断元素是否
拥有position≠static的 → 否 → 初始化包含块左上角开始（即视口左上角）
祖先元素（离得最近的上级）
↓
是
↓
从该元素的填充盒开始
注意：建议包含块position属性取relative，这样就不会破坏原有页面的布局。如果取值为absolute、fixed就会脱离文档流，下面的常规流就会上移，从而破坏原有页面布局。
③堆叠级别（stack level）
- 堆叠级别决定了元素谁显示在前、谁显示在后。
- 通过Z-index属性可设置元素的堆叠级别。
- z-index属性：不可继承，默认值为auto（即0），取值为数值（范围为负无穷到正无穷）
- 注：一是该属性只用于绝对位置和固定位置上，不适用于静态位置的元素。二是尽量不要使用z-index。
④块级格式化上下文（Block Formatting Context，简称BFC）
- 它是一块独立的渲染区域，规定了该区域中常规流快和的布局。
- BFC渲染区域：这个区域有某个html元素创建，以下元素会在其内部创建BFC区域：
- 根元素 - 浮动和绝对定位元素
- overflow不等于visible的块盒：即 overflow：hidden（不脱离文档流）
- 不同BFC区域，他们进行渲染时互补干扰，即外边距不会合并。
以上是关于视觉格式化模型的主要内容，如果未能解决你的问题，请参考以下文章
css 视觉格式化模型 (visual formatting model )