CSS布局与响应式设计实战指南

1. CSS布局实战：从基础到进阶

1.1 经典布局模式解析

网页布局如同建筑框架，决定了内容的组织方式。最基础的三种布局模式构成了90%的网页结构：

上中下结构（常称为"圣杯布局"）是内容型网站的首选。通过display: flex; flex-direction: column;实现主体分区，配合min-height: 100vh确保满屏高度。关键技巧在于中间内容区的flex: 1属性，它会自动填充剩余空间。

左右分栏适合后台管理系统和文档站点。传统实现使用float，但现代方案更推荐Flexbox：

css复制.container {
  display: flex;
}
.sidebar {
  width: 250px;
  flex-shrink: 0;
}
.main {
  flex-grow: 1;
}

flex-shrink: 0防止侧边栏被压缩，这个细节常被初学者忽略。

流式自动换行常见于商品列表和图片墙。除了常规的flex-wrap: wrap，更智能的方案是CSS Grid：

css复制.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

auto-fill会根据容器宽度自动计算列数，minmax确保每项最小200px且等宽分布。

1.2 响应式布局核心技巧

真正的响应式设计不是简单的媒体查询断点，而是要考虑：

相对单位体系：将px转换为rem（根em）作为基础单位，通常设置html { font-size: 62.5%; }使1rem≈10px。间距使用clamp()函数实现动态调整：

css复制.element {
  padding: clamp(1rem, 3vw, 2rem);
}

容器查询（Container Queries）是革命性特性，允许组件根据自身尺寸而非视口调整样式：

css复制@container (min-width: 400px) {
  .card { flex-direction: row;