CSS height 属性值说明
| 值 | 描述 |
|---|---|
| auto | 当我们使用此值时，浏览器计算图像或者框的原始高度。这是此属性的默认值。 |
| length | 用Px，cm等定义高度 |
| % | 用百分比定义高度。 |
| initial | 使属性使用其默认值。 |
| inherit | 从其父元素继承属性。 |
语法
height: auto | length | initial | inherit;
高度属性示例：
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
div {
height: 60px;
background-color: #1c87c9;
color: #eee;
}
p {
height: 30px;
background-color: #8ebf42;
color: #eee;
}
</style>
</head>
<body>
<h2>Height 属性示例</h2>
<div>将div的高度设置为 "60px".</div>
<p>将这个段落的高度设置为 "30px".</p>
</body>
</html>
带有 HTML <image> 标签的 height 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
body {
background-color: #ccc;
}
.height-normal {
height: auto;
}
.height-big {
height: 100px;
}
</style>
</head>
<body>
<h2>Height 属性示例</h2>
<p>将高度设置为 "auto"</p>
<img class="height-normal" src="/onitroad-logo.png">
<br>
<hr>
<p>将图片的高度设置为 "100px".</p>
<img class="height-big" src="/onitroad-logo.png">
</body>
</html>
具有“长度”值的高度属性示例：
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.container {
height: 50vh;
border: 2px solid #1c87c9;
padding: 5px;
}
</style>
</head>
<body>
<h2>Height 属性示例</h2>
<div class="container">
<p>将高度设置为"50vh".</p>
</div>
</body>
</html>
具有所有值的 height 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.red-container {
height: 30vh;
border: 2px solid #f45e30;
color: #f45e30;
}
.blue-container {
height: 40%;
width: 30%;
border: 2px solid #1c87c9;
color: #1c87c9;
margin-top: 20px;
}
.orange-container {
height: 100px;
border: 2px solid #f9fc35;
color: #f9fc35;
margin-top: 20px;
}
.green-container {
height: auto;
border: 2px solid #8ebf42;
color: #8ebf42;
margin-top: 20px;
}
</style>
</head>
<body>
<h2>Height 属性示例</h2>
<div class="red-container">
Height 30vh
<div class="blue-container">
Height 40%
</div>
</div>
<div class="orange-container">
Height 100px;
</div>
<div class="green-container">
Height (auto)
</div>
</body>
</html>
height 属性用于设置元素的高度。
此属性不包括填充、边框或者边距。
高度属性可以通过“px”、“cm”、“vh”或者百分比来指定。
默认值为“自动”。
如果使用 min-height 和 max-height 属性，它将覆盖 height 属性。
如果将高度设置为 (r)em、px 或者 % 等数值之一，并且如果内容不适合特定高度，则会导致溢出。
CSS 溢出属性指定容器将如何处理溢出。
不接受负值。
| 初始值 | auto |
|---|---|
| 应用于 | 所有元素 |
| 继承 | 无效 |
| 可动画的 | 是的。高度是有动画的。 |
| 版本 | CSS1 |
| DOM 语法 | object.Style.Height =“400px”; |
日期：2020-06-02 22:14:35 来源：oir作者：oir