手册
目录
收藏454
分享
阅读3929
更新时间2025-07-16
前言：
CSS 中的 height 和 width 属性用于设置元素的高度和宽度。
height 和 width 属性用于设置元素的高度和宽度。
高度和宽度属性不包括内边距（padding）、边框（border）或外边距（margin）。它设置的是位于元素内边距、边框和外边距内部区域的高度和宽度。
height 和 width 属性可以有以下取值：
auto - 默认值。浏览器自动计算高度和宽度length - 以 px、cm 等单位定义高度或宽度% - 以包含块的百分比定义高度或宽度initial - 将高度或宽度设置为其默认值inherit - 高度或宽度继承自父元素的值此元素的高度为 200 像素，宽度为 50% ### 示例
设置一个 <div> 元素的高度和宽度：
div {
height: 200px;
width: 50%;
background-color: powderblue;
}运行实例 » 点击 "运行实例" 按钮查看在线实例
此元素的高度为 100 像素，宽度为 500 像素。### 示例
设置另一个 <div> 元素的高度和宽度：
div {
height: 100px;
width: 500px;
background-color: powderblue;
}运行实例 » 点击 "运行实例" 按钮查看在线实例
注意： 请记住，height 和 width 属性不包括内边距、边框或外边距！它们设置的是位于元素内边距、边框和外边距内部区域的高度和宽度。
max-width 属性用于设置元素的最大宽度。
max-width 可以使用 长度值 来指定，例如 px、cm 等，也可以使用包含块的百分比 (%)，或者设置为 none（默认值，表示没有最大宽度限制）。
上面的 <div> 出现的问题是当浏览器窗口小于元素的宽度（500px）时，浏览器会在页面上添加一个水平滚动条。
在这种情况下，使用 max-width 可以改善浏览器对小窗口的处理。
提示： 拖动浏览器窗口使其宽度小于 500px，以查看两个 div 的区别！
此元素的高度为 100 像素，最大宽度为 500 像素。注意： 如果由于某些原因在同一个元素上同时使用了 width 属性和 max-width 属性，并且 width 属性的值大于 max-width 属性的值，则会使用 max-width 属性（而 width 属性将被忽略）。
这个 <div> 元素的高度为 100 像素，最大宽度为 500 像素：
div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}运行实例 » 点击 "运行实例" 按钮查看在线实例
设置元素的高度和宽度
此示例演示如何设置不同元素的高度和宽度。
使用百分比设置图像的高度和宽度
此示例演示如何使用百分比值设置图像的高度和宽度。
设置元素的 min-width 和 max-width
此示例演示如何使用像素值设置元素的最小宽度和最大宽度。
设置元素的 min-height 和 max-height
此示例演示如何使用像素值设置元素的最小高度和最大高度。
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.3万人学习
共49课时
77.7万人学习
共29课时
62.2万人学习
共25课时
39.6万人学习
共43课时
71.5万人学习
共25课时
62.1万人学习
共22课时
23.2万人学习
共28课时
34.3万人学习
共89课时
126.3万人学习
