W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

CSS 高度/宽度(Height/Width)尺寸



CSS尺寸属性

CSS尺寸属性允许你控制元素的高度和宽度。

此元素的宽度为100%。


设置高度和宽度

heightwidth 属性用于设置元素的高度和宽度。

heightwidth 可以设置为自动(这是默认。意味着由浏览器来计算高度和宽度), 或指定 长度值,如 px,cm,等等,或者百分比 (%)。

This <div> element has a height of 100 pixels and a width of 500 pixels.

注意: heightwidth 属性不包括填充、边框或边距;它们设置元素的填充、边框和边距内部区域的高度/宽度!

下面的例子显示了一个高度为100px,宽度为500px的 <div> 元素:

Example

div {
    width: 500px;
    height: 100px;
    border: 3px solid #73AD21;
}

尝试一下 »


设置最大宽度

max-width 属性用于设置元素的最大宽度。

max-width 可以指定长度值,如px,cm等,或百分比(%),或设置为没有(这是默认的。意味着没有最大宽度)。

当上面 <div> 发生浏览器窗口小于该元素的宽度(500px)问题时,浏览器将添加水平滚动条到页面。

使用 max-width 代替,在这种情况下,将提高浏览器的处理小窗口。

提示: 拖动浏览器窗口小于500px宽时,看一下之间的区别!

This <div> element has a height of 100 pixels and a max-width of 500 pixels.

注意: max-width 属性的值覆盖 width 属性的值。

下面的例子显示了一个高度为100px,最大宽度为500px的 <div> 元素:

Example

div {
    max-width: 500px;
    height: 100px;
    border: 3px solid #73AD21;
}

尝试一下 »


Examples

尝试一下 - 更多实例

设置元素的高度和宽度
此例子演示如何设置不同元素的高度和宽度。

使用百分比设置图像的高度和宽度
此例子演示如何使用百分之一值设置图像的高度和宽度。

设置元素的最小宽度和最大宽度
此例子演示如何使用像素值设置元素的最小宽度和最大宽度。

设置元素的最小高度和最大高度
此例子演示如何使用像素值设置元素的最小高度和最大高度。


所有CSS尺寸属性

属性 描述
height 设置元素的高度
max-height 设置元素的最大高度
max-width 设置元素的最大宽度
min-height 设置元素的最小高度
min-width 设置元素的最小宽度
width 设置元素的宽度