CSS 尺寸控制：width 与 height 与盒模型计算指南

Begindev 编辑部 March 25, 2026

CSS 中的 width (宽度) 和 height (高度) 属性是控制网页元素大小的基础。它们允许你显式定义内容框的尺寸，从而覆盖浏览器的默认渲染行为。

了解这些属性如何与盒模型相互作用，可以创建精确且可预测的布局。

本章将深入探讨使用 width 和 height 的细节，探索不同的数值类型、它们对盒模型的影响，以及响应式设计的最佳实践。

1. 理解 `width` 和 `height` 属性

CSS 的 width 和 height 属性用于指定元素内容区域 (Content Area) 的宽度和高度。

关键点：内容区域位于内边距 (padding)、边框 (border) 和外边距 (margin) 的内部。这一点非常重要，正如我们在上一章中所学，元素的总可见尺寸会受到这些额外层的影响。

2. `width` 和 `height` 的取值

这两个属性接受多种类型的值，包括：

像素 (px)：指定固定的像素数。提供精确控制，但对于响应式设计来说灵活性较差。
百分比 (%)：指定相对于其包含块 (containing block)（通常是父元素）宽度或高度的百分比。这对于创建适应不同屏幕尺寸的布局非常有用。
Ems (em)：相对于元素自身字体大小的宽度或高度。有助于根据文本大小保持比例。
Rems (rem)：相对于根元素（通常是 <html>）字体大小的宽度或高度。与 em 类似，但相对于根，在整个页面中尺寸更一致。
视口单位 (vw, vh, vmin, vmax)：相对于视口（浏览器窗口可视区域）的宽度 (vw) 或高度 (vh) 的百分比。
auto (默认)：浏览器自动计算宽度或高度。

对于块级元素的 width，默认会扩展以填满其容器的宽度。
对于 height，默认会根据内容的高度自动撑开。

其他关键字：

initial：设置为默认值 (通常是 auto)。
inherit：从父元素继承值。
max-content / min-content / fit-content：基于内容的内在尺寸进行调整（高级用法）。

2.1 使用像素值 (px)

使用像素值可以最直接地控制元素的大小。

.box {
  width: 200px;
  height: 100px;
  background-color: lightblue;
}

这段代码将 .box 元素的内容区域设置为精确的 200 像素宽和 100 像素高。如果你添加内边距或边框，元素的总大小将会增加（稍后会详细说明）。

2.2 使用百分比值 (%)

百分比值是相对于包含块的。

<div class="container">
  <div class="box">这是一个使用百分比宽高的盒子。</div>
</div>

.container {
  width: 500px; /* 定义容器宽度 */
  height: 300px; /* 定义容器高度 */
  background-color: lightgray;
}
.box {
  width: 50%;  /* 容器宽度 (500px) 的 50% = 250px */
  height: 50%; /* 容器高度 (300px) 的 50% = 150px */
  background-color: lightblue;
}

在这个例子中，.box 将是 250px 宽和 150px 高。如果容器大小改变，.box 也会随之调整。注意：只有当父元素具有显式定义的高度时，子元素的百分比 height 才会生效。

2.3 使用 `em` 和 `rem` 值

em 单位相对于元素自身的字体大小，而 rem 单位相对于根元素的字体大小。

<div class="container">
  <div class="box">This is a box with em width and height.</div>
</div>

html { 
    font-size: 16px; /* 根字体大小 */
} 
.container { 
    font-size: 20px; /* 容器字体大小 */
 } 

.box {
  width: 10em;  /* 10 倍于 .box 的字体大小 */
  height: 5em;  /* 5 倍于 .box 的字体大小 */
  font-size: 14px; /* 设置 .box 的字体大小 */
  background-color: lightblue;
}

使用 em .box 的宽度为 10 * 14px = 140px，高度为 5 * 14px = 70px。

如果我们使用 rem 并且保持其余的 CSS 不变，我们将得到：

html {
    font-size: 16px; /* 设置根字体大小 */
}
.container {
  font-size: 20px; /* 设置容器的字体大小 */
}
.box {
  width: 10rem;  /* 根元素字体大小的 10 倍 */
  height: 5rem; /* 根元素字体大小的 5 倍 */
  font-size: 14px; /* 设置 .box 元素的字体大小 */
  background-color: lightblue;
}

在这里，.box 的宽度将是 10 * 16px = 160px，高度将是 5 * 16px = 80px。

2.4 使用视口单位 (vw, vh)

视口单位相对于浏览器窗口的大小。

.box {
  width: 50vw;  /* 视口宽度的 50% */
  height: 25vh; /* 视口高度的 25% */
}

无论父元素大小如何，.box 都将占据浏览器窗口宽度的一半和高度的四分之一。

2.5 使用 `auto`

auto 允许浏览器决定尺寸。

Width: 块级元素默认填满父容器。
Height: 默认根据内容自动调整（即“被内容撑开”）。

.box {
  width: auto;  /* 填满父元素的宽度 */
  height: auto; /* 根据内容调整高度 */
  background-color: lightblue;
}

如果 .box 元素包含文本，其高度会自动调整以适应文本。如果其父元素有定义的宽度，.box 将会扩展以填满该宽度。

3. 对盒模型的影响（重要！）

必须牢记 width 和 height 与 CSS 盒模型的交互方式。width 和 height 属性仅设置内容区域的大小。内边距、边框和外边距是添加在这个内容区域外部的。

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  background-color: lightblue;
}

在这种情况下：

内容区域是 200px 宽，100px 高。
内边距在所有边增加 20px。
边框在所有边增加 5px。

总宽度计算：200px (内容) + 20px (左内边距) + 20px (右内边距) + 5px (左边框) + 5px (右边框) = 250px。

总高度计算：100px (内容) + 20px (上内边距) + 20px (下内边距) + 5px (上边框) + 5px (下边框) = 150px。

这种行为有时会违反直觉，尤其是在尝试创建特定尺寸的布局时。box-sizing 属性（后面章节会详细探讨）将提供一种改变这种行为的方法。

4. 内容溢出 (Overflow)

如果元素的内容超过了其指定的 width 或 height，就会发生溢出。

.box {
  width: 100px;
  height: 50px;
  overflow: visible; /* 默认值 */
}

overflow 属性提供了几种处理溢出内容的选项：

visible (默认)：溢出的内容可见，会呈现在盒子外部。
hidden：隐藏溢出的内容。
scroll：添加滚动条，允许用户滚动查看内容。
auto：类似于 scroll，但仅在内容实际溢出时才添加滚动条。

5. 常见错误与最佳实践

忘记盒模型：在计算元素总尺寸时，总是要加上内边距和边框。使用开发者工具来检查元素的盒模型。
父元素无高度时使用百分比高度：如果父元素没有显式定义高度（且未定位），子元素的百分比高度将解析为 0 或无效。
过度依赖固定像素值：像素值虽然精确，但缺乏灵活性。考虑使用百分比、em/rem 或视口单位来实现响应式设计。
忽略溢出：总是要考虑如果内容超出了指定尺寸该怎么办。使用 overflow 属性来控制。

1. 理解 width 和 height 属性

2. width 和 height 的取值