元素的视觉大小受padding和border影响，设置box-sizing: border-box可使width和height包含content、padding和border，避免尺寸超出预期。
在网页布局中，元素的视觉大小不仅由 width 和 height 决定，还受到 padding 和 border 的影响。正确理解它们的作用，能帮助你更精确地控制元素的外观尺寸。
padding 如何影响视觉大小
padding 是元素内容与边框之间的空间，它会向外扩展元素的占用区域。
- 给元素设置 padding 后，实际宽度 = width + 左右 padding
- 实际高度 = height + 上下 padding
- 即使设置了固定宽高，padding 仍会让内容区变小，整体视觉尺寸变大
例如：一个 div 设置 width: 100px; padding: 20px; 那么它的总宽度会变成 140px（100 + 20 + 20）。
border 占据外部空间
border 是围绕 padding 和内容绘制的线条，默认情况下也会增加元素的整体尺寸。
立即学习“前端免费学习笔记（深入）”；
- border-width 计算在元素总尺寸之外
- 一个 1px 的边框会在每侧增加 1px，总共增加 2px 宽度和高度
- 如果同时有 padding 和 border，总尺寸会进一步扩大
比如：width: 100px; padding: 10px; border: 5px solid black; 实际宽度为 130px（100 + 10 + 10 + 5 + 5）。
使用 box-sizing 控制尺寸计算方式
为了避免 padding 和 border 导致元素超出预期大小，推荐使用 box-sizing: border-box。
- 设置后，width 和 height 包含了 content、padding 和 border
- 此时添加 padding 或 border 不会改变元素的总尺寸
- 更适合响应式布局和栅格系统
* { box-sizing: border-box; } 以统一行为。基本上就这些。掌握 padding、border 和 box-sizing 的关系，就能更可靠地控制元素的视觉表现。不复杂但容易忽略细节。
