CSS 高度/宽度(Height/Width)尺寸
CSS尺寸属性
CSS尺寸属性允许你控制元素的高度和宽度。
此元素的宽度为100%。
设置高度和宽度
height
和 width
属性用于设置元素的高度和宽度。
height
和 width
可以设置为自动(这是默认。意味着由浏览器来计算高度和宽度), 或指定 长度值,如 px,cm,等等,或者百分比 (%)。
This <div> element has a height of 100 pixels and a width of 500 pixels.
注意: height
和 width
属性不包括填充、边框或边距;它们设置元素的填充、边框和边距内部区域的高度/宽度!
下面的例子显示了一个高度为100px,宽度为500px的 <div>
元素:
设置最大宽度
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>
元素:

尝试一下 - 更多实例
设置元素的高度和宽度
此例子演示如何设置不同元素的高度和宽度。
使用百分比设置图像的高度和宽度
此例子演示如何使用百分之一值设置图像的高度和宽度。
设置元素的最小宽度和最大宽度
此例子演示如何使用像素值设置元素的最小宽度和最大宽度。
设置元素的最小高度和最大高度
此例子演示如何使用像素值设置元素的最小高度和最大高度。
所有CSS尺寸属性
属性 | 描述 |
---|---|
height | 设置元素的高度 |
max-height | 设置元素的最大高度 |
max-width | 设置元素的最大宽度 |
min-height | 设置元素的最小高度 |
min-width | 设置元素的最小宽度 |
width | 设置元素的宽度 |