CSS 设置高度和宽度
height``width
：用于设置 元素的高度和宽度。
height 和 width 属性不包括填充、边框或边距。 它设置填充、边框和边距内区域的高度/宽度元素。
CSS height 和 width 值
和属性 可能具有以下值：
height``width
auto
- 这是默认设置。浏览器 计算高度和宽度
length
- 定义高度/宽度，单位为 px、cm、 等。
%
- 定义高度/宽度，以百分比表示 包含块
initial
- 将高度/宽度设置为其 默认值
inherit
- 高度/宽度将为 继承自其父值
CSS height and width 示例
1
2
3
4
5
|
设置 <div> 元素的高度和宽度：
div { height: 200px;
width: 50%;
background-color: powderblue;}
|
尝试一下 »
1
2
3
4
5
|
设置另一个 <div> 元素的高度和宽度：
div { height: 100px;
width: 500px;
background-color: powderblue;}
|
尝试一下 »
注意：
请记住，
height
和
width
属性不包括填充、边框、 或边距！它们设置填充、边框内区域的高度/宽度、 和元素的边距！
设置 max-width
max-width
：该属性用于设置元素的最大宽度。
max-width
：可以用
长度值
指定，如 px、cm 等，也可以指定 包含块，或设置为 none（表示没有最大宽度）。
当浏览器窗口小于元素 最大宽度（500px），浏览器会向页面添加一个水平滚动条。<div>
在这种情况下，改用
max-width
将改善浏览器对小窗口的处理。
提示：
将浏览器窗口拖动到小于500px的宽度。
注意：
如果由于某种原因在同一元素上同时使用
width
属性和
max-width
属性，并且
width
属性的值大于
max-width
属性;将使用
max-width
属性（并且
width
该属性将被忽略）。
1
2
3
4
5
|
此 <div> 元素的高度为 100 像素，并且 最大宽度为 500 像素：
div { max-width: 500px;
height: 100px;
background-color: powderblue;}
|
尝试一下 »
亲自试一试 - 示例
设置元素的高度和宽度 此示例演示如何的高度和宽度。
[设置不同元素]
尝试一下 »
使用百分比设置图像的高度和宽度 此示例演示如何使用百分比
值[设置图像的高度和宽度]。
尝试一下 »
设置元素的最小宽度和最大宽度 此示例演示如何使用像素值[设置元素的最小宽度和最大宽度]。
尝试一下 »
设置元素的最小高度和最大高度 此示例演示如何使用像素值[设置元素的最小高度和最大高度]
尝试一下 »
所有 CSS 维度属性
