CSS 布局 - width 和 max-width

使用 width、max-width 和 margin: auto;

如上一章所述，塊級元素始終占用可用的全部寬度（盡可能向左和向右伸展）。

設置塊級元素的 width 將防止其延伸到其容器的邊緣。然后，您可以將外邊距設置為 auto，以將元素在其容器中水平居中。元素將占用指定的寬度，剩余空間將在兩個外邊距之間平均分配：

這個 <div> 元素的寬度為 500px，外邊距設置為 auto。

注意：當瀏覽器窗口小于元素的寬度時，上面這個 <div> 會發生問題。瀏覽器會將水平滾動條添加到頁面。

在這種情況下，使用 max-width 可以改善瀏覽器對小窗口的處理。為了使網站在小型設備上可用，這一點很重要：

這個 <div> 元素的最大寬度為 500px，外邊距設置為 auto。

提示：請將瀏覽器窗口的大小調整為小于 500 像素，以查看兩個 div 之間的區別！

這是上面兩個 div 的例子：

實例

div.ex1 {
  width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}
div.ex2 {
  max-width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}

親自試一試