前端中一些对齐方式的解析

1、margin:auto

margin:auto 是用来计算元素对应方向应该获得的剩余空间大小

(1) 如果一侧定值，一侧auto，则auto为剩余空间大小
(2) 如果两侧均是auto，则平分剩余空间

<style>
    .father {
      width: 300px;
      background-color: #f0f3f9;
    }
    .son {
      width: 200px;
      height: 120px;
      margin-right: 80px;
      margin-left: auto;
      background-color: #cd0000;
    }
  </style>

<div class="father">
    <div class="son"></div>
  </div>

结果：左边距是20px,右边距是80px。

原因：这里son宽度是200px，容器是300px，总剩余空间大小是100px，其中margin-right使用了80px，那么margin-left的‘auto’计算值就是剩余的20px了

 

margin-left:auto代替float:right实现右对齐

.father {
      width: 300px;
      background-color: #f0f3f9;
    }
    .son {
      width: 200px;
      height: 120px;
      margin-left: auto;
      background-color: #cd0000;
    }

<div class="father">
    <div class="son"></div>
  </div>

左边有多少占多少，所以实现了右对齐。

 

magin:atuo配合绝对定位实现水平和垂直方向居中

.father {
      width: 300px;
      height: 150px;
      background-color: #f0f3f9;
      position: relative;
    }

    .son {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 200px;
      height: 100px;
      background-color: #cd0000;
      margin: auto;
    }


<div class="father">
    <div class="son"></div>
  </div>

top为上边、left为左边、right为右边、bottom为底边，这四个属性只在position中出现。

margin: auto是四边都同时计算剩余距离。