CSS（五）-- 布局（定位）

目录

• 1.定位position
  • 1.1相对定位
    • 相对定位特点
    • 偏移量
  • 1.2绝对定位（用的最多）
    • 绝对定位特点
    • 包含块
  • 1.3固定定位
    • 浏览器的视口
  • 1.4 粘滞定位
  • 1.5绝对定位元素的位置

1.定位position

• 定位是一种更加高级的布局手段
• 单纯的用margin实现元素的移动，会显得很麻烦且笨拙，因此使用position属性改变元素的定位方式，从而更好的布局
• 通过定位可以将元素摆放到页面的任意位置
• 可选值
  • static 默认值，元素是静止的没有开启定位
  • relative：开启元素的相对定位
  • absolute：开启元素的绝对定位
  • fixed：开启元素的固定定位
  • sticky：开启元素的黏性定位

1.1相对定位

postion：relative；

相对定位特点

• 开启相对定位后，如果不设置偏移量，元素不会发生任何变化
• 相对定位是参照于元素在文档流中的位置进行定位的
• 相对定位会提升元素的层级
• 不会脱离文档流
• 不会改变元素的性质，块还是块，行内还是行内
• 相当于灵魂出窍

偏移量

当元素开启了相对定位以后，可以通过偏移量来设置元素的位置

• top ：定位元素和定位位置上边的距离
• bottom：定位元素和定位位置下边的距离
  • 定位元素垂直方向的位置由top和bottom两个属性来控制
  • 通常情况下我们会使用其中之一
• left：同理
• right：同理
• 相对定位一般是结合绝对定位一起使用

1.2绝对定位（用的最多）

postion：absolute；

绝对定位特点

• 开启绝对定位后，如果不设置偏移量，元素的位置不发生变化
• 开启绝对定位后，元素会从文档流中脱离
• 绝对定位会改变元素的性质，行内-->块，块的宽高被内容撑开（内容有多大就有多大）
• 绝对定位回事元素提升一个层级
• 绝对元素是相对于包含块进行定位的

包含块

• 正常情况下，包含块就是离当前元素最低的祖先块元素
• 绝对定位的包含块：
  • 包含块就是离他最近的开启了定位的祖先元素
  • 如果所有的祖先元素都没有开启定位，则相对于根元素进行定位html，所以html除了根元素还叫初始包含块

1.3固定定位

position：fixed

• 固定定位是特殊的绝对定位
• 唯一不同的是固定定位永远参照于浏览器的视口（和html根元素类似，但不是）进行定位
• 作用：用来做工具栏、目录栏等不会跟随浏览器滚动条滚动的效果

浏览器的视口

浏览器的可视窗口，只针对浏览器视口

• 和根元素的区别
  • 根元素html是针对网页的，当网页向下拖动会消失
  • 可视窗口：针对浏览器窗口，向下移动滚动条不会变

1.4 粘滞定位

position：sticky

• 当元素固定到某一个位置的时候就不动了
• 粘稠定位和相对定位的特点基本一致，不同的是粘滞定位可以在元素到达某个位置时将其固定
• 相对于包含块，一般是相对于body

1.5绝对定位元素的位置

• 水平布局的宽度计算
  • 之前
    margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 包含块的内容区宽度
  • 开启绝对定位后，水平方向的布局等式就要添加left和right两个值，此时规则和之前一样只是多加了两个值
    left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right = 包含块的内容区宽度
    • 当发生过渡约束后，如果9个值没有auto，则自动调整right值以使等式满足
    • 如果有auto，则自动调整auto的值以使等式满足
    • 可以设置auto的值：margin、width、left、right
      -因为left和right的默认值是auto，所以如果不知道left和right，则等式不满足是，会自动调整这两个值
• 垂直布局的宽度计算
  top+margin-top/bottom+padding-top/bottom+border-top/bottom+height = 包含块的内容高度

-实现垂直居中
设置父元素position为relative，那么会相对于父元素居中，而如果父元素不加，则会相对于body居中

复制<style>
.box1{
      width:500px;
      width:500px;
      position:relative;
      background-color:pink:
}
.box2{
      width: 100px;
      height: 100px;
      background-color:orange;
      position:absolute;
      margin:auto;
      left:0;
      right:0;
      top:0;
      boottm:0;
}
</style>