视觉格式化
视觉格式化模型
定义
视觉格式化模型（visual formatting model）：CSS的一种机制，它规定了页面中的多个盒子如何布局
CSS的一种机制：视觉格式化模型属于CSS范畴
多个盒子如何布局：HTML中的每个元素都会在页面中生成盒子，这些盒子如何排列、如何相互影响，由视觉格式化模型定义。
视觉格式化模型是一套非常复杂的机制，包含错综复杂的CSS规范
视口
定义
视口（viewport）：可视窗口，通常指浏览器的可视区域
视口的尺寸仅受到浏览器可视窗口大小的影响，和内容无关
当网页内容的尺寸超过视口尺寸时，浏览器会出现滚动条
包含块
定义
包含块（containing block）：每个元素都有一个包含块，它是指元素在页面中摆放的区域
通常情况下，元素的包含块就是它父元素的内容盒（content-box）
<li>根元素的包含块是初始化包含块（initial containing block）
<li>初始化包含块是浏览器在渲染前自动生成的一块区域
定位体系概述
视觉格式化模型
定义
视觉格式化模型要求，所有的元素必须放置在他的包含块中，元素在包含块中的尺寸和位置，主要受到两个因素影响：
元素的盒模型
元素的定位体系
什么是定为体系
视觉格式化模型规定，定位体系一共有三种：
常规流（normal flow）
浮动（float）
绝对定位（absolute positioned）
注：任何一个元素，必须属于其中一种定位体系。
注2：不同的定位体系中，元素在包含块中的尺寸和位置会有一些差异。
定位体系判定
判断position的值是absolute或fixed。
是=>绝对定位=>结束
不是=>float的值是left或right=>是=>浮动=>结束
不是float的值是left或right=>常规流=>结束
盒模型和定位体系
盒模型就是盒子尺寸；
定位体系就是盒子位置
注：定位体系影响盒模型
盒模型中的尺寸
margin:px/em/%/auto
border:px/em
padding:px/em/%
width:px/em/%/auto
height:px/em/%/auto
盒模型尺寸-%
margin/padding/width的百分比：是包含块宽度的百分比
height的百分比
盒模型尺寸-auto
尺寸受到定位体系的影响，不同的定位体系，auto的计算规则不一样
常规流
定义
常规流，又叫做普通流、文档流、普通文档流，常规六是最常见的定位体系，所有元素默认状态下都是常规流定位。
常规流-盒模型中的auto值
水平方向
常规流盒子水平方向上的尺寸，必须等于包含块的宽度
如果不行，则强行将margin-ight设置为auto
垂直方向
margin为auto：0px
height为auto：适应内容的高度
常规流-盒子位置
盒子在包含块的垂直方向上依次摆放
依次摆放：按照HTML元素的书写顺序从上到下摆放
盒子在包含块中占据的尺寸是整个盒子的尺寸
垂直方向上，若两个外边距相邻，则进行合并（折叠）
垂直方向：水平方向上的外边距不会合并
外边距相邻：两个外边距之间没有border、padding和content
合并：均为正数取最大，均为负数取最小，一正一负则相加
视觉格式化模型
浮动
float
默认值：none=>不浮动
取值：left=>左浮动
tight=>右浮动
margin-laft:auto：尽量撑满包含块（常规流）；0px（浮动）
margin-right:auto：尽量撑满包含块（常规流）；0px（浮动）
margin-top:auto：0px（常规流）；0px（浮动）
margin-bottom:auto：0px（常规流）；0px（浮动）
width:auto：尽量撑满包含块（常规流）；适应内容宽度（浮动）
height:auto：适应内容高度（常规流）；适应内容高度（浮动）
浮动
盒子位置
左浮动的盒子向上向左排列
右浮动的盒子向上向右排列
浮动盒子的顶边不得高于上一个盒子的顶边
若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能够容纳盒子，然后再向左或者向右移动
当常规流遇上浮动
常规流盒子和浮动盒子混合摆放
浮动盒子在摆放时，要避开常规流盒子
常规流盒子在摆放时，无视浮动盒子
常规流盒子的自动高度计算时，无视浮动盒子——高度坍塌</li></ul>
注：常规流的高度无视浮动盒子容易引发高度坍塌
清除浮动
clear：不可继承
默认值：none：不清除浮动
取值：left：清除作浮动，元素在左浮动的盒子下方摆放
right：清除右浮动，元素在右浮动的盒子下方摆放
both：清除左右浮动，元素在浮动的盒子下方摆放
注：对最后一个子元素使用clear：both，可防止父元素高度坍塌
盒子的相对位置
定义
相对位置，是指相对于盒子在原本定为体系下的位置，将盒子的position属性设置为relative，以启用相对位置
position：不可继承
默认值：static
取值：static：静态位置，盒子在原本定位体系下的位置
relative：相对位置，盒子相对于原本的位置进行偏移
absolute：绝对位置（绝对定位）
fixed：固定位置（绝对定位）
相对位置：该盒子可以相对于原本的位置进行偏移，可通过left、top、right、bottom设置偏移量
绝对定位
概述
当浮动元素被设置为绝对定位，float属性会被强制设置为none
绝对定位元素对其他元素的影响：绝对定位元素不会对其他任何元素造成任何影响
绝对定位元素的位置可通过left、top、rightbottom来设置
绝对定位元素的包含块：通常情况下，元素的包含块是它父元素的内容盒（content-box）
注：通常情况下是绝对定位元素除外
position中absolute、fixed都是绝对定位
对盒子在包含块中的位置和影响
盒子的位置：绝对定位中，盒子的位置由left、top、right、bottom四个属性决定他们表示盒子离包含块边缘的距离
盒模型中的auto值
margin-left：auto：0px
margin-right：auto：0px
margin-top：auto：0px
margin-bottom：auto：0px
width：auto：适应内容宽度
height：auto：适应内容宽度
注：少部分情况下，盒子中auto值需要适应盒子的位置
堆叠级别
概念
它决定了元素谁显示在前谁显示在后，通常情况下，堆叠级别越高，显示越靠前，通过z-index属性可设置元素的堆叠级别
z-index
z-index：不可继承
默认值：auto：自动，通常情况下，书写顺序靠后的元素越靠前显示
取值：数值：手动设置堆叠级别，堆叠级别高的元素靠前显示
注：
不要使用静态位置（position=static）的元素
尽量不要使用z-index
块级格式化上下文
全称Block Formatting Context，简称BFC
它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局
独立的
不同的BFC区域，他们进行了渲染时互不干扰
常见BFC的元素，隔绝了它内部和外部的联系，内部的渲染不会影响到外部
具体规则：
创建BFC的元素，它的自动高度需要计算浮动元素
创建BFC的元素，它的边框盒不会与浮动元素重叠
创建BFC的元素，不会和它的子元素进行外边距合并
规定该区域中，常规流块盒的布局
常规流块盒在水平方向上，必须撑满包含块
常规流块盒在包含块的垂直方向上依次摆放
常规流块盒若外边距无缝相邻，则进行外边距合并
常规流块盒的自动高度和摆放位置，无视浮动元素
BFC渲染区域
这个区域由某个HTML元素创建，以下元素会在其内部创建BFC区域：
根元素：意味着，< html >元素创建的BFC区域，覆盖了网页中所有的元素
浮动和绝对定位元素
overflow不等于visible的块盒
