CSS--盒模型和定位的百分数计算

盒模型百分数

• width、margin-left\right\top\bottom、padding-left/right/top/bottom的参照物是【父元素】的width。
• height的参照物是【父元素】的height

绝对定位百分比

• 定位起点是【定位包含块】的padding-box

• top \ left 的百分比计算的相对值，也是分别以padding-box的宽高为参照物。

  • top以height为参照物，left以width为参照物。
  • 例：当设置top:100% ; left:100% 时，绝对定位元素在最近的【定位包含块】的右下角，与右下角的边框重合一个小方块。

• 计算得出的偏移距离，是绝对定位的相应方向的边框外侧，与定位包含块的相应边框内侧的距离。

• 例：利用绝对定位可以实现定宽、定高块元素的垂直居中：
  .inner{
  width: 100px;
  height: 100px;
  background: orange;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  }

• 还有一种上述的变化版也可以实现垂直居中：
  .inner{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  }

这是因为translate（）使用百分比时，是以这个元素自身的宽度和高度为基准来进行换算和移动的。

• 最后一种垂直居中的黑科技：FlexBox
  .outer{
  width: 600px;
  height: 600px;
  display: flex;
  }
  .inner{
  width: 300px;
  height: 300px;
  margin: auto;
  }

也就是说，只要父盒子的display是flex，那么只需要在子盒子上设置margin:auto，就能立刻实现垂直居中。

相对定位百分比

• 定位起点是【直接父元素】的padding-box
• 百分比计算是【直接父元素】的padding-box，top相对于height，left相对于width
• 利用relative同样可以实现在父元素中的垂直居中：
  .outer{
  width: 500px;
  height: 300px;
  position: relative;
  top: 50%;
  left: 50%;
  margin-left: -250px;
  margin-top: -150px;
  }

fixed定位百分比

• 定位起点是【页面视口】
• 百分比计算是【页面视口】相应部分的宽高。

• 对于fixed定位而言，必须要结合top left等具体位置的设定才能确定起始位置，否则该元素还停留在原来的位置，则默认top和left隐式设置为能使其停留在原位的值，此时若设置宽高为100%,并不能使其充满屏幕，而是从左上的起始点向右和向下100%充满其余的位置，所以若要用fixed定位充满屏幕，必须同时设置top\left:0,以及宽高100%

绝对定位元素是指绝对定位或者固定定位（fixed或absolute）

总结各种继承：

• 相对于父元素宽度( width )的：
  [max/min-]width、left、right、padding、margin 等；

• 相对于父元素高度( height )的：
  [max/min-]height、top、bottom 等；

• 相对于继承字号的：
  font-size 等；

• 相对于自身字号的：
  line-height 等；

• 相对于自身宽高的：
  border-radius、background-size、transform: translate()、transform-origin、zoom、clip-path 等；

• 特殊算法的：
  background-position（方向长度 / 该方向除背景图之外部分总长度 * 100）、
  filter 系列函数等；

top left bottom right z-index只对 fixed relative absolute元素有效，对static元素无效

实际使用实例：由于padding-top取父元素的width,以及绝对定位元素的起点坐标是相对于父元素的padding-box而言，所以可以在未知屏幕宽度的情况下，设置一个宽充满屏幕，而高与宽相等的容器：

    .image-header
      position: relative
      width: 100%
      height: 0
      padding-top: 100%
      img
        position: absolute
        top: 0
        left: 0
        width: 100%
        height: 100%