CSS 高度、宽度和最大宽度
CSS 的 height 和 width 属性用于设置元素的高度和宽度。
CSS 的 max-width 属性用于设置元素的最大宽度。
自己尝试一下 »
CSS 设置高度和宽度
The height 和 width 属性用于设置元素的高度和宽度。
高度和宽度属性不包括内边距、边框或外边距。它设置元素内边距、边框和外边距区域内部的高度/宽度。
CSS 高度和宽度值
The height 和 width 属性可以具有以下值
auto- 这是默认值。浏览器计算高度和宽度length- 以 px、cm 等定义高度/宽度。%- 以包含块的百分比定义高度/宽度initial- 将高度/宽度设置为其默认值inherit- 高度/宽度将从其父级值继承
CSS 高度和宽度示例
注意：请记住，height 和 width 属性不包括内边距、边框或外边距！它们设置元素内边距、边框和外边距区域内部的高度/宽度！
设置最大宽度
The max-width 属性用于设置元素的最大宽度。
The 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 | 设置元素的宽度 |
