CSS 尺寸屬性指的就是元素的寬度和高度屬性，雖然說非常簡單，但卻是必須掌握的技能。CSS 中提供了 width、height、max-width、min-width、max-height 和 min-height 等幾個屬性來設置元素的寬度和高度，這些元素使用起來非常簡單，下面我們就來簡單介紹一下。

1. height

（1）設置元素的高度：height 屬性

高度：屬性指定了一個元素的高度。

① 適用范圍和對象：默認內容區(qū)

適用對象: 所有元素

除了 (不可替換的)行內元素 non-replaced inline elements, 表列 table columns, 列組 column groups

適用范圍: 默認情況下，這個屬性 決定的是內容區(qū)（ content area）的高度。

② 改變適用范圍:

如果將 box-sizing 設置為 border-box , 這個屬性決定的將是 邊框區(qū)域（border area）的高度。

③ 不適用 對象

行內 非替換元素: 會忽略這個屬性。

行內元素:無法設置高度。

④ 屬性值覆蓋

min-height 和 max-height 屬性會覆蓋 height。

（2）高度的語法

height: auto|length|%|inherit;

含 實驗中的屬性值: [ <length> | <percentage> ] && [ border-box | content-box ]? | available | min-content | max-content | fit-content | auto

/* 關鍵字值 Keyword value */
height: auto;

/* 長度值 <length> values */
height: 120px;
height: 10em;

/* 百分比值 <percentage> value */
height: 75%;

/* 全局 關鍵字值 Global values */
height: inherit;
height: initial;
height: unset;

2. width

（1）設置元素的寬度: width 屬性

① 適用區(qū)域

內容區(qū): 默認情況下，它設置內容區(qū)域的寬度。

不包括: 在內容區(qū) 外面可以增加內邊距、邊框和外邊距。

修改適用區(qū)域: 但是如果 box-sizing 設置為 border-box，它設置邊框區(qū)域的寬度。

② 適用元素

所有元素,除了以下的元素

不適用元素: 除了 (不可替換的)內聯(lián)元素 non-replaced inline elements、表行 table rows和 行組 row groups

行內 非替換元素，會忽略這個屬性。

③ 覆蓋

min-width 和 max-width 屬性 可能會覆蓋 width.

（2）寬度的語法

width: auto | length| %| inherit;

含實驗中的屬性值: [ <length> | <percentage> ] && [ border-box | content-box ]? | available | min-content | max-content | fit-content | auto;

/* 長度值 <length> values */
width: 300px;
width: 25em;

/* 百分比值 <percentage> value */
width: 75%;

/* 關鍵字值 Keyword values */
width: 25em border-box;
width: 75% content-box;
width: max-content;
width: min-content;
width: available;
width: fit-content;
width: auto;

/* 全局值 Global values */
width: inherit;
width: initial;
width: unset;

3. max-width 和 max-height

max-width 和 max-height 屬性分別用來設置元素內容區(qū)的最大寬度和最大高度。當定義了 max-width 和 max-height 屬性時，不論 width 或 height 屬性的實際值是多少，width 和 height 屬性的實際值都會小于等于 max-width 和 max-height 屬性的值。max-width 和 max-height 屬性的可選值如下：

以 max-width 屬性為例：（max-height 屬性的特性與之相似）

（1）當 max-width 屬性的值小于 width 屬性時，width 屬性的值會被重新定義為與 max-width 屬性相同的值；

（2）當 max-width 屬性的值大于 width 時，max-width 屬性將會被忽略；

（3）當 max-width 屬性的值小于 min-width 時，max-width 屬性將會被忽略。

4. min-width 和 min-height

min-width 和 min-height 屬性用來設置元素內容區(qū)的最小寬度和最小高度，當定義了 min-width 和 min-height 屬性時，不論 width 或 height 屬性的實際值是多少，width 和 height 屬性的實際值都會大于等于 min-width 和 min-height 屬性的值。min-width 和 min-height 屬性的可選值如下：

以 min-width 屬性為例：（min-height 屬性的特性與之相似）

（1）當 min-width 屬性的值小于 width 時，min-width 屬性將會被忽略；

（2）當 min-width 屬性的值大于 width 時，min-width 屬性的值將被重新定義為與 min-width 屬性相同的值；

（3）當 min-width 屬性的值大于 max-width 時，max-width 屬性將會被忽略。