CSS 高度和宽度

设置高度和宽度

height和width特性被用来设置一个元素的高度和宽度。的height和width可被设置为自动（这是缺省值。也就是说，浏览器计算的高度和宽度），或在指定长度值的包含块的，像像素，厘米等，或者以百分比表示（％）。

此元素的高度为200像素，宽度为50％

div {
 height: 200px;
 width: 50%;
 background-color: powderblue;
}

尝试一下

div {
 height: 100px;
 width: 500px;
 background-color: powderblue;
}

尝试一下

注：height与width属性不包括内边距，边框或外边距; 他们设置元素内边距，边框和外边距内区域的高度/宽度！

设置最大宽度

max-width属性用于设置元素的最大宽度。在max-width可在指定的长度值的包含块的，像像素，厘米等，或者以百分比（％），或设置为无（这是缺省值。意味着没有最大宽度）。当浏览器窗口小于元素的宽度(500px)时，就会出现上面的问题。然后浏览器向页面添加一个水平滚动条。使用max-width替代，在这种情况下，将改善小窗口浏览器的处理。提示：将浏览器窗口拖动到小于500px宽，以查看两个div之间的差异！

此元素的高度为100像素，最大宽度为500像素。

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

设置高度和宽度

设置最大宽度

所有CSS维度属性

相关页面