CSS 宽度和高度：min、max、% 与 auto 详解

设置宽度和高度

width 和 height 设置元素内容盒的尺寸。默认情况下，内边距和边框会加在这个尺寸之外。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Width and height</title>
  <style>
    .box {
      width: 240px;
      height: 80px;
      background: #2563eb;
      color: white;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="box" id="box"></div>
  <script>
    const box = document.getElementById('box');
    box.textContent = 'width 240px + padding = ' + box.offsetWidth + ' x ' + box.offsetHeight + 'px';
  </script>
</body>
</html>

这个盒子是 260 × 100 像素：240 × 80 的内容，再加上每边 10px 的内边距。如果设置了 box-sizing: border-box，它就正好是 240 × 80；盒模型页面对两者都做了讲解。

取值

为什么 height: 100% 不起作用

百分比 height 需要父元素有一个确定的高度，才有可以计算百分比的基准。当父元素的高度是 auto 时（这是常见情况），子元素的 height: 100% 也会表现得像 auto。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>height 100%</title>
  <style>
    .parent { background: #e5e7eb; padding: 6px; margin-bottom: 12px; display: flow-root; }
    .fixed { height: 120px; }
    .child { height: 100%; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">Parent height auto: 100% is ignored</div>
  </div>
  <div class="parent fixed">
    <div class="child">Parent height 120px: 100% works</div>
  </div>
</body>
</html>

第一个子元素的高度只等于它的文字高度。第二个子元素填满了父元素，因为父元素设置了高度。要让整个页面靠百分比层层生效，从 html、body 往下的每个祖先元素都需要设置高度，这就是为什么大多数布局改用 flexbox 或 grid：它们的子元素不用任何百分比就能拉伸填满。

min-height 和 max-width：能伸缩的尺寸

固定尺寸很容易出问题：文字比预期长时，固定高度会溢出；而固定宽度对手机来说又太宽。min- 和 max- 属性设置的是限制，而不是确切的尺寸。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>min and max</title>
  <style>
    .card {
      max-width: 360px;   /* narrower on small screens, never wider */
      min-height: 50px;   /* at least 50px, grows with content */
      border: 2px solid #2563eb;
      padding: 10px;
      margin-bottom: 12px;
    }
    .fixed {
      max-width: 360px;
      height: 50px;       /* fixed: long text spills out */
      border: 2px solid #f59e0b;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="card">Short card: the 50px minimum.</div>
  <div class="card">A card with much more text. It keeps its 360px limit but grows taller, because min-height sets a floor, not a fixed size. The border stays around all of the text, however many lines there are. Add another sentence here and the card simply gets taller again.</div>
  <div class="fixed">A fixed height of 50px with long text. The text no longer fits, so it spills past the amber border and over whatever comes next on the page. A fixed height cannot know how long the text will be, or how large the reader has set the font.</div>
</body>
</html>

在比 360px 更窄的屏幕上（比如手机），卡片会跟着缩小，因为 max-width 只是一个上限。

当尺寸和限制同时存在时，限制优先：max-width 胜过 width，min-width 胜过 max-width。

width: auto 与 width: 100%

对于块元素，让 width 保持 auto 几乎总是你想要的效果。auto 会把整个盒子（包括内边距和边框）放进容器里。100% 则让内容和容器一样宽，然后再加上内边距和边框：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>auto vs 100%</title>
  <style>
    .container { width: 300px; background: #e5e7eb; padding: 8px 0; }
    .item { padding: 10px; border: 3px solid #2563eb; margin: 6px 0; }
    .auto { width: auto; }
    .full { width: 100%; }
  </style>
</head>
<body>
  <div class="container">
    <div class="item auto">width: auto, fits</div>
    <div class="item full">width: 100%, overflows</div>
  </div>
  <p id="out"></p>
  <script>
    const w = (s) => document.querySelector(s).offsetWidth;
    document.getElementById('out').textContent =
      'container 300px, auto ' + w('.auto') + 'px, 100% ' + w('.full') + 'px';
  </script>
</body>
</html>

width: 100% 对默认不是块元素的元素（<input>、<img>、inline-block 元素）仍然有用，最好配合 box-sizing: border-box 使用。

按内容设置尺寸：fit-content

想让一个块元素只和它的文字一样宽，又不想把它改成 inline-block，就用 fit-content：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fit-content</title>
  <style>
    div { background: #16a34a; color: white; padding: 6px 10px; margin-bottom: 8px; }
    .fit { width: fit-content; }
    .min { width: min-content; }
  </style>
</head>
<body>
  <div>auto: full width</div>
  <div class="fit">fit-content: as wide as the text</div>
  <div class="min">min-content: one word per line</div>
</body>
</html>

fit-content 配合 margin-inline: auto，可以让一个标签或类似按钮的块元素居中，同时保持和文字完全一样宽。

全高区块与视口单位

vh 是视口高度的 1%，vw 是视口宽度的 1%。在手机上，浏览器的地址栏会随滚动伸缩，所以 100vh 可能比你看到的区域更高。动态单位 dvh 跟随可见区域，而 svh 使用最小的可见高度：

.hero {
  min-height: 100vh;  /* fallback */
  min-height: 100dvh; /* follows mobile toolbars */
}

全屏区块用 min-height 而不是 height，这样在文字很多的小屏幕上，区块仍然能变高。固定高度装不下内容时，内容会溢出来，这正是 CSS overflow 页面要处理的问题。

常见错误

• 在没有高度的父元素中使用 height: 100%。它的效果等同于 auto。给父元素设置高度，或者使用 flex 或 grid。
• width: 100% 加上内边距。元素会溢出容器。让块元素的宽度保持 auto，或者使用 box-sizing: border-box。
• 给文字容器设置固定高度。使用 min-height，这样文字更长或字号更大时也不会溢出。
• 给行内元素设置 width。<span> 和 <a> 会忽略 width 和 height；把它们设为 inline-block 或 block。
• 给页面包裹元素设置 width: 1200px。在每部手机上都会出现横向滚动。改用 max-width: 1200px。