最新的Web開發教程
 

CSS佈局 - 寬度和最大寬度


使用寬度,最大寬度和margin: auto;

正如前面章節所提到的; 一個塊級元素總是佔用可用的全寬(伸出到左邊和右邊,只要它可以)。

設定width的塊級元素的會阻止它伸出到其容器的邊緣。 然後,您可以設置頁邊距為自動,水平居中其容器內​​的元素。 該元件將佔據指定的寬度,並且剩餘的空間將同樣在兩個邊緣之間劃分:

這個<div>元素有一個500px的寬度和margin設置為auto

注意:有問題的<div>以上時,瀏覽器窗口比元素的寬度發生。 瀏覽器然後添加一個水平滾動條到頁面上。

使用max-width代替,在這種情況下,將提高的小窗口瀏覽器的處理。 使網站在小型設備上可用時,這是非常重要的:

這個<div>元素有一個500px的最大寬度,和margin設置為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;
}
試一試»