css的水平格式化

塊級元素水平格式化的7大屬性：

• margin-left
• border-left
• padding-left
• width
• padding-right
• border-right
• margin-right

在這些元素中只有3個屬性能夠設置爲auto,分別爲width,margin-left和margin-right,其他屬性必須設置爲特定的值，或者默認寬度爲0。

width必須設置爲auto或者某種類型的非負值。若是在水平格式化中確實使用了auto，會獲得不一樣的效果。

使用auto

若是設置width、margin-left或margin-right中的某個值爲auto，而餘下的兩個屬性指定爲特定的值，那麼設置爲auto的屬性會肯定所需的長度。 假設7個屬性的和必須等於400px，沒有設置內邊距或邊框，並且margin-right和width設置爲100px，margin-left設置爲auto。那麼margin-left的寬度將是200px。

<div class="outer">
  <div class="inner"></div>
</div>
複製代碼

.outer {
  width: 400px;
  height: 100px;
  border: 1px solid red;
}

.inner {
  width: 100px;
  height: 100px;
  margin-left: auto; /*margin-left爲200px*/
  margin-right: 100px;
  border: 1px solid green;
}
複製代碼

從某種程度上講，能夠用auto彌補實際值與所需總和的差距。不過，若是這3個屬性都設置爲100px，即沒有任何一個屬性設置爲auto會怎麼樣呢？

若是全部這個3個屬性都設置爲非auto的某個值，按CSS的術語來說，這些格式化屬性過度受限，此時，總會把margin-right強制爲auto。 用戶代理把margin-right重置爲auto，margin-right會根據有一個auto值時的規矩來設置，即由這個auto值填補所需的距離，使元素的總寬度等於其包含塊的width。

.outer {
  width: 400px;
  height: 100px;
  border: 1px solid red;
}

.inner {
  width: 100px;
  height: 100px;
  margin-left: 100px; 
  margin-right: 100px;/*margin-right爲200px*/
  border: 1px solid green;
}
複製代碼

若是兩個外邊距都顯示地設置，而width爲auto，width就會是所需的值，從而達到須要的父元素寬度。

.outer {
  width: 400px;
  height: 100px;
  border: 1px solid red;
}

.inner {
  width: auto;/*width爲200px*/
  height: 100px;
  margin-left: 100px; 
  margin-right: 100px;
  border: 1px solid green;
}
複製代碼

多個auto

若是將width,margin-left和margin-right中的兩個設置爲auto會出現什麼狀況呢。

假設設置margin-left和margin-right爲auto：

.outer {
  width: 400px;
  height: 100px;
  border: 1px solid red;
}

.inner {
  width: 100px;
  height: 100px;
  margin-left: auto; 
  margin-right: auto;
  border: 1px solid green;
}
複製代碼

margin-left和margin-right會等於(400-100)/2,即150px，這種方法能夠達到居中塊級元素的效果（text-align：center只能應用於塊級元素的內聯內容）

假設設置margin-left和width爲auto：

.outer {
  width: 400px;
  height: 100px;
  border: 1px solid red;
}

.inner {
  width: auto;
  height: 100px;
  margin-left: auto;
  margin-right: 100px;
  border: 1px solid green;
}
複製代碼

margin-left會重置爲0，width會填充剩餘的寬度。

假設三個值都auto，那麼外邊距爲0，width儘可能寬。

.outer {
  width: 400px;
  height: 100px;
  border: 1px solid red;
}

.inner {
  width: auto;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid green;
}
複製代碼

負外邊距

假設width,margin-right爲auto，margin-left爲-200px

.outer {
  width: 400px;
  height: 100px;
  border: 1px solid red;
  margin: 0 auto;
}

.inner {
  width: auto;
  height: 100px;
  margin-left: -200px;
  margin-right: auto;
  border: 1px solid green;
}
複製代碼

width爲600px,這裏width大於400px，是由於7個元素總和必須爲400px，因此出現了width大於400px的現象。

**另外邊框的border的寬度不能爲百分數，只能是長度

替換元素

替換元素的width設置爲auto時，和非替換元素有區別。 替換元素的width爲替換元素的默認寬度。

博客地址 gitbook小冊