设置宽高前须确认盒模型类型，box-sizing默认为content-box（width/height仅内容区），border-box更直观；行内元素需改display才生效；百分比宽高依赖父容器尺寸；min/max属性会覆盖宽高设置。
设置宽高前，必须先确认元素使用的盒模型类型，否则实际尺寸会和预期不一致。
box-sizing 决定宽高的计算方式
默认情况下，元素使用 content-box 模型：设置的 width/height 仅指内容区大小，padding 和 border 会额外增加总尺寸。例如：
width: 200px; padding: 10px; border: 1px solid; → 实际占用宽度为 222px。
改用 border-box 后，width/height 包含 content + padding + border，更符合直观理解：
- 推荐在全局重置中统一设置：
*, *::before, *::after { box-sizing: border-box; } - 这样后续设 width: 200px 就真占 200px，无需手动减去 padding/border
行内元素不能直接设宽高
像 、 这类默认 display: inline 的元素，设置 width/height 无效（除非改变 display 类型）。
- 需要宽高控制时，可改为
display: inline-block或display: block - 注意 inline-block 会保留空格/换行产生的间隙，必要时需处理 html 结构或 font-size
百分比宽高依赖父容器
width/height 设为百分比时，其计算基准不同：
立即学习“前端免费学习笔记（深入）”；
- width% 基于父元素的 content width
- height% 只有当父元素有明确高度（非 auto）时才生效；否则等同于 height: auto
- 常见陷阱：父容器没设 height，子元素 height: 50% 不起作用
min/max 系列属性会影响最终尺寸
即使设置了 width/height，min-width、max-height 等仍可能覆盖或限制它。
- 例如：
width: 100px; max-width: 80px;→ 最终宽度是 80px - 响应式布局中常用 min/max 配合百分比，避免内容被过度拉伸或压缩