CSS 尺寸 (Dimension)

通过 width、height 以及 min-width、max-width、min-height、max-height 可以控制元素的宽度和高度，从而控制布局和内容区域的尺寸。

常用属性

属性	作用
width	宽度
height	高度
min-width	最小宽度
max-width	最大宽度
min-height	最小高度
max-height	最大高度

---

width 与 height

.box {
  width: 200px;
  height: 100px;
}

常用单位：

• px：像素
• %：相对于父元素的宽或高（width 相对父宽，height 相对父高；若父高未定，百分比高度可能不生效）
• em / rem：相对字号
• vw / vh：视口宽度的 1%、视口高度的 1%
• auto：由浏览器根据内容或布局计算（块级元素默认 width: auto 占满父宽；height: auto 由内容撑开）

---

块级元素的默认宽度

块级元素（如 div、p）在不设宽度时，默认 width: auto，会占满父元素的内容区宽度（减去自己的 margin、padding、border 等）。所以很多布局只设 max-width，不设固定 width，以便在小屏上自适应。

---

max-width 与 min-width

max-width：元素宽度不超过该值，常用于「内容区不要太宽，大屏上限制一下」：

.container {
  max-width: 1200px;
  margin: 0 auto;
}

min-width：元素宽度不小于该值，避免被压得太窄：

.sidebar {
  min-width: 200px;
}

max-height / min-height：同理，控制高度范围。注意：设了 height 后内容溢出要配合 overflow 处理（见 CSS Overflow）。

---

百分比高度注意点

height: 100% 是相对父元素的高度。若父元素没有明确高度（父元素也是 auto），百分比会无效。常见做法：

• 给从 html、body 到目标父元素逐层设 height: 100%；或
• 用 vh：min-height: 100vh 表示至少占满一屏高度。

---

与 box-sizing 的关系

在 content-box（默认）下，width/height 只含内容区，padding、border 会加大总占位。在 border-box 下，width/height 已含 padding、border，布局更直观。见 CSS 盒子模型。

---

小结

• width / height：设固定或百分比、auto 等；块级默认 width: auto 占满父宽。
• max-width / min-width：限制宽度范围；max-height / min-height：限制高度范围。
• 百分比高度依赖父元素有明确高度；全屏高度可用 100vh。
• 尺寸与 box-sizing 共同决定元素实际占位。

下一节学习 CSS Display（显示）：块级、内联、flex、grid 等显示方式。