width/height仅对非替换元素中的正常流块级元素有效；替换元素天然支持，inline元素需改display，浮动/绝对定位元素脱离文档流后才生效；box-sizing、百分比依赖父级尺寸、min/max-width/height及vh等单位需结合上下文使用。
width 和 height 只作用于非替换元素的正常流块级元素
设置 width 和 height 对 span、a 这类默认 display: inline 的元素无效，除非显式改成 block 或 inline-block。浮动（float）或绝对定位（position: absolute）的元素也会脱离文档流，此时 width/height 才能生效。
- 替换元素（如
img、input、textarea）天然支持宽高设置，无需改display - Flex 项目或 Grid 项受容器控制，
width/height可能被flex或grid相关属性覆盖 - 百分比宽高在父容器无明确尺寸时会计算为
auto（比如父div没设height，子元素height: 50%就无效）
box-sizing 决定 width/height 算不算 padding 和 border
默认 box-sizing: content-box，这时 width: 200px 表示内容区宽 200px，加上 padding 和 border 后总宽度会超出；而 box-sizing: border-box 下，width 指的是整个盒子的最终宽度，padding 和 border 从这个宽度里“扣”。
- 全局重置推荐：
*, *::before, *::after { box-sizing: border-box; } -
border-box更符合直觉，但要注意：当同时设max-width和padding时，内容区可能被压缩到 0 - 用
calc()手动调整（如width: calc(100% - 20px)）可绕过border-box的挤压问题
min-width / max-width 比 width 更适合响应式布局
纯 width: 100% 在小屏下可能撑破容器，width: 300px 在大屏又显得局促。用 min-width 和 max-width 组合能守住边界，再配合 width: 100% 自适应伸缩。
- 常见写法：
.card { width: 100%; max-width: 600px; margin: 0 auto; } -
min-width对防止内容过窄很有用（比如表格列最小要容下“操作”二字），但设太大会导致横向滚动 - 注意：
max-width不会限制 flex 子项的主轴伸展，需配合flex-shrink: 0或flex-basis
height: 100% 容易失效，优先考虑 min-height 或 vh 单位
height: 100% 要求父级有明确高度值（不能是 auto），逐层向上追溯，任意一级没设高就会断掉。实际开发中极少需要“刚好填满”，更多是“至少填满视口”或“至少撑开内容”。
立即学习“前端免费学习笔记（深入）”；
- 全屏布局用
min-height: 100vh更可靠（vh是视口高度单位，不受父级影响） - 希望内容少时也撑满屏幕，但内容多时允许滚动？用
min-height: 100vh+overflow-y: auto -
height: fit-content或height: max-content可响应内容变化，但 IE 不支持
CSS 尺寸控制真正难的不是语法，而是搞清当前元素所处的渲染上下文——它在哪个格式化上下文中、父容器是否提供尺寸约束、有没有其他布局机制（flex/grid/float）在暗中接管。漏掉其中一环，width 和 height 就像发出去没回音的消息。
