CSS 維度

CSS 維度屬性，用於控制元素的高度和寬度。

CSS 維度屬性

CSS 提供了幾個屬性，如 width ， height ， max-width 和 max-height 等，可以讓你控制箱的尺寸。以下部分將介紹如何使用這些屬性建立更好的網頁佈局。

寬度和高度屬性

width 和 height 屬性定義一個元素的內容區域的寬度和高度。此寬度和高度不包括填充、邊框或邊距。請參閱 CSS 框模型 以瞭解如何計算有效寬度和高度。

width 和 height 特性可用長度值（px ， pt ， em 等）、百分比或 關鍵字 auto。它們不允許負長度值。

div {
    width: 300px;
    height: 200px;
}

此樣式規則為 <div> 元素指定 300 畫素的固定寬度和 200 畫素的高度。

注意： 特殊 auto 值允許瀏覽器自動計算指定元素的寬度。百分比（%） 值是跟該元素的包含塊的寬度相對而言。

最大高度屬性 max-height

max-height 屬性允許你指定框的最大內容高度。此最大高度不包括填充，邊框或邊距。

已應用 max-height 元素永遠不會高於指定的值，即使該 height 屬性設定為更大的值。例如，如果 height 設定為 200px 並且 max-height 設定為 100px，則元素的實際高度為 100px。

div {
    height: 200px;
    max-height: 100px;
}

該 max-height 屬性通常與 min-height 屬性一併使用，以產生有關元素的高度範圍。

注意： 此規則有一個例外 - 如果 min-height 指定的屬性值大於 property 的值，則 max-height 在這種情況下，該 min-height 值實際上是應用的值。

最小高度屬性 min-height

min-height 屬性允許你指定塊的最小內容高度。此最小高度不包括填充，邊框或邊距。

應用的元素 min-height 永遠不會小於指定的最小高度。例如，如果 height 設定為 200px，並且 min-height 設定為 300px，則元素的實際高度為 300px。

該 min-height 屬性通常與 max-height 屬性一併使用，以產生有關元素的高度範圍。

注意： 該 min-height 屬性通常用於確保元素至少具有最小高度，即使沒有內容也是如此。但是，如果內容超過設定的最小高度，則允許元素正常延伸。

最大寬度屬性 max-width

max-width 屬性允許你指定塊的最大內容寬度。此最大寬度不包括填充，邊框或邊距。

max-width 即使將 width 屬性設定為更大的值，應用 a 的元素也不會寬於指定的值。例如，如果 width 設定為 300px 且 max-width 設定為 200px，則元素的實際寬度將為 200px。

div {
    width: 300px;
    max-width: 200px;
}

該 max-width 屬性通常與 min-width 屬性一起使用，以產生相關元素的寬度範圍。

注意： 此規則有例外; 如果 min-width 使用大於 property 的值指定 max-width 屬性，則在這種情況下，該 min-width 值實際上將是應用的值。

最小寬度屬性 min-width

min-width 屬性允許你指定塊的最小內容寬度。此最小寬度不包括填充，邊框或邊距。

應用的元素 min-width 永遠不會比指定的最小寬度窄。例如，如果將 width 其設定為 300px 且 min-width 設定為 400px，則元素的實際寬度為 400px。

div {
    width: 300px;
    min-width: 400px;
}

該 min-width 屬性通常與 max-width 屬性一起使用，以產生相關元素的寬度範圍。

注意： 該 min-width 屬性通常用於確保元素至少具有最小寬度，即使沒有內容也是如此。但是，如果元素的內容超過設定的最小寬度，則允許元素正常延伸。