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 | 设置元素的宽度 |
