CSS 高度、寬度和最大寬度
CSS height 和 width 屬性用於設定元素的**高度**和**寬度**。
CSS max-width 屬性用於設定元素的**最大寬度**。
自己動手試一試 »
CSS 設定高度和寬度
height 和 width 屬性用於設定元素的**高度**和**寬度**。
height 和 width 屬性不包括內邊距 (padding)、邊框 (border) 或外邊距 (margin)。它設定的是元素內邊距、邊框和外邊距**區域**的高度/寬度。
CSS 高度和寬度 值
height 和 width 屬性可以具有以下值
auto- 這是預設值。瀏覽器會計算高度和寬度length- 以畫素 (px)、釐米 (cm) 等為單位定義高度/寬度%- 以包含塊 (containing block) 的百分比定義高度/寬度initial- 將高度/寬度設定為其預設值inherit- 高度/寬度將繼承其父級的值
CSS 高度和寬度 示例
示例
設定 <div> 元素的**高度**和**寬度**
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
示例
設定另一個 <div> 元素的**高度**和**寬度**
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
注意： 請記住，height 和 width 屬性不包括內邊距、邊框或外邊距！它們設定的是元素內邊距、邊框和外邊距**區域**的高度/寬度！
設定最大寬度
max-width 屬性用於設定元素的**最大寬度**。
max-width 可以用長度值（如 px、cm 等）或包含塊的百分比 (%) 來指定，或者設定為 none（這是預設值，表示沒有最大寬度）。
上面那個 <div> 出現的問題是，當瀏覽器視窗寬度小於元素的寬度 (500px) 時，瀏覽器會在頁面上新增一個水平捲軸。
在這種情況下，使用 max-width 代替，將能改善瀏覽器處理小視窗時的表現。
提示： 嘗試將瀏覽器視窗拖動到小於 500px 寬，以檢視兩個 div 之間的區別！
注意： 如果您出於某種原因，在同一元素上同時使用了 width 屬性和 max-width 屬性，並且 width 屬性的值大於 max-width 屬性的值；那麼將使用 max-width 屬性的值（並且 width 屬性將被忽略）。
示例
這個 <div> 元素的**高度**為 100 畫素，**最大寬度**為 500 畫素：
div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}
親手嘗試 - 示例
設定元素的**高度**和**寬度**
此示例演示瞭如何設定不同元素的**高度**和**寬度**。
使用百分比設定圖片的**高度**和**寬度**
此示例演示瞭如何使用百分比值設定圖片的**高度**和**寬度**。
設定元素的最小寬度和最大寬度
此示例演示瞭如何使用畫素值設定元素的**最小寬度**和**最大寬度**。
設定元素的最小高度和最大高度
此示例演示瞭如何使用畫素值設定元素的**最小高度**和**最大高度**。
所有 CSS 尺寸屬性
| 屬性 | 描述 |
|---|---|
| height | 設定元素的高度 |
| max-height | 設定元素的最大高度 |
| max-width | 設定元素的最大寬度 |
| min-height | 設定元素的最小高度 |
| min-width | 設定元素的最小寬度 |
| width | 設定元素的寬度 |
