CSS3 盒模型 - height 属性

核心知识点

height 属性的概念

height 属性用于控制元素的高度，它是 CSS 盒模型中的一个重要属性。height 属性可以设置元素内容区域的高度，不包括内边距（padding）、边框（border）和外边距（margin），除非使用了 box-sizing: border-box。

height 属性的值

值 描述
auto 默认值，浏览器自动计算元素的高度
length 使用长度值指定元素的高度，如 px、em、rem、vh 等
percentage 使用百分比指定元素的高度，相对于父元素的高度
max-content 元素的高度为内容的最大高度
min-content 元素的高度为内容的最小高度
fit-content 元素的高度为内容的高度，但不超过可用空间
clamp(min, preferred, max) 元素的高度在最小值和最大值之间，首选值为 preferred

注意事项

  • height 属性只适用于块级元素和替换元素（如 img、input 等）
  • 对于行内元素，height 属性通常不起作用，除非将其转换为块级元素或内联块元素
  • 当使用百分比值时，元素的高度相对于父元素的高度
  • 当使用 max-content、min-content、fit-content 等值时，元素的高度由内容决定
  • 当使用 clamp() 函数时，元素的高度会根据可用空间自动调整

学习目标

  1. 理解 height 属性的作用和不同值的效果
  2. 掌握如何使用 height 属性控制元素的高度
  3. 了解如何使用不同单位和函数精确控制元素高度
  4. 能够根据不同场景选择合适的 height 值

代码示例

基本用法示例

/* 示例 1: 不同 height 值 */
.auto {
  height: auto;
  border: 2px solid #333;
  padding: 10px;
  margin-bottom: 20px;
}

.pixel {
  height: 200px;
  border: 2px solid #333;
  padding: 10px;
  margin-bottom: 20px;
}

.percentage {
  height: 50%;
  border: 2px solid #333;
  padding: 10px;
  margin-bottom: 20px;
}

.em {
  height: 15em;
  border: 2px solid #333;
  padding: 10px;
  margin-bottom: 20px;
}

.rem {
  height: 10rem;
  border: 2px solid #333;
  padding: 10px;
  margin-bottom: 20px;
}

.vh {
  height: 30vh;
  border: 2px solid #333;
  padding: 10px;
  margin-bottom: 20px;
}

.max-content {
  height: max-content;
  border: 2px solid #333;
  padding: 10px;
  margin-bottom: 20px;
}

.min-content {
  height: min-content;
  border: 2px solid #333;
  padding: 10px;
  margin-bottom: 20px;
}

.fit-content {
  height: fit-content;
  border: 2px solid #333;
  padding: 10px;
  margin-bottom: 20px;
}

.clamp {
  height: clamp(100px, 30vh, 300px);
  border: 2px solid #333;
  padding: 10px;
  margin-bottom: 20px;
}

/* 示例 2: 与 box-sizing 结合使用 */
.border-box {
  height: 200px;
  border: 2px solid #333;
  padding: 20px;
  box-sizing: border-box;
  margin-bottom: 20px;
}

.content-box {
  height: 200px;
  border: 2px solid #333;
  padding: 20px;
  box-sizing: content-box;
  margin-bottom: 20px;
}

/* 示例 3: 父元素高度为百分比的情况 */
.parent {
  height: 400px;
  border: 2px solid #333;
  padding: 10px;
  margin-bottom: 20px;
}

.child {
  height: 50%;
  border: 2px solid #666;
  padding: 10px;
  margin-bottom: 10px;
}

HTML 结构

<h3>不同 height 值：</h3>
<div class="auto">
  height: auto - 浏览器自动计算高度<br>
  这是一段文本，用于测试 auto 高度的效果。<br>
  当内容增多时，元素高度会自动增加。
</div>

<div class="pixel">
  height: 200px - 使用像素指定高度
</div>

<div class="parent">
  父元素高度: 400px
  <div class="child">
    子元素高度: 50% (200px)
  </div>
</div>

<div class="em">
  height: 15em - 使用 em 指定高度
</div>

<div class="rem">
  height: 10rem - 使用 rem 指定高度
</div>

<div class="vh">
  height: 30vh - 使用视口高度指定高度
</div>

<div class="max-content">
  height: max-content - 内容的最大高度<br>
  这是一段文本，用于测试 max-content 高度的效果。
</div>

<div class="min-content">
  height: min-content - 内容的最小高度<br>
  这是一段文本，用于测试 min-content 高度的效果。
</div>

<div class="fit-content">
  height: fit-content - 适合内容的高度<br>
  这是一段文本，用于测试 fit-content 高度的效果。
</div>

<div class="clamp">
  height: clamp(100px, 30vh, 300px) -  clamp 函数指定高度
</div>

<h3>与 box-sizing 结合使用：</h3>
<div class="border-box">
  box-sizing: border-box - 高度包括边框和内边距
</div>

<div class="content-box">
  box-sizing: content-box - 高度不包括边框和内边距
</div>

实用案例分析

案例 1: 全屏高度布局

