CSS 宽高与尺寸

width 和 height 控制元素的尺寸，但 CSS 提供了远比这两个属性更丰富的尺寸控制手段。

width 与 height

css 
.box {
  width: 300px;
  height: 200px;
}

默认情况下，width 和 height 作用于内容区（content-box）。使用 border-box 后作用于整个盒子（见 CSS 盒模型）。

min-* 与 max-*

限制尺寸的最小值和最大值，在响应式设计中极其重要：

css 
.container {
  width: 80%;
  max-width: 1200px;  /* 大屏幕下不超过 1200px */
  min-width: 320px;   /* 小屏幕下不小于 320px */
}

.image-preview {
  max-width: 100%;    /* 图片不会超出父容器 */
  height: auto;       /* 等比例缩放 */
}

.text-block {
  max-height: 300px;  /* 内容区最高 300px */
  overflow-y: auto;   /* 超出后显示滚动条 */
}

CSS 单位

绝对单位

单位说明
px像素，屏幕上最小的物理点（实际是参考像素）
pt磅，1pt = 1/72 英寸，主要用于打印样式
cm / mm厘米/毫米，主要用于打印
css 
.box {
  width: 300px;
  font-size: 16px;
}

px 是 Web 开发中最常用的绝对单位。

相对单位

单位相对于
em当前元素的字体大小
rem根元素（<html>）的字体大小
%父元素的对应属性
vw视口宽度的 1%
vh视口高度的 1%
vminvw 和 vh 中的较小值
vmaxvw 和 vh 中的较大值

rem — 最适合排版

rem（root em）始终相对于根元素（html）的字体大小，在整个项目中保持一致：

css 
html {
  font-size: 16px; /* 1rem = 16px */
}

h1 { font-size: 2.5rem; }      /* 40px */
p { font-size: 1rem; }         /* 16px */
.small { font-size: 0.875rem; }/* 14px */

在排版中优先使用 rem 而非 px——它尊重用户在浏览器中设置的基础字号，提升可访问性。对于需要精确固定的尺寸（如边框、图标），px 仍然适用。

em — 级联计算

em 相对于当前元素的字体大小，会产生级联效应：

css 
.parent {
  font-size: 20px;
}
.parent .child {
  font-size: 1.5em;    /* 1.5 × 20px = 30px */
  padding: 1em;        /* 1 × 30px = 30px（基于自身字体大小） */
}
html 
<div class="parent">
  <div class="child">子元素 (1.5em = 30px)</div>
</div>

em 用于 padding、margin 时，基准是元素自身的字体大小，而不是父元素。

视口单位

css 
/* 全屏 hero 区域 */
.hero {
  width: 100vw;
  height: 100vh; /* 占满整个视口高度 */
}

/* 响应式字体 */
h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
  /* 最小 1.5rem，理想 4vw，最大 3rem */
}

clamp() — 动态范围

clamp(min, ideal, max) 让值在最小值和最大值之间动态调整：

css 
/* 随视口宽度缩放的文字 */
.responsive-text {
  font-size: clamp(1rem, 2.5vw, 1.5rem);
}

/* 自适应宽度的卡片 */
.card {
  width: clamp(280px, 50%, 400px);
}

calc() — 动态计算

calc() 可以在运行时混合不同单位：

css 
.sidebar {
  width: 250px;
}
.content {
  width: calc(100% - 250px); /* 剩余宽度 */
}

.fixed-footer {
  min-height: calc(100vh - 80px); /* 视口高度减去 header */
}

.half-gutter {
  width: calc(50% - 1rem); /* 一半宽度减去间距 */
}

运算符 + - 两边必须有空格（calc(100%-80px) 是无效的），* / 可以不加。

overflow — 溢出控制

当内容超出元素的设定尺寸时：

css 
/* 隐藏溢出 */
.hidden { overflow: hidden; }

/* 显示滚动条 */
.scroll { overflow: auto; }

/* 始终显示滚动条 */
.always-scroll { overflow: scroll; }

/* 文本溢出显示省略号 */
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html 
<div class="hidden" style="width:200px;height:60px">这是一段很长的文本内容用于演示溢出效果这是一段很长的文本内容</div>
<div class="scroll" style="width:200px;height:60px">这是一段很长的文本内容用于演示溢出效果这是一段很长的文本内容</div>
<div class="ellipsis" style="width:200px">这是一段很长的文本内容用于演示省略号效果</div>

overflow: hidden 会裁剪内容且无法滚动。在移动端这可能导致用户无法查看被遮挡的内容——确认你的设计确实需要裁剪再使用。