CSS auto是一个非常常用的属性，它的作用是可以自动地调整元素的尺寸、宽度、高度等属性。在实际的开发过程中会经常用到，但是可能一些开发者对它的使用还不太熟悉。下面就来分享一些有关CSS auto的知识。
1. CSS中的auto
在CSS中，auto表示的是“自动”，它可以用来表示某个CSS属性的值由浏览器计算自动确定。我们常用到的有width、height、margin、padding、position等属性。比如，我们可以使用auto来自动计算下方元素的间隔距离：
ul li {
margin-bottom: auto;
}
这样做之后，每个li元素之间的距离就会由浏览器自动计算，而不需要手动设置。
2. auto在宽度和高度中的应用
在CSS中，当我们想让一个元素的宽度或者高度自由伸缩时，我们通常会将这个属性设置为auto。这个属性对于响应式设计尤其有用，因为它可以让元素占据剩余的空间并按照比例缩放。
如果你希望一个元素的宽度是自适应的，可以这样设置：
.container {
width: auto;
max-width: 600px;
min-width: 400px;
}
这就是一个自适应宽度的容器，它可以在最小宽度和最大宽度之间自动调整。
2.1. 自适应高度
自适应高度同样使用auto，但是它只适用于浮动元素（float）或者绝对定位元素（position）。因为通常块级元素的高度都是由它的内容来决定的，如果我们把height设置为auto，它会自动调整为内容的高度。
对于绝对定位的元素，height:auto可以被用来根据内容高度来自动设置元素的高度。
.container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: auto;
overflow: auto;
}
这里我们设置了.container的高度是自适应的，并且添加了overflow:auto属性来显示滚动条。
3. auto在margin和padding中的应用
为了让元素的margin和padding自动调整大小，你可以将它们的值设置为auto。这样做的好处是可以让元素的大小和位置自动调整，这非常适用于响应式网站的设计。
3.1. margin自适应
我们通常使用margin: auto来让元素在它的容器中自动居中，同时可以通过将margin-top和margin-bottom设置为auto，让这些边框自动平均分配，以达到一个自适应的效果。
.box {
margin: auto;
margin-top: auto;
height: 200px;
width: 300px;
}
这样设置之后，.box将自动垂直居中在它的容器中，同时上下边框之间也会自动分配。
3.2. padding自适应
padding:auto在CSS中并不是很常用，但如果你想要让元素整个自适应，而不仅仅是高度或者宽度，这个属性就会非常有用。但是，需要注意的是，使用它时需要用到webkit engine。
.container {
padding: auto;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
}
这样做的话，.container元素的所有padding都会自动调整，而内部元素也会居中显示。
4. auto在position属性中的应用
position:auto属性可以让元素相对于它的包含容器进行定位，就像static这个默认的position值一样。
4.1. 自适应定位
我们通常使用position:absolute来将元素放置在页面上的任意位置，但这样做不太灵活。当元素需要自适应时，我们可以使用position:auto，这样元素就会相对于它的包含容器进行定位。
.container {
position: relative;
height: 400px;
width: 600px;
}
.box {
position: auto;
width: 50%;
height: 50%;
top: 25%;
left: 25%;
}
这里我们将.box元素的position设置为auto，使它相对于.container元素进行定位。
4.2. 自适应z-index
为了让元素在z轴上自适应排序，我们可以将它的z-index设置为auto。如果同时有多个元素都有z-index:auto，那么z-index最大的元素将会排在最前面。
总结
auto属性除了可以让元素自适应大小、位置和排列顺序之外，还可以应用在各种CSS属性中，包括width、height、margin和padding。虽然它非常方便实用，但是需要注意的是它不是万能的，有时候可能会带来一些兼容性和布局方面的问题。在实际开发中需要灵活运用，以达到最好的效果。