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 属性，以及不支持负值等。