定位体系

定位体系

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

• 常规流（normal flow）

  • 又叫普通流、文档流、普通文档流。
  • 常规流是最常见的定位体系，所有元素默认状态下都是常规流定位。

• 常规流：盒模型中的auto值

  • 水平方向
    • 常规流盒子在水平方向上的尺寸，必须等于包含块的宽度。
    • 假如左、宽、右均设置尺寸但依旧不满足撑满整个包含块宽度，则浏览器自动改动右为auto。

• 垂直方向

  • margin为auto：0px
  • height为auto：适应内容的高度

• 常规流：盒子位置

  • 盒子（块盒）在包含块的垂直方向上依次（从上到下按照html的书写顺序）摆放。
  • 盒子在包含块中占据的尺寸是整个盒子的尺寸。
  • **垂直方向上，若两个外边距相邻，则进行合并（折叠）。**水平方向上不会
    • 外边距相邻：两个外边距之间没有border、padding、content。（触发条件）
    • 合并规则：
      • 相同值，取一个
      • 都是正值，取最大
      • 都是负值，取最小
      • 一正一负则相加

浮动（float）默认值：none

• 当元素的float属性取值为left或right时，元素属于浮动定位。
• float属性不可继承
• 浮动的初衷是为了实现文字环绕。
• 浮动：盒模型中的auto值
  • margin-left:auto (0px)
  • margin-right:auto (0px)
  • margin-top:auto (0px)
  • margin-bottom:auto (0px)
  • width:auto(适应内容宽度)
  • height:auto(适应内容高度)
• 浮动：盒子位置
  • 左浮动的盒子向上向左排列
  • 右浮动的盒子向上向右排列
  • 浮动盒子的顶边不得高于上一个盒子的顶边。
  • 若剩余空间无法放下浮动盒子，则该盒子会先向下找到放得下的空间，再进行左或右浮动。
• 浮动的缺点
  • 子级浮动，父元素高度塌陷（常规流元素会自动忽略浮动元素）（高度为0）。
  • 解决高度塌陷方法：清除浮动
  • 清除浮动方法：
    • 方法1：clear:left(清除左浮动) clear:right(清除右浮动) clear:both(清除全部浮动) 【缺点：需要在HTML写一个空标签。】
    • 方法2：给父元素添加一个伪元素。

绝对定位

概述

• 当浮动元素被设置为绝对定位
  • 属于绝对定位，float（浮动）属性被浏览器强制设置为none。
• 绝对定位对其他元素的影响
  • 绝对定位元素不会对其他任何元素造成任何影响。
• 绝对定位元素的位置
  • 可通过left、right、top、bottom来设置。
• 绝对定位元素的包含块
  • 如果position:fixed（固定位置）;，包含块为视口。
    • 一旦进行偏移量的设置（移动），则元素起始位置是视口左上角。
    • 可通过left、right、top、bottom来设置。
    • 适用场景：PC端:页面头部 移动端:footer PC、移动共用场景：AD(广告)、侧边栏、即时通讯、目录、回到顶部。（推荐元素：aside）。
  • 如果positiong:absolute（绝对位置）;，包含块为包含绝对位置元素，离绝对位置元素最近且position不是默认值的元素则是绝对元素的包含块。
    • 使用场景：两个及以上的元素（标签），需要重叠在一起的时候。
    • 堆叠级别z-index（无法继承）：默认值为0。有效范围：相对位置、绝对位置、固定位置。 取值范围：正负值都可以。（数字越大越靠上，数字越小越靠下。）

对auto值的影响

• 大部分情况下，盒子中auto值计算规则和浮动盒子相同。

常规流遇上浮动

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

• 浮动盒子在摆放的时候，要避开常规流盒子。--------PS：浮动盒子在常规流盒子后面。
• 常规流盒子在摆放的时候，无视浮动盒子。--------PS：常规流盒子在浮动盒子后面。
• 常规流盒子的自动高度计算时，无视浮动盒子。--------高度塌陷。
• 高度塌陷解决方法（清除浮动）：
  • 在父元素写overflow:hidden
  • 在包含块后加一个子元素（常规流）加一个：clear:both（无法继承）

盒子的相对位置(属于常规流)

概念

相对位置，是指相对于盒子在原本定位体系下的位置。

将盒子的position（不可继承）属性设置为relative（相对位置）,以启用相对位置。

• 起始位置为原本元素所在位置。

• 相对位置下，盒子偏移后，不会对其他盒子造成影响且原本位置保留。

• 可通过left、right、top、bottom来设置。