定位体系概述

定位体系

1.视觉格式化模型

• 视觉格式化模型css的一种机制，规定了页面中的多个盒子如何布局

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

  1、常规流 （normal flow） 2、浮动（float） 3、绝对定位（absolute positioned）

• 包含块：containing block 每个元素都有一个包含块，指元素在页面中摆放的区域，通常情况下，元素的包含块是它父元素的内容盒。

   注：当定位体系发生变化时，就不一定是父元素了;html的包含块是初始化包含块（initial containing block）

• 元素在包含块中的尺寸和位置，主要受以下影响：1元素的盒模型 2 元素的定位体系

2.定位体系

2.1常规流：

又叫，文档流，普通文档流，常规文档流；所有元素，默认属于常规流布局；总体规则：块盒独占一行，行盒水平依次排列

1.常规流块盒在水平方向上，内容撑满包含块

2常规流块盒在垂直方向上，常规流块盒由上而下依次摆放

3常规流块盒两个相邻的会产生外边距合并

2.2浮动：

当float属性取值为left或right时，属于浮动定位；float 取值：none（默认值) left right (不浮动 左浮动 右浮动)

盒子位置：左浮动向上向左排列 右浮动的盒子向上向右排列 浮动盒子的顶边不得高于上一个盒子的定边

注：浮动的初衷是为了文字环绕，子级浮动会导致父级元素高度塌陷

清除浮动：1.给父元素添添加overflow hidden ；2.给最后一个常规流块盒下加clear：both。

常规流遇上浮动：

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

1.浮动盒子在摆放时，要避开常规流盒子

2.常规流盒子在摆放时，无视浮动盒子（脱离文档流）

3.常规流盒子的自动高度计算时，无视浮动盒子-高度塌陷

2.3绝对定位

取值：position static 为默认值  position(absolute positioned)

1.当浮动元素被设置为绝对定位，属于绝对定位，float属性被强制设置为none

2.绝对定位元素对其他任何元素的影响：

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

3.绝对定位元素的位置：可通过left top right bottom来确定

position(fixed）固定位置：

包含块：视口 ；偏移量的设置（移动），元素的起始位置为视口的左上角

适用场景：pc:页面头部 移动端：footer；以下五个情况的元素，推荐为：aside 1.广告2.侧边栏3.目录4.回到顶部5.即时通讯

position(absolute）绝对位置：

包含块：包含我并离我最近且position值不等于static的元素

适用场景：两个及以上的标签需要重叠在一起的时候

3.定位体系的判定

step1：判定元素的position属性值是不是absolute（绝对位置），fixed（固定位置）；如果是其中某一个，当前元素就属于绝对定位

注：position默认值static；当取值不是两个时，才执行第二步

step2：判定元素的float属性值是不是以下取值：left（左浮动），right（右浮动），如果是其中某一个取值，则当前元素就属于浮动定位

注：float默认值none;默认情况下，元素为常规流定位；第一步满足了不看后面