CSS 尺寸屬性指的就是元素的寬度和高度屬性，雖然說非常簡單，但卻是必須掌握的技能。 CSS 中提供了width、height、max-width、min-width、max-height 和min-height 等幾個屬性來設定元素的寬度和高度，這些元素使用起來非常簡單，下面我們就來簡單介紹一下。
1.height
（1）設定元素的高度：height 屬性
高度：屬性指定了一個元素的高度。
① 適用範圍與物件：預設內容區
適用對象: 所有元素
除了(不可替換的)行內元素non-replaced inline elements, 表列table columns, 列組column groups
適用範圍: 預設情況下，這個屬性決定的是內容區（ content area）的高度。
② 改變適用範圍:
如果將box-sizing 設為border-box , 這個屬性決定的將是邊框區域（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
/*關鍵字值Keywordvalue*/height:auto;/*長度值<length>values*/height:120px;height:10em;/*百分比值<percentage>value*/height:75%;/*全域關鍵字值Globalvalues*/height:inherit;height:initial;height:unset;
2. width
（1）設定元素的寬度: width 屬性
① 適用區域
內容區: 預設情況下，它會設定內容區域的寬度。
不包括: 在內容區外面可以增加內邊距、邊框和外邊距。
修改適用區域: 但是如果box-sizing 設定為border-box，它設定邊框區域的寬度。
② 適用元素
所有元素,除了以下的元素
不適用元素: 除了(不可替換的)內嵌元素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%;/*關鍵字值Keywordvalues*/width:25emborder-box;width:75 %content-box ;width:max-content;width:min-content;width:available;width:fit-content;width:auto;/*全域值Globalvalues*/width:inherit;width:initial;width:unset;
3. max-width 和max-height
max-width 和max-height 屬性分別用來設定元素內容區的最大寬度和最大高度。當定義了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 屬性用來設定元素內容區的最小寬度和最小高度，當定義了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 屬性將會被忽略。