CSS 維度

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

CSS 維度屬性

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

寬度和高度屬性

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

widthheight 特性可用長度值(pxptem 等)、百分比或 關鍵字 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 屬性通常用於確保元素至少具有最小寬度,即使沒有內容也是如此。但是,如果元素的內容超過設定的最小寬度,則允許元素正常延伸。