<p>固定宽度与百分比宽度混合使用可实现兼顾稳定与灵活的响应式布局。典型结构为左侧固定宽度侧边栏（如200px），右侧主内容区使用calc(100% - 200px)或flex:1自适应；需注意总宽不超100%，推荐box-sizing:border-box处理边距，结合calc()函数精确计算宽度，并在Flexbox中利用flex-basis配合媒体查询优化多屏适配。</p>
在网页布局中，固定宽度与百分比宽度混合使用是一种常见的设计方式。它兼顾了页面的灵活性和结构的可控性，适合多种屏幕尺寸下的内容展示。
固定宽度与百分比宽度的特点
固定宽度（如 width: 300px;）让元素保持恒定尺寸，适合控制图片、侧边栏或按钮等需要精确尺寸的内容。百分比宽度（如 width: 70%;）则根据父容器动态调整，适合响应式布局中的主内容区域。
常见混合布局结构
典型的场景是左侧一个固定宽度的侧边栏，右侧是自适应的主内容区。
示例CSS：
.container {
display: flex;
}
.sidebar {
width: 200px; /* 固定宽度 */
background-color: #f0f0f0;
}
.main-content {
width: calc(100% - 200px); /* 百分比减去固定值 */
background-color: #d0e0f0;
flex: 1; /* 也可用flex自动填充 */
}
HTML结构：
立即学习“前端免费学习笔记（深入）”；
<div class="container"> <div class="sidebar">菜单</div> <div class="main-content">内容区</div> </div>
使用技巧与注意事项
混合布局时需注意以下几点：
- 避免总宽度超过100%，特别是设置了边距或边框时，建议使用 box-sizing: border-box;
- 使用 calc() 函数能更灵活地计算宽度，例如 width: calc(100% - 220px) 包含padding或margin时更准确
- 在Flexbox或Grid布局中，可结合 flex-basis 设置固定宽度，其余部分自动伸缩，减少手动计算
- 媒体查询可配合混合布局，在小屏幕上将固定宽度改为100%以适配移动设备
基本上就这些，合理搭配固定与百分比宽度，能让页面既稳定又灵活。
