width和height仅对非内联元素生效；box-sizing:border-box使宽高包含padding和border；百分比高度需父元素有明确高度；min/max类属性更适配响应式布局。
width 和 height 只对非内联元素生效
直接给 或 设置 width 和 height 不会起作用，因为它们默认是 display: inline。浏览器会忽略这些尺寸声明。
解决方法是显式改变显示类型：
- 设为
display: block（适合独占一行的场景） - 设为
display: inline-block（保留行内流特性，同时支持宽高） - 设为
display: flex或display: grid（现代布局下更可控）
box-sizing 决定 width/height 算不算 padding 和 border
默认 box-sizing: content-box，此时 width: 200px 表示内容区宽 200px，加上 padding: 10px 和 border: 2px 后，总占用宽度是 224px —— 容易导致布局溢出或响应错乱。
推荐统一设为：
立即学习“前端免费学习笔记（深入）”；
* {
box-sizing: border-box;
}这样 width: 200px 就是“整个盒子”的总宽，含 padding 和 border，更符合直觉和实际排版需要。
百分比宽高依赖父容器是否具有明确尺寸
width: 50% 是相对于父元素的 width 计算的，但 height: 50% 要生效，父元素必须有**明确的高度值**（如 height: 300px 或 height: 100vh）。否则，height: 50% 会被当成 auto 处理。
常见踩坑点：
- 父容器是
div且没设高度 → 子元素height: 100%无效 - 想让元素占满视口高度，用
height: 100vh比height: 100%更可靠 - Flex 容器中子项设
height: 100%仍可能失效，此时可改用align-self: stretch或不设 height，靠 flex 自动拉伸
min-width / max-width / min-height / max-height 是更安全的尺寸控制方式
硬写 width: 300px 在小屏上容易撑破容器；固定 height: 200px 遇到文字换行多时又会截断内容。
更健壮的做法：
- 用
max-width: 100%配合width: 300px，确保图片/卡片在窄屏下自适应 - 用
min-height: 100vh实现「至少一屏高」，避免内容少时底部留白过大 - 文字容器优先用
min-height而非height，防文字溢出或高度塌陷
这些属性天然支持响应式，也更容易与媒体查询配合。
