CSS 尺寸 (Dimension)

尺寸属性决定元素"占多大地方"：width、height 设定基础宽高，min-、max- 系列设定弹性上下限，再配合百分比、em、vw 等单位，就能做出随视口伸缩的自适应页面。网页排版几乎处处离不开它们。

width 与 height

最基础的尺寸属性，支持像素 px、百分比 %、em 以及默认值 auto（宽度由内容或父容器决定）：

img { width: 300px; height: 200px; }  /* 固定图片大小 */
div { width: 50%; }                   /* 宽度 = 父容器宽度的一半 */
/* 效果：div 宽度会随父容器变化而自动伸缩 */

常用单位怎么选

• px：绝对单位，最直观，适合固定尺寸。
• %：相对父元素，适合流式、响应式布局。
• em/rem：相对字号，em 相对父级字号、rem 相对根元素字号。
• vw/vh：相对视口，1vw 等于视口宽度的 1%。

h1 { font-size: 2em; }        /* 字号是父元素字号的 2 倍 */
.hero { height: 60vh; }       /* 高度为视口高度的 60% */

min- 与 max- 上下限

给元素设一个"允许伸缩的范围"：内容再少也不小于下限，再多也不超过上限，是自适应布局的保险丝：

p {
  min-height: 40px;      /* 至少 40px 高 */
  max-width: 600px;      /* 最宽 600px，窄屏时自动收缩 */
}
/* 效果：段落既不会太矮，也不会在超宽屏幕上拉得过长 */

用 max-width 做响应式容器

给页面容器设置 max-width 并配合 auto 外边距，是响应式布局最常用的写法：

.page {
  max-width: 960px;
  margin: 0 auto;        /* 屏幕超过 960px 时水平居中 */
}
/* 效果：手机上看满屏自适应，电脑上看居中定宽的"内容带" */

line-height 行高也是尺寸

行高决定一行文字所占高度，会参与元素总高度的计算，文本垂直居中常常靠它实现：

.title {
  height: 60px;
  line-height: 60px;   /* 行高等于盒子高度，文字就垂直居中了 */
}

小结

width/height 定基础宽高，min/max 定弹性范围，再按场景选用 px、%、vw 等单位；把 max-width 与 margin:auto 结合，即可轻松写出同时适配手机与电脑的响应式页面。