css中寫auto和不寫的auto，區別在哪裡？

---

• auto 是一個 keyword value，本質上就是屬性的一個枚舉值，和 red、disc、solid 沒什麼區別
• 是否可以取 auto 值，以及 auto 值的含義每個 CSS 屬性都不一樣
• 有些屬性初始值是 auto，寫不寫是否一樣需要看具體屬性

---

auto就是automatical咯,某個屬性設置了auto，意思就是這個屬性可以自動調整，以使元素滿足CSS世界的各種規則。

舉個簡單的例子，height: auto; CSS世界裡普通流元素的高度要依賴子元素計算，而height設為auto就是height可以自動調整，以滿足『普通流中父元素要依賴子元素計算』這一規則。

題主列舉的例子，right: auto; 意思就是right可以自動調整，以滿足absolute布局下的規則。

列舉一些auto不能省的場景

1、水平居中

width: 100px;

margin-left: auto;

margin-right: auto;

2、垂直水平居中

position: absolute;

width: 100px; height: 100px;

left: 0; right: 0; top: 0; bottom: 0;

margin: auto;

3、形成BFC

overflow: auto;

1、2場景中，子元素寬高比父元素小的話，會使瀏覽器內核產生『計算疑惑』，而margin的auto意為margin可以自動調整，而標準的規定是互斥方向margin auto情況下margin分半，而auto是觸發『計算疑惑』的屬性，不能省。

3場景，標準里規定overflow非visible都能形成BFC，不能hidden的地方可以嘗試用scroll、auto來BFC咯。

---

在某些情況下，需要做css屬性覆蓋的時候，我會用到auto。比如有個公用樣式
.text{
position:absolute;
left:100px;
/*以及很多其他的公用屬性，不列舉*/
}
而你在某些地方，用到了這個樣式的大部分屬性，唯一不同的地方是，你要用right來定位，這個時候，你需要覆蓋掉.text的一些屬性
.text{
right:100px;
}
你會發現，這樣寫的話，是有問題的，因為受到之前的left的影響，這個時候，就要把left設為auto
.text{
right:100px;
left:auto;
}

可能有些偏題，看看就好。

---

推薦閱讀：