CSS 教程 / CSS 宽度、高度、min/max 限制与 box-sizing

CSS 的 width 和 height 设置首选尺寸，而 min-width、max-width、min-height 和 max-height 则施加限制。使用 box-sizing: border-box 时，声明的尺寸包括内边距和边框，但高度限制仍然需要明确如何处理溢出内容。

比较 content-box 和 border-box

给两个卡片 width: 300px，每边 20px 内边距，2px 边框。使用 content-box 时，内容宽度为 300px，边框盒宽度为 344px。使用 border-box 时，边框盒宽度为 300px，内容宽度为 256px。在这两种情况下，外边距都在声明的宽度之外。参见 CSS 盒模型：内容、内边距、边框和外边距 。

border-box 会将内边距和边框包含在声明的尺寸内。增加内边距会减少可用的内容宽度，并可能增加换行。如果仅内边距和边框就超过了声明的宽度，内容无法变为负数，因此实际的盒子可能会超过该宽度。参见 MDN：box-sizing。

*, *::before, *::after { box-sizing: border-box; }

可以用于在新文档中统一计算方法的常用规则。我们还包括了伪元素，使其以相同的方式计算。如果将其批量应用到现有页面上，基于 content-box 创建的布局可能会发生变化，因此请先检查所需区域。完整示例应用了通用规则，但仅将 content-box 重新分配给 .content 以便比较。

设置流式宽度以及最小或最大限制

.fluid { width: 100%; max-width: 32rem; min-height: 10rem; }

.limits { width: 100%; min-width: 180px; max-width: 320px; }

width: 100% 基于包含块的宽度，而 max-width 限制其在大屏幕上不会变得更大。在根字体大小为 16px 的情况下，32rem 为 512px。min-width 是其最小可缩小的限制。如果父级可用宽度小于 180px，保持最小宽度也可能导致水平溢出。

当最小约束与最大约束冲突时，最小约束优先：min-width: 360px 与 max-width: 320px 不允许盒子缩小到 360px 以下。相应的最小和最大高度约束也遵循同样原则。Flexbox 和 Grid 的自动最小尺寸需要单独检查；在合适的地方使用 min-width: 0。参见 MDN：min-width, MDN：min-height。

比较自动高度、固定高度和高度限制

高度限制并不会自动移除溢出的文本。默认的溢出设置可能会将其显示在盒子外部；隐藏设置可能会截断读者需要的信息。当将最大高度与滚动结合使用时，还需检查键盘访问和移动设备交互。完整示例在盒子之后留有额外空间，以便观察固定高度失效情况。如果盒子未按预期缩小，还应查看CSS溢出、长文本换行和省略号。

了解百分比高度条件

.height-parent { height: 200px; }

.half { height: 50%; }

在正常的块流中，具有明确 200px 高度的父元素会使子元素的 height: 50% 高度解析为 100px。如果父元素高度取决于内容，这种简单计算通常会解析为 auto。单独的 min-height 不会提供相同的条件。绝对定位、Flexbox 和 Grid 可能具有不同的百分比解析规则。参见 MDN：height。

运行示例并比较尺寸

将以下代码以 UTF-8 格式保存为 sizing.html。它包含两种宽度计算、尺寸限制和四个使用同一段文字的高度对比框。示例中的尺寸文字是静态说明，修改 CSS 后应在开发者工具中读取实际尺寸。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparing width and height</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 16px; font: 16px/1.6 sans-serif; color: #333; }
    .compare { width: 300px; padding: 20px; border: 2px solid #3d6b89;
      margin-block: 16px; background: #eef6fa; }
    .content { box-sizing: content-box; }
    .border { box-sizing: border-box; }
    .fluid { width: 100%; max-width: 32rem; min-height: 10rem;
      padding: 24px; border: 2px solid #3d6b89; }
    .limits { width: 100%; min-width: 180px; max-width: 320px;
      padding: 12px; border: 1px solid #777; margin-block: 16px; }
    .height-box { width: 100%; max-width: 300px; padding: 12px;
      border: 2px solid #b98022; margin-block-end: 16px; }
    .height-box p { margin: 0; }
    .fixed { height: 96px; margin-block-end: 120px; }
    .minimum { min-height: 160px; }
    .limited { max-height: 96px; overflow: auto; }
    .height-parent { height: 200px; max-width: 300px; background: #eee; }
    .half { height: 50%; background: #cbe8d7; }
  </style>
</head>
<body>
  <h1>Comparing element sizes</h1>
  <h2>Same width: 300px</h2>
  <div class="compare content">content-box：344px to border</div>
  <div class="compare border">border-box：300px to border</div>
  <h2>Fluid width with minimum and maximum limits</h2>
  <div class="fluid">The maximum width is 32rem and the minimum height is 10rem. Try adding more sentences.</div>
  <div class="limits">The width is at least 180px and at most 320px.</div>
  <h2>fixed height 96px</h2><div class="height-box fixed"><p>The garden notice may grow as details about opening hours and preparation are added. A fixed height can make this text overflow the box. Check that readers can reach the last sentence.</p></div>
  <h2>Height that fits the content</h2><div class="height-box"><p>The garden notice may grow as details about opening hours and preparation are added. A fixed height can make this text overflow the box. Check that readers can reach the last sentence.</p></div>
  <h2>Minimum height: 160px</h2><div class="height-box minimum"><p>The garden notice may grow as details about opening hours and preparation are added. A fixed height can make this text overflow the box. Check that readers can reach the last sentence.</p></div>
  <h2>Maximum height: 96px, with scrolling</h2><div class="height-box limited" tabindex="0" role="region" aria-label="Maximum Height Comparison"><p>The garden notice may grow as details about opening hours and preparation are added. A fixed height can make this text overflow the box. Check that readers can reach the last sentence.</p></div>
  <h2>200px height of 50% of parent</h2><div class="height-parent"><div class="half">Height: 100px</div></div>
</body>
</html>

1. 在宽窗口中检查 .content 和 .border 的实际宽度。它们分别为 344px 和 300px。如果仅将 content-box 的 padding 更改为 30px，它将变为 364px，而 border-box 的外部宽度即使在相同的更改后仍为 300px。
2. 缩小窗口宽度，看看 .fluid 是否随其父元素缩小。在一个根字体为 16px 的宽窗口中，最大宽度为 512px。如果临时将 .limits 的 min-width 更改为 360px，它将大于最大宽度 320px。将其恢复为 180px。
3. 在四个高度比较框中添加相同的语句。固定高度应溢出边界，auto 和 min-height 应根据需要增长，max-height 面板应可通过内部滚动阅读。用 Tab 将焦点移入该滚动区域，再用方向键确认最后一句可读；触摸设备也要检查滚动操作。
4. 从父元素中移除 height: 200px。检查子元素的 50% 高度是否不再保持在 100px，并恢复原始声明以确保它们再次为 100px。
5. 增加浏览器的字体大小或放大比例。观察固定高度是否导致文字溢出、重叠或被裁切；对不需要高度限制的正文，比较改为 auto 后的阅读效果。

width: 100%，但如果水平溢出，请按顺序检查 box-sizing、左右边距、大的 min-width 和长字符串。不要将开发者工具中显示的内容大小与边框大小混淆。修改值后，恢复到原始声明以保持比较条件。