width: auto

auto是width的默认值，不需专门设，它保证自身恰好充满父容器的content宽度，无论自身是否有margin/padding/border。很好用。

与width: 100%的区别是：

width: 100%表示自身的content宽度等于父元素的content的宽度。如果自身没有margin/padding/border，那么自身恰好充满父元素的content，如果有，则一定会溢出父元素的content。

也因此，在布局中，如果两个并排元素各占50%宽度，且有padding/border，那么必须给两个元素设置box-sizing: border-box;。

height: auto

auto是height的默认值，不需专门设。height:auto是由元素的内容撑起的高度来决定元素的高度，这跟width: auto不一样。这么设计也是有其原因的，因为盒模型要求宽度自动充满，高度尽量扁。

height:100%跟width: 100%类似，也是父元素content高度确定自身的高度。其他原理大致也同width: 100%。

margin: auto

1. 设置margin: auto的元素，只要它的display没有inline-前缀，那么它在父元素中一定是左右居中的。

2. 如果元素设定了：

position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;

且元素父元素设定了：

position:relative;

那么它在父元素中是上下左右全居中的。

3. 在Flex中：

如果给子元素中的随便一个设上margin-left: auto，那么它会把自身和它右侧的元素往右推，让margin空间尽量大，在某些布局设计中有实用价值。设margin-right: auto同理。

设margin-top: auto的话，表现也类似，会让元素沉底，为margin-top留出尽量大的空间。设margin-bottom: auto同理。

当只有一个子元素且设margin:auto，则它水平垂直居中。不常用，因为实用align-items: center; justify-content: center;语义更明确。

4. 在Grid中：

给任意单元格设置margin-left: auto或margin-right: auto，会把内容挤到一边，让margin尽量大。设margin-top: auto或margin-bottom: auto没有反应。

flex: auto

flex: auto等价于：

  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;

flex: 1等价于：

  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;

flex: auto跟flex: 1的区别：

• flex: auto会考察元素的内容宽高，根据内容宽高分配真正的宽高。
• flex: 1不考察元素的内容宽高，只根据flex-grow: 1;flex-shrink: 1分配真正的宽高。

验证：

现在父元素是display: flex;width: 400px; height: 300px;，3个子元素只设flex: auto;，每个子元素又有个子元素，其中第二个宽度与第一、三个的宽度不一致：

    <div style="display: flex; width: 400px; height: 300px">
      <div style="flex: auto">
        <div style="width: 20px; height: 300px"></div>
      </div>
      <div style="flex: auto">
        <div style="width: 40px; height: 300px"></div>
      </div>
      <div style="flex: auto">
        <div style="width: 20px; height: 300px"></div>
      </div>
    </div>

得到子元素宽度：126.67px、146.67px、126.67px。可见，宽度参考了内容的宽度。计算过程从略，不在本文讨论。

接着，将flex: auto改成flex: 1，得到子元素宽度：133.33px、133.33px、133.33px。可见，宽度没有参考内容宽度。

grid-template-columns: auto auto ...

全是auto的话，如果某单元格的内容不撑爆容器，则自动平均分配列宽且充满父元素，如果内容撑爆了容器，则其他单元格尽量收紧，保证撑爆的这个能正常显示。

如果是grid-template-columns: auto 2fr auto 1fr，也就是说出现了auto以外的值，那么auto的单元格会缩到仅能容纳内容的宽度，剩下的空间由1fr之类的再行分配。

overflow: auto

比overflow: scroll;更好的选择，因为auto是自动的，scroll无脑出现滚动条，即使不需要滚动条。

left: auto（以及right: auto等）

这个知识不是每个人都在意过，就是left的默认值并不是0，而是auto。

而且，auto的计算原则比较独特，下方代码，子元素的left值为20px，跟父元素padding保持一致。

    <div style="position: relative; padding: 20px">
      <div style="position: absolute; width: 100px; height: 100px; left: auto;"></div>
    </div>

当你打算“重置”left，又不知道该写几，那么可以试试auto。

另外，left: 50%是根据父元素padding+border+content的宽度当做100%来计算的。