创建一个全屏高度的布局，包含头部、主体和底部：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.header {
  height: 60px;
  background-color: #333;
  color: white;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.main {
  flex: 1;
  background-color: #f5f5f5;
  padding: 20px;
  overflow-y: auto;
}

.footer {
  height: 40px;
  background-color: #333;
  color: white;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

案例 2: 固定高度元素

创建一个固定高度的卡片，包含标题和内容：

.card {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 20px;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.card-content {
  font-size: 14px;
  line-height: 1.5;
  overflow-y: auto;
  height: calc(100% - 30px);
}

案例 3: 响应式高度

创建一个响应式高度的元素，其高度根据视口高度自动调整：

.responsive-height {
  height: clamp(200px, 50vh, 500px);
  border: 2px solid #333;
  padding: 20px;
  margin-bottom: 20px;
  background-color: #f0f8ff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.responsive-height h2 {
  font-size: 24px;
  color: #333;
}

@media (max-width: 768px) {
  .responsive-height {
    height: clamp(150px, 40vh, 400px);
  }
  
  .responsive-height h2 {
    font-size: 20px;
  }
}

ASCII 示意图

height 不同值的效果对比

+-------------+------------------------+------------------------+
| 值          | 效果                   | 适用场景               |
+-------------+------------------------+------------------------+
| auto        | 浏览器自动计算高度     | 大多数块级元素         |
| length      | 固定高度               | 需要精确控制高度的元素 |
| percentage  | 相对于父元素的高度     | 响应式布局             |
| max-content | 内容的最大高度         | 内容驱动的布局         |
| min-content | 内容的最小高度         | 内容驱动的布局         |
| fit-content | 适合内容的高度         | 卡片布局、导航菜单     |
| clamp()     | 自适应高度             | 响应式布局             |
+-------------+------------------------+------------------------+

视口单位的效果

+----------------------------------+
|           视口高度 (100vh)        |
|                                  |
|  +----------------------------+  |
|  |                            |  |
|  |  25vh                      |  |
|  |  +----------------------+  |  |
|  |  |                      |  |  |
|  |  +----------------------+  |  |
|  |                            |  |
|  |  50vh                      |  |
|  |  +----------------------+  |  |
|  |  |                      |  |  |
|  |  |                      |  |  |
|  |  |                      |  |  |
|  |  +----------------------+  |  |
|  |                            |  |
|  |  25vh                      |  |
|  |  +----------------------+  |  |
|  |  |                      |  |  |
|  |  +----------------------+  |  |
|  |                            |  |
|  +----------------------------+  |
|                                  |
+----------------------------------+

clamp() 函数的工作原理

+------------------+------------------+------------------+
|                  |                  |                  |
|  可用空间        |  可用空间        |  可用空间        |
|  < 最小值        |  在最小值和最大值之间 |  > 最大值        |
|                  |                  |                  |
+------------------+------------------+------------------+
|                  |                  |                  |
|  使用最小值      |  使用首选值      |  使用最大值      |
|                  |                  |                  |
+------------------+------------------+------------------+

例如: clamp(100px, 30vh, 300px)
- 当可用空间 < 100px 时，使用 100px
- 当 100px < 可用空间 < 300px 时，使用可用空间的 30%
- 当可用空间 > 300px 时，使用 300px

实践练习

练习 1: 实现全屏高度布局

创建一个全屏高度的布局，包含头部、主体和底部：

  • 头部高度为 60px
  • 底部高度为 40px
  • 主体高度为剩余空间

练习 2: 实现固定高度卡片

创建一个固定高度的卡片，包含标题和内容：

  • 卡片高度为 250px
  • 标题高度为 40px
  • 内容区域高度为剩余空间，超出部分显示滚动条

练习 3: 实现响应式高度元素

创建一个响应式高度的元素，其高度根据视口高度自动调整：

  • 最小高度为 150px
  • 首选高度为视口高度的 40%
  • 最大高度为 400px
  • 在小屏幕上，首选高度调整为视口高度的 30%

总结

height 属性是 CSS3 中控制元素高度的重要属性，通过设置不同的值，可以实现各种高度效果：

  • auto: 浏览器自动计算高度，适合大多数块级元素
  • length: 使用长度值指定高度，适合需要精确控制高度的元素
  • percentage: 使用百分比指定高度，适合响应式布局
  • max-content/min-content/fit-content: 根据内容自动调整高度，适合内容驱动的布局
  • clamp(): 使用最小值、首选值和最大值指定高度，适合自适应布局

在使用 height 属性时，需要注意以下几点：

  • height 属性只适用于块级元素和替换元素
  • 对于行内元素，需要将其转换为块级元素或内联块元素才能使用 height 属性
  • 当使用 box-sizing: border-box 时，height 属性包括边框和内边距
  • 当使用百分比值时，元素的高度相对于父元素的高度
  • 当使用视口单位（如 vh）时，元素的高度相对于视口的高度

合理使用 height 属性，可以创建各种布局效果，从固定高度布局到响应式布局，满足不同的设计需求。

« 上一篇 CSS3 盒模型 - width 属性 下一篇 » CSS3 盒模型 - max-width 属性
↑