CSS 高度、宽度和最大宽度
CSS height
和width
属性用于设置元素的高度和宽度。
CSS max-width
属性用于设置元素的最大宽度。
亲自尝试 »
CSS 设置高度和宽度
这 height
和width
属性用于设置元素的高度和宽度。
高度和宽度属性不包括填充、边框或边距。它设置元素的填充、边框和边距内区域的高度/宽度。
CSS 高度和宽度值
这 height
和width
属性可能具有以下值:
auto
- 这是默认设置。浏览器计算高度和宽度length
- 以 px、cm 等为单位定义高度/宽度。%
- 定义包含块的高度/宽度百分比initial
- 将高度/宽度设置为默认值inherit
- 高度/宽度将从其父值继承
CSS 高度和宽度示例
笔记: 请记住height
和width
属性不包括填充、边框或边距!它们设置元素的填充、边框和边距内区域的高度/宽度!
设置最大宽度
这 max-width
属性用于设置元素的最大宽度。
这 max-width
可以在长度值,如 px、cm 等,或者包含块的百分比(%),或者设置为 none(这是默认值。表示没有最大宽度)。
问题在于 <div>
当浏览器窗口小于元素的宽度(500px)时,就会发生上述情况。然后浏览器会在页面上添加一个水平滚动条。
使用 max-width
相反,在这种情况下,将改善浏览器对小窗口的处理。
提示: 将浏览器窗口拖到小于 500px 的宽度,看看两个 div 之间的区别!
笔记: 如果你出于某种原因同时使用width
财产和max-width
同一元素上的属性,以及width
财产大于max-width
財產;max-width
财产将被使用(和width
属性将被忽略)。
亲自尝试 - 示例
设置元素的高度和宽度
本例演示如何设置不同元素的高度和宽度。
使用百分比设置图像的高度和宽度
此示例演示如何使用百分比值设置图像的高度和宽度。
设置元素的最小宽度和最大宽度
此示例演示如何使用像素值设置元素的最小宽度和最大宽度。
设置元素的最小高度和最大高度
此示例演示如何使用像素值设置元素的最小高度和最大高度。
所有 CSS 尺寸属性
财产 | 描述 |
---|---|
高度 | 设置元素的高度 |
最大高度 | 设置元素的最大高度 |
最大宽度 | 设置元素的最大宽度 |
最小高度 | 设置元素的最小高度 |
最小宽度 | 设置元素的最小宽度 |
宽度 | 设置元素的宽度 |