格式化宽高的理解

格式化宽高

出现的场景

仅出现在"绝对定位模型"中，也就是出现在position属性值为absolute和fixed的元素中，在默认情况下绝对定位元素的宽度表现是"包裹性"，"宽度由内部尺寸决定"，但是有一中情况下我由外部尺寸决定，就是对于非替换元素，当left/right；top/bottom对立方位的属性值同时存在的时候，元素的宽度和高度表现为"格式化宽度和高度"，其宽度大小相对具有定位特性的祖先（就是相对那个元素绝对定位的那个父元素）元素计算

替换元素不不可用为什么？其实我们设置的宽度高度是起效果了，但是替换元素的内容是大小是没变的（可以理解为，把我们衣服变大了，但是我们实际大小显示的还是不变，）所以才会有object-fit：控制替换元素的大小（我们如何去填充衣服），object-position：替换元素的位置（相对衣服）

例如：

div{position：absolute；left:20px ; right:20px}

假设该父级div的宽度为1000px，则这个<div> 的元素的宽度为960px(即1000-20-20)；

意义

上面div就会和的水流一样自动填满，"格式化宽度和高度"具有完全的流动性，

也就是垂直方向上content，margin，padding，border在同时自动的分配水平的特性

使用的实例

如何使块元素垂直居中

先说为什么可以水平居中？

因为在水平方向上：当width为auto的时候宽度有对应方向的自动填充的特性;

并且margin:auto的作用是自动计算可用空间，这个也就是为什么内联元素使用margin:auto无效了，

内联元素的宽度，由内部的内容决定，

而块级元素的宽度由外部决定，所以块级元素在水平方向上是有多余的可用空间（当我设置width：50px的时候如果外部宽度大于50px，那么其余宽度其实就是块级元素的多余可用空间）

而垂直方向上：当height:auto的时候水平方向没有高度（一般设置一个div后的高度都是一个当前行高的高度，这个高度并不是height:auto的效果），

那如何可以让height:auto的时候有水平方向的高度呢？

答：让高度想宽度一样局有流动性的格式化

    .father {

      height: 200px;
      width: 300px;
      position: relative;
    }

    .son {
      /* 这样就可以格式高度和宽度，使得高度和宽度都可以具有流动性 */
      /* 可用宽度和高度是父级的减去top/bottom left/right*/
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto
    }