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，更符合直觉和实际排版需要。
