定位体系

视觉格式化模型

视觉格式化模型：

CSS的一种机制，它规定了页面中的多个盒子如何布局

视口（viewport）

包含块

每个元素都有一个包含块，它是指元素在页面中摆放的区域通常情况下，元素的包含块是它父元素的内容盒（content-box）

注 ：当标签的定位体系发生变化时，包含块不一定是它的父元素。

HTML的包含块是初始化包含块（initial containing block）

什么是定位体系：

视觉格式化模型规定，定位体系一共有三种

常规流（normal flow）

浮动（float）

绝对定位（absolute positioned）

任何一个元素，必须属于其中一种定位体系，不同的定位体系中，元素在包含块中的尺寸和位置会有一些差异

定位体系判断的步骤（如果第一步满足就不再进行第二步）

1、判定元素的position属性值是不是以下的取值

absolute（绝对位置）

fixed（固定位置）

如果是其中某一个取值，则当前元素就属于“绝对定位”

position默认值是static

2、判定元素的float属性值是不是以下的取值

left（左浮动）

right（右浮动）

如果是其中某一个取值，则当前元素就属于“浮动”

float默认值none

盒模型中的尺寸-%

尺寸是包含块尺寸的百分比

margin，padding，width的百分比；是包含块宽度的百分比

height的百分比（很少用）

margin：px、em、%、auto

border：px 、em

padding：px、em 、%

content：px、em、%、auto

em、px 取设置的值

%：根据包含块的尺寸计算

auto：按照不同定位体系的规则计算

盒模型中的auto值

盒模型中的auto值-水平方向

常规流盒子水平方向上的尺寸，必须等于包含块的宽度

如果不行，则强行将margin-right设置为auto

盒模型中的auto值-垂直方向

margin为auto：0px

height为auto；适用内容的高度

盒子位置

盒子在包含块的垂直方向上依次摆放

依次摆放：按照HTML元素书写顺序从上往下摆放。

垂直方向上，若两个外边距相邻，则进行合并（折叠）

垂直方向：水平方向不会合并

外边距相邻：两个外边距没有padding，content，border

外边距合并规则

1、相同值取一个

2、都是正值取最大

3、都是负值取最小

4、一正一负则相加

盒模型中的auto值

属性	常规流	浮动（float）&绝对定位
margin-left：auto	尽量撑满包含块	0px
margin-right：auto	尽量撑满包含块	0px
margin-top：auto	0px	0px
margin-bottom：auto	0px	0px
width：auto	尽量撑满包含块	适应内容宽度
height：auto	适应内容高度	适应内容高度

浮动（float）

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

注：浮动的初衷是为了实现文字环绕

子级浮动父级元素高度塌陷

盒子位置

浮动盒子的顶边不得高于上一个盒子的顶边

若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间容纳盒子，然后向左向右移动

清除浮动（clear）

1 clear属性名

属性值：

left (清除左浮动)

right （清除右浮动）

both（清除全部浮动）

缺点：需要在HTML中写一个空标签

解决方式：给父元素添加伪元素

常规流遇上浮动

• 常规流盒子和浮动盒子混合摆放

1、浮动盒子在摆放时，要避开常规流盒子（常规流在前浮动元素在后）

2、常规流盒子在摆放时，无视浮动盒子（浮动盒子在前常规流在后）

解决高度塌陷

1、在父元素里添加overflow:hidden;

2、在父元素里加一个块盒，然后在那个块盒里添加：clear:both;

清除浮动（clear）

不可继承

默认值none

both清楚全部浮动（对最后一个子元素使用该值，可以防止父元素高度塌陷）

对一个元素清除浮动，可以让该元素在摆放时，出现在浮动元素的下方

绝对定位

盒子的相对位置

• 当position的属性值为relative时启用相对位置

  相对定位元素的位置

  可以通过left、top、right、bottom来设置

绝对定位

• 当浮动元素被设置成绝对定位时

  属于绝对定位，float属性会被强制设置成none

• 绝对定位元素对其他元素的影响

  绝对定位元素不会对其他元素造成任何影响

• 绝对定位元素的位置

  可以通过left、top、right、bottom来设置

• 绝对定位元素的包含块

  固定位置，包含块：视口

  当设置成position：fixed时

  它的起始位置就会变成视口的左上角

  使用场景

  pc端页面头部

  移动端：footer

  共用场景：

  1、广告（AP）

  2、侧边栏

  3、目录

  4、回到顶部

  5、即使通讯

绝对位置

当position的属性值为absolute时为绝对位置

• 绝对位置寻找包含块：

  包含我，离我最近元素的position值不等于static（默认值）

使用场景

两个及以上标签需要重叠在一起的时候

堆叠级别（z-index）

无法继承

使用范围：相对（relative） 绝对（absolute） 固定位置（fixed）

默认值为0

取值范围：正 负值都可以（数值越大越靠上，数值越小越靠下）

属性	常规流	浮动（float）&绝对定位
margin-left：auto	尽量撑满包含块	0px
margin-right：auto	尽量撑满包含块	0px
margin-top：auto	0px	0px
margin-bottom：auto	0px	0px
width：auto	尽量撑满包含块	适应内容宽度
height：auto	适应内容高度	适应内容高度