响应式设计中，CSS盒模型通过content、padding、border、margin构建自适应布局。使用box-sizing: border-box使width包含内边距和边框，结合百分比和em单位实现元素弹性缩放。百分比基于父容器宽度，适合流体布局；em相对字体大小，提升可访问性。综合实践如响应式卡片组件，采用width: 90%适配小屏，max-width: 400px限制大屏宽度，margin: 2em auto居中，padding: 1.5em与font-size协调间距，确保在不同设备上视觉一致。掌握盒模型与相对单位配合，是实现响应式关键。
在响应式网页设计中，CSS盒模型是构建灵活、自适应布局的核心基础。合理使用百分比（percentage）和em单位，结合盒模型的content、padding、border、margin四个部分，可以让页面元素在不同屏幕尺寸下自然缩放，提升用户体验。
盒模型与响应式设计的关系
每个HTML元素都被视为一个矩形盒子，其总宽度由以下部分组成：
- 内容区域（width）
- 内边距（padding）
- 边框（border）
- 外边距（margin）
默认情况下，box-sizing: content-box，此时设置的width仅指内容区域，加上padding和border后总宽度会超出预期，容易导致布局错乱。因此，在响应式设计中推荐统一使用：
*, *::before, *::after { box-sizing: border-box; }这样width包含padding和border，更便于用百分比控制整体布局。
立即学习“前端免费学习笔记（深入）”；
使用百分比实现流体布局
百分比单位基于父容器的尺寸计算，非常适合创建随屏幕变化的弹性结构。
例如，构建两栏布局：
.container { width: 100%; }.sidebar { width: 30%; float: left; }
.main-content { width: 70%; float: right; }
当视口变窄时，两栏自动压缩，保持比例。关键点在于：
- 避免给父容器设定固定宽度
- 使用max-width限制最大尺寸，防止桌面端过宽
- 配合margin: 0 auto实现居中容器
em单位在字体与间距中的弹性控制
em是相对于当前元素或父元素的字体大小的单位，适合构建可缩放的排版系统。
例如：
body { font-size: 16px; }h1 { font-size: 2em; } /* 32px */
.card { padding: 1.5em; }
当用户调整浏览器默认字号时，em单位的元素会随之缩放，增强可访问性。注意：
- em具有继承叠加性，子元素基于父元素font-size计算
- 用于margin和padding时，能与文字大小保持视觉协调
- 避免深层嵌套导致尺寸失控，必要时可用rem替代
综合实践：响应式卡片组件
将百分比和em结合，创建一个自适应的卡片：
.card {width: 90%;
max-width: 400px;
margin: 2em auto;
padding: 1.5em;
border: 1px solid #ddd;
border-radius: 8px;
}
.card-title { font-size: 1.4em; margin-bottom: 0.8em; }
该卡片在小屏上占据大部分宽度，在大屏上不超过400px，内边距和文字间距随字体缩放，整体表现一致。
基本上就这些。掌握盒模型与相对单位的配合，是实现真正响应式设计的关键一步。不复杂但容易忽略细节。
