核心是使用百分比宽度实现弹性布局，通过设置父容器和子元素的百分比宽度使内容自适应，配合box-sizing: border-box处理盒模型，利用calc()或预留百分比解决间距问题，并结合媒体查询适配移动端，确保布局在不同屏幕下正常显示。
使用CSS百分比宽度实现弹性布局，核心在于让元素的宽度根据父容器或视口大小动态调整。这种方式不需要依赖Flexbox或Grid，适合基础的响应式设计需求。关键是合理分配百分比值，并处理好间距问题。
设置父容器和子元素的百分比宽度
将子元素的宽度设为百分比值，使其相对于父容器宽度进行缩放。
• 父容器通常设置为固定宽度或100%以占据可用空间• 子元素用百分比定义宽度，比如两个并列区域各占50%
• 注意包含padding或border时可能影响布局，建议使用box-sizing: border-box
示例代码：
.container {
width: 100%;
padding: 10px;
}
.column {
width: 50%;
float: left;
box-sizing: border-box;
}
处理间距与间隙问题
直接使用百分比时，如果加上margin或padding，总宽度容易超过100%，导致换行。
立即学习“前端免费学习笔记（深入）”；
• 使用较小的百分比留出空隙，例如左右两栏各48%，中间留4%作为间隔
• 或者用calc()函数精确计算：width: calc(50% - 20px)
• 避免浮动带来的高度塌陷，可添加clearfix或使用overflow: hidden
带间隙的双栏布局示例：
.left, .right {
width: calc(50% - 20px);
margin: 0 10px;
float: left;
box-sizing: border-box;
}
适配移动端的小技巧
虽然百分比布局本身具备一定响应性，但在小屏幕上仍需额外控制。
• 结合max-width限制最大尺寸，防止在大屏上过宽• 使用min-width确保内容不会被压缩得太小
• 在媒体查询中调整百分比值，比如移动端改为100%堆叠显示
例如：
@media (max-width: 768px) {
.column {
width: 100%;
float: none;
}
}
基本上就这些。通过合理设置百分比、处理好盒模型和间隙，就能实现简单有效的弹性布局。不复杂但容易忽略细节。
