使用 max-width 结合 padding 和 box-sizing 可有效控制布局宽度与灵活性，.container 设置 max-width 限制最大宽度，配合 padding 确保内边距舒适性，box-sizing: border-box 防止尺寸溢出，实现响应式自适应布局。
当需要限制内容宽度但又要保持布局灵活性时，使用 max-width 结合 padding 是一种常见且有效的做法。这种方式可以在屏幕变大时防止内容区域无限拉伸，提升可读性，同时在小屏幕上自动适配，保留内边距的舒适感。
使用 max-width 控制最大宽度
设置 max-width 可以让元素在达到指定宽度后不再随容器变大而变宽，适合控制文本类内容的最佳阅读宽度（通常 600px–800px）。
例如：
.container {
max-width: 768px;
margin: 0 auto; /* 水平居中 */
}
配合 padding 保持响应式内边距
直接设置固定宽度会破坏响应性，而用 padding 配合 max-width 能在不同设备上都保留边距空间。
常用技巧：- 在外层容器设置左右 padding，避免内容贴边
- 结合百分比宽度或 flex 布局，使整体更灵活
.container {
max-width: 768px;
padding: 20px;
margin: 0 auto;
width: 100%;
}
考虑 box-sizing 避免宽度计算错误
当设置了 padding 后，元素总宽度可能会超出预期，尤其是与 width 或 max-width 混用时。建议统一设置：
* {
box-sizing: border-box;
}
这样 padding 会被包含在 max-width 内部，不会撑破布局。
基本上就这些。用 max-width 锁定最大宽度，用 padding 保证呼吸感，再配合 box-sizing: border-box 精准控制尺寸，就能实现既有限制又灵活的盒模型布局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
