CSS 尺寸/宽高属性（width/height）

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

/* 关键字值 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 属性

① 适用区域

内容区: 默认情况下，它设置内容区域的宽度。

不包括: 在内容区 外面可以增加内边距、边框和外边距。

修改适用区域: 但是如果 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%;

/* 关键字值 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 属性分别用来设置元素内容区的最大宽度和最大高度。当定义了 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 属性将会被忽略。