理解盒模型对 width 与 height 的影响
盒模型基础与尺寸计算
在 CSS 中，元素的尺寸是由盒模型决定的。默认盒模型采用 content-box，这意味着 width 与 height 只限定内容区的尺寸，而 padding、border、margin 会额外增加总占用空间。了解这一点是实现“精确设置元素大小”的前提。
如果你希望把 padding 和 border 也包含进设定的宽高，可以使用 box-sizing: border-box，此时 最终盒子宽高等于 width/height，padding 与 border 不再额外增加总宽高。这个设置在布局和视觉一致性上非常有用。
另外，height 的行为在不同元素类型间有差异：块级元素通常会根据内容撑开高度，如果没有明确设置高度，height 将表现为最小高度，而对于替换元素（如图片）则受其 intrinsic 高度影响。理解这些差异有助于精准控制大小。
box-sizing 的作用
通过 在全局应用 box-sizing: border-box，你可以避免在 padding 与 border 增加时频繁手动修改 width/height，减少布局错位的风险。
常见做法是在根元素应用一个统一的 box-sizing 声明，然后让所有元素继承，例如：
:root {--box: border-box;
}
*, *:before, *:after {box-sizing: var(--box);
}该做法在复杂布局中极大提高 predictability，当你需要对齐不同组件的边界时尤其有效。
实战技巧：如何让 width 与 height 精确生效
选择单位：像素、百分比、视口单位
在设计中，常用单位包括 像素（px）、百分比（%）、以及视口单位（vh/vw）。像素单位适合固定尺寸的控件，百分比受父元素尺寸影响，通常用于自适应布局，视口单位适用于全屏或比例型设计。
要实现极致的尺寸控制，可以组合单位，比如：
/* 通过父尺寸控制子元素的宽度，确保在不同设备上保持比例 */
.parent { width: 80%; }
.child { width: 50%; height: 100px; }实践要点：在响应式设计中尽量以相对单位为主，辅以像素微调，避免仅用固定像素导致在移动端出现滚动或缩放问题。
盒子内部内容对尺寸的影响
文本、图片等内容会影响元素的实际显示尺寸，只要未显式设置高度，内容高度可能膨胀容器，这时你需要使用 overflow、text-overflow、line-height 等控制。
如果你需要固定高度且不希望内容溢出，可以设置：height、overflow: hidden，并在必要时使用 overflow: hidden; text-overflow: ellipsis; white-space: nowrap 来裁切文本。
示例：
/* 固定高度并裁切多余文本 */
.card { height: 120px; overflow: hidden; }
.card p { margin: 0; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }常见误区与解决方案
误区一：边框和内边距改变总宽高
如果未设置 box-sizing，width 在加入 padding 和 border 时不会等于你设定的值，导致布局错位。解决办法是启用 border-box，或在计算时把 padding 与 border 的尺寸考虑进去。
示例对比：
/* 未开启 border-box 的常见错位 */
.box { width: 300px; padding: 20px; border: 2px solid #000; }/* 开启 border-box，尺寸保持一致 */
.box--bb { width: 300px; padding: 20px; border: 2px solid #000; box-sizing: border-box; }对齐和网格系统中，统一 box-sizing 能避免连锁问题，尤其在使用 flex、grid 的复杂布局时。
误区二：百分比高度的限制
百分比高度的实现依赖于父元素有明确高度，否则高度结果为 auto。只有父元素高度已知，子元素的 height: 50% 才能生效。
解决策略包括：显式设定父容器高度、使用 min-height 代替固定高度、利用 aspect-ratio 维持比例等。
示例：
/* 父容器有固定高度，子元素高度设为百分比 */
.parent { height: 500px; }
.child { height: 50%; }/* 使用 min-height 让页面自适应，同时保持最小高度 */
.parent { min-height: 400px; }
.child { height: 60%; }误区三：使用 auto 高度带来的不可控性
如果你希望元素严格按照某个外观显示，避免让高度随内容波动，不要单纯依赖 height:auto，而应结合 min-height、max-height、overflow 等属性进行约束。
当要在网格系统或卡片中保持一致的视觉高度时，常用做法是给定一个固定的高度或通过统一的比例来实现。
响应式场景下的尺寸控制策略
使用 min/max-width/min-height 与 flex/grid
在响应式布局中，min-width/min-height 与 max-width/max-height 能保证元素不被缩到不可用的尺寸，同时配合 flex 或 grid 布局，可以更好地控制元素的可用空间。
示例（flex 容器内部的等高卡片）：
.container { display: flex; gap: 16px; }
.card { flex: 1 1 240px; min-width: 240px; max-width: 420px; height: 180px; }通过设置最小与最大宽度，可以实现自适应并防止单元在极端屏幕上变形。
使用 aspect-ratio 实现固定比例的元素
aspect-ratio 能帮助你在不同宽高比下保持视觉一致性。对于需要固定比例的元素，设置 aspect-ratio 能确保 height 根据 width 自动计算，这在响应式图片、视频占位、卡片头部等场景尤为有用。
示例：
/* 维持 16:9 的比例，无论宽度如何变化 */
.video-thumb { width: 100%; aspect-ratio: 16 / 9; background: #ccc; }