17370845950

设置宽高前须确认盒模型类型，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 配合百分比，避免内容被过度拉伸或压缩