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
设置
margin: auto的元素，只要它的display没有inline-前缀，那么它在父元素中一定是左右居中的。如果元素设定了：
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
且元素父元素设定了：
position:relative;
那么它在父元素中是上下左右全居中的。
- 在Flex中：
如果给子元素中的随便一个设上margin-left: auto，那么它会把自身和它右侧的元素往右推，让margin空间尽量大，在某些布局设计中有实用价值。设margin-right: auto同理。
设margin-top: auto的话，表现也类似，会让元素沉底，为margin-top留出尽量大的空间。设margin-bottom: auto同理。
当只有一个子元素且设margin:auto，则它水平垂直居中。不常用，因为实用align-items: center; justify-content: center;语义更明确。
- 在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%来计算的。
