CSS height 属性
CSS height 属性
概述
CSS height 属性用于设置元素的高度。它只能应用于定义了 display 属性的块级元素和表格单元格元素。height 属性的值可以用像素、百分比或其他长度单位表示。
语法
height 属性的基本语法如下:
height: value;
其中 value 可以是一个长度值或百分比。例如:
height: 200px;
height: 50%;
值
长度值
长度值是一个固定的像素数,例如:
height: 200px;
这表明元素的高度是 200 像素。
百分比
百分比值基于元素包含块的高度。例如:
height: 50%;
代表高度等于元素的包含块高度的一半。
auto
如果 height 属性设置为 auto,则元素的高度由内容的高度决定。
inherit
如果 height 属性设置为 inherit,则元素继承其父元素的高度。
注意事项
- 某些元素,如图片和表格单元格元素,既可以设置 width 也可以设置 height 属性。
- 如果同时设置了 height 属性和 line-height 属性,元素的高度是两个值中较大的那个。
- 如果将 height 属性设置为 0 或负数,则值会被解释为 auto。
- 高度可以设置为小数,但会被替换为最接近的整数值。
示例
以下示例演示了如何使用 height 属性:
HTML 代码:
<div class="box">
<p>这是一段文本。</p>
</div>
CSS 代码:
.box {
height: 200px;
border: 1px solid #ccc;
padding: 10px;
}
效果如下:
结论
CSS height 属性定义了元素的高度。它的值可以是一个长度值、百分比、auto 或 inherit。它只能应用于块级元素和表格单元格元素。在使用该属性时需要注意一些细节,例如同时设置 height 和 line-height 属性,以及不支持负值等。