CSS布局全解析

介绍

CSS布局是控制网页元素在页面上排列和定位的技术，是现代前端开发中创建美观、功能性强的用户界面的核心工具。从早期的流动布局、浮动布局，到现代的Flexbox和Grid布局，CSS布局技术不断发展，为开发者提供了更强大、更灵活的布局能力。掌握CSS布局是实现各种网页设计的基础，也是前端开发人员必备的核心技能。

基础布局原理

流动布局 (Normal Flow)

流动布局是浏览器默认的布局方式，元素按照文档流的顺序自上而下、从左到右排列。块级元素占据整行宽度，行内元素只占据其内容所需的宽度。

流动布局示意图：

流动布局示意图

代码示例：

.block-element { display: block; }
.inline-element { display: inline; }
.inline-block-element { display: inline-block; }

浮动布局 (Float)

浮动布局允许元素脱离文档流，浮动到容器的左侧或右侧，常用于实现文字环绕图片或创建多列布局。浮动元素会影响后续元素的排列，因此通常需要使用清除浮动技术来防止布局混乱。

浮动布局示意图：

浮动布局示意图

代码示例：

.float-left { float: left; }
.float-right { float: right; }
.clearfix::after { /* 清除浮动 */
    content: "";
    display: table;
    clear: both;
}

定位布局 (Position)

定位布局通过position属性精确控制元素的位置，是创建复杂布局和交互效果的重要工具。

定位布局示意图：

定位布局示意图

代码示例：

.static { position: static; }
.relative { position: relative; top: 10px; left: 20px; }
.absolute { position: absolute; top: 0; right: 0; }
.fixed { position: fixed; bottom: 0; left: 0; }
.sticky { position: sticky; top: 0; }

现代布局技术

Flexbox布局

Flexbox是一个一维布局系统，专注于行或列的布局，解决了许多传统布局技术难以实现的对齐和空间分配问题。

Flexbox布局示意图：

Flexbox布局示意图

代码示例：

.flex-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.flex-item { flex: 1; }

Flexbox布局示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox布局示例</title>
    <style>
        .container {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            height: 200px;
            background-color: lightblue;
            padding: 10px;
        }

        .item {
            background-color: white;
            padding: 20px;
            margin: 5px;
            flex: 1;
            text-align: center;
        }

        .item2 {
            flex: 2;
            align-self: stretch;
        }
    </style>
</head>
<body>
    <h1>Flexbox布局示例</h1>
    <div class="container">
        <div class="item item1">项目1</div>
        <div class="item item2">项目2</div>
        <div class="item item3">项目3</div>
    </div>
</body>
</html>

Grid布局

CSS Grid是一个二维布局系统，能够同时控制行和列，是创建复杂页面布局的强大工具。

Grid布局示意图：

Grid布局示意图

代码示例：

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 100px 200px;
    grid-gap: 10px;
}
.grid-item { grid-column: span 2; }

Grid布局示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid布局示例</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: 100px 200px;
            grid-gap: 10px;
            background-color: lightgreen;
            padding: 10px;
        }

        .item {
            background-color: white;
            padding: 20px;
            text-align: center;
        }

        .header {
            grid-column: 1 / 4;
            grid-row: 1;
            background-color: yellow;
        }

        .sidebar {
            grid-column: 1;
            grid-row: 2;
            background-color: pink;
        }

        .main {
            grid-column: 2 / 4;
            grid-row: 2;
            background-color: purple;
            color: white;
        }
    </style>
</head>
<body>
    <h1>Grid布局示例</h1>
    <div class="container">
        <div class="item header">页头</div>
        <div class="item sidebar">侧边栏</div>
        <div class="item main">主内容</div>
    </div>
</body>
</html>

高级布局实例

高级CSS Grid布局 - 响应式仪表板

下面是一个使用CSS Grid创建的响应式仪表板布局示例，展示了如何结合Grid的多种特性创建复杂布局：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>高级Grid布局 - 响应式仪表板</title>
  <style>
    /* 基础样式重置 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Arial', sans-serif;
    }

    :root {
      --primary: #3498db;
      --secondary: #2ecc71;
      --dark: #2c3e50;
      --light: #ecf0f1;
      --danger: #e74c3c;
      --warning: #f39c12;
      --gray: #95a5a6;
      --spacing: 20px;
      --border-radius: 8px;
      --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    body {
      background-color: #f5f7fa;
      color: var(--dark);
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: var(--spacing);
    }

    h1 {
      margin-bottom: var(--spacing);
      color: var(--dark);
    }

    /* 高级Grid仪表板布局 */
    .dashboard {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-template-rows: auto auto auto;
      gap: var(--spacing);
    }

    /* 卡片通用样式 */
    .card {
      background-color: white;
      border-radius: var(--border-radius);
      padding: var(--spacing);
      box-shadow: var(--shadow);
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--light);
    }

    .card-title {
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--dark);
    }

    /* 特定卡片布局 */
    .card-overview {
      grid-column: span 12;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 15px;
    }

    .overview-item {
      padding: 15px;
      background-color: var(--light);
      border-radius: var(--border-radius);
      display: flex;
      flex-direction: column;
    }

    .overview-value {
      font-size: 1.5rem;
      font-weight: bold;
      margin-bottom: 5px;
    }

    .overview-label {
      font-size: 0.9rem;
      color: var(--gray);
    }

    .card-sales {
      grid-column: span 8;
    }

    .card-traffic {
      grid-column: span 4;
    }

    .card-users {
      grid-column: span 6;
    }

    .card-recent {
      grid-column: span 6;
    }

    /* 图表占位符 */
    .chart {
      height: 250px;
      background-color: var(--light);
      border-radius: var(--border-radius);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--gray);
    }

    /* 用户列表 */
    .user-list {
      list-style: none;
    }

    .user-item {
      display: flex;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid var(--light);
    }

    .user-item:last-child {
      border-bottom: none;
    }

    .user-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: var(--light);
      margin-right: 15px;
      overflow: hidden;
    }

    .user-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .user-info {
      flex: 1;
    }

    .user-name {
      font-weight: 500;
    }

    .user-email {
      font-size: 0.8rem;
      color: var(--gray);
    }

    .user-status {
      padding: 3px 10px;
      border-radius: 12px;
      font-size: 0.75rem;
    }

    .status-active {
      background-color: rgba(46, 204, 113, 0.1);
      color: var(--secondary);
    }

    .status-inactive {
      background-color: rgba(231, 76, 60, 0.1);
      color: var(--danger);
    }

    /* 响应式断点 */
    @media (max-width: 1024px) {
      .card-sales,
      .card-traffic,
      .card-users,
      .card-recent {
        grid-column: span 6;
      }
    }

    @media (max-width: 768px) {
      .card-sales,
      .card-traffic,
      .card-users,
      .card-recent {
        grid-column: span 12;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>响应式仪表板</h1>
    <div class="dashboard">
      <!-- 概览卡片 -->
      <div class="card card-overview">
        <div class="overview-item">
          <div class="overview-value">¥128,500</div>
          <div class="overview-label">总销售额</div>
        </div>
        <div class="overview-item">
          <div class="overview-value">2,845</div>
          <div class="overview-label">总用户数</div>
        </div>
        <div class="overview-item">
          <div class="overview-value">1,254</div>
          <div class="overview-label">订单数量</div>
        </div>
        <div class="overview-item">
          <div class="overview-value">4.8</div>
          <div class="overview-label">平均评分</div>
        </div>
      </div>

      <!-- 销售图表 -->
      <div class="card card-sales">
        <div class="card-header">
          <div class="card-title">销售趋势</div>
          <div>最近30天</div>
        </div>
        <div class="chart">销售趋势图表</div>
      </div>

      <!-- 流量来源 -->
      <div class="card card-traffic">
        <div class="card-header">
          <div class="card-title">流量来源</div>
          <div>百分比分布</div>
        </div>
        <div class="chart">流量来源饼图</div>
      </div>

      <!-- 用户列表 -->
      <div class="card card-users">
        <div class="card-header">
          <div class="card-title">最近注册用户</div>
          <div>查看全部</div>
        </div>
        <ul class="user-list">
          <li class="user-item">
            <div class="user-avatar">
              <img src="https://picsum.photos/seed/user1/100/100" alt="用户头像">
            </div>
            <div class="user-info">
              <div class="user-name">张三</div>
              <div class="user-email">zhangsan@example.com</div>
            </div>
            <div class="user-status status-active">活跃</div>
          </li>
          <li class="user-item">
            <div class="user-avatar">
              <img src="https://picsum.photos/seed/user2/100/100" alt="用户头像">
            </div>
            <div class="user-info">
              <div class="user-name">李四</div>
              <div class="user-email">lisi@example.com</div>
            </div>
            <div class="user-status status-active">活跃</div>
          </li>
          <li class="user-item">
            <div class="user-avatar">
              <img src="https://picsum.photos/seed/user3/100/100" alt="用户头像">
            </div>
            <div class="user-info">
              <div class="user-name">王五</div>
              <div class="user-email">wangwu@example.com</div>
            </div>
            <div class="user-status status-inactive">非活跃</div>
          </li>
          <li class="user-item">
            <div class="user-avatar">
              <img src="https://picsum.photos/seed/user4/100/100" alt="用户头像">
            </div>
            <div class="user-info">
              <div class="user-name">赵六</div>
              <div class="user-email">zhaoliu@example.com</div>
            </div>
            <div class="user-status status-active">活跃</div>
          </li>
        </ul>
      </div>

      <!-- 最近订单 -->
      <div class="card card-recent">
        <div class="card-header">
          <div class="card-title">最近订单</div>
          <div>查看全部</div>
        </div>
        <table style="width: 100%; border-collapse: collapse;">
          <thead>
            <tr style="border-bottom: 1px solid var(--light);">
              <th style="text-align: left; padding: 10px 0;">订单ID</th>
              <th style="text-align: left; padding: 10px 0;">客户</th>
              <th style="text-align: left; padding: 10px 0;">金额</th>
              <th style="text-align: left; padding: 10px 0;">状态</th>
            </tr>
          </thead>
          <tbody>
            <tr style="border-bottom: 1px solid var(--light);">
              <td style="padding: 10px 0;">#ORD-12345</td>
              <td style="padding: 10px 0;">张三</td>
              <td style="padding: 10px 0;">¥1,299</td>
              <td style="padding: 10px 0;"><span class="user-status status-active">已完成</span></td>
            </tr>
            <tr style="border-bottom: 1px solid var(--light);">
              <td style="padding: 10px 0;">#ORD-12346</td>
              <td style="padding: 10px 0;">李四</td>
              <td style="padding: 10px 0;">¥899</td>
              <td style="padding: 10px 0;"><span class="user-status status-active">已完成</span></td>
            </tr>
            <tr style="border-bottom: 1px solid var(--light);">
              <td style="padding: 10px 0;">#ORD-12347</td>
              <td style="padding: 10px 0;">王五</td>
              <td style="padding: 10px 0;">¥1,599</td>
              <td style="padding: 10px 0;"><span class="user-status status-active">已完成</span></td>
            </tr>
            <tr>
              <td style="padding: 10px 0;">#ORD-12348</td>
              <td style="padding: 10px 0;">赵六</td>
              <td style="padding: 10px 0;">¥2,199</td>
              <td style="padding: 10px 0;"><span class="user-status status-active">已完成</span></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</body>
</html>

高级Flexbox布局 - 电子商务产品展示

下面是一个使用Flexbox创建的电子商务产品展示布局示例，包含响应式导航、产品列表和购物车功能：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>高级Flexbox布局 - 电子商务产品展示</title>
  <style>
    /* 基础样式重置 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Arial', sans-serif;
    }

    :root {
      --primary: #3498db;
      --secondary: #2ecc71;
      --dark: #2c3e50;
      --light: #ecf0f1;
      --danger: #e74c3c;
      --warning: #f39c12;
      --gray: #95a5a6;
      --white: #ffffff;
      --spacing: 20px;
      --border-radius: 8px;
      --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      --transition: all 0.3s ease;
    }

    body {
      background-color: #f5f7fa;
      color: var(--dark);
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 var(--spacing);
    }

    /* 导航栏 */
    .navbar {
      background-color: var(--white);
      box-shadow: var(--shadow);
      position: sticky;
      top: 0;
      z-index: 100;
    }

    .navbar-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 0;
    }

    .logo {
      font-size: 1.5rem;
      font-weight: bold;
      color: var(--primary);
    }

    .nav-links {
      display: flex;
      gap: 25px;
    }

    .nav-link {
      color: var(--dark);
      text-decoration: none;
      font-weight: 500;
      transition: var(--transition);
    }

    .nav-link:hover {
      color: var(--primary);
    }

    .nav-actions {
      display: flex;
      gap: 20px;
      align-items: center;
    }

    .search-box {
      display: flex;
      align-items: center;
      background-color: var(--light);
      border-radius: 20px;
      padding: 5px 15px;
      width: 250px;
    }

    .search-input {
      background: none;
      border: none;
      outline: none;
      flex: 1;
      padding: 5px 0;
    }

    .cart-icon {
      position: relative;
      font-size: 1.2rem;
      cursor: pointer;
    }

    .cart-count {
      position: absolute;
      top: -8px;
      right: -8px;
      width: 18px;
      height: 18px;
      background-color: var(--danger);
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.7rem;
      font-weight: bold;
    }

    /* 英雄区 */
    .hero {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 60vh;
      background-color: var(--light);
      margin: var(--spacing) 0;
      border-radius: var(--border-radius);
      overflow: hidden;
    }

    .hero-content {
      flex: 1;
      padding: 0 var(--spacing);
    }

    .hero-title {
      font-size: 2.5rem;
      margin-bottom: 15px;
      line-height: 1.2;
    }

    .hero-subtitle {
      font-size: 1.1rem;
      color: var(--gray);
      margin-bottom: 25px;
      max-width: 80%;
    }

    .hero-button {
      padding: 12px 25px;
      background-color: var(--primary);
      color: white;
      border: none;
      border-radius: var(--border-radius);
      font-size: 1rem;
      font-weight: 500;
      cursor: pointer;
      transition: var(--transition);
    }

    .hero-button:hover {
      background-color: #2980b9;
      transform: translateY(-3px);
    }

    .hero-image {
      flex: 1;
      height: 100%;
    }

    .hero-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* 产品区域 */
    .products-section {
      margin: 50px 0;
    }

    .section-title {
      font-size: 1.8rem;
      margin-bottom: 30px;
      position: relative;
      padding-bottom: 10px;
    }

    .section-title::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 80px;
      height: 3px;
      background-color: var(--primary);
    }

    .products-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 25px;
      margin-bottom: 30px;
    }

    .product-card {
      flex: 1 1 250px;
      max-width: calc(25% - 25px);
      background-color: var(--white);
      border-radius: var(--border-radius);
      overflow: hidden;
      box-shadow: var(--shadow);
      transition: var(--transition);
      display: flex;
      flex-direction: column;
    }

    .product-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }

    .product-image {
      height: 200px;
      overflow: hidden;
    }

    .product-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: var(--transition);
    }

    .product-card:hover .product-image img {
      transform: scale(1.05);
    }

    .product-details {
      padding: 15px;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
    }

    .product-name {
      font-size: 1.1rem;
      font-weight: 600;
      margin-bottom: 10px;
    }

    .product-description {
      font-size: 0.9rem;
      color: var(--gray);
      margin-bottom: 15px;
      flex-grow: 1;
    }

    .product-price {
      font-size: 1.2rem;
      font-weight: bold;
      color: var(--primary);
      margin-bottom: 15px;
    }

    .product-actions {
      display: flex;
      gap: 10px;
    }

    .add-to-cart {
      flex: 1;
      padding: 10px;
      background-color: var(--primary);
      color: white;
      border: none;
      border-radius: var(--border-radius);
      cursor: pointer;
      transition: var(--transition);
    }

    .add-to-cart:hover {
      background-color: #2980b9;
    }

    .view-details {
      padding: 10px;
      background-color: var(--light);
      color: var(--dark);
      border: none;
      border-radius: var(--border-radius);
      cursor: pointer;
      transition: var(--transition);
    }

    .view-details:hover {
      background-color: #d6dbdf;
    }

    /* 页脚 */
    .footer {
      background-color: var(--dark);
      color: var(--white);
      padding: 50px 0;
      margin-top: 50px;
    }

    .footer-container {
      display: flex;
      flex-wrap: wrap;
      gap: 50px;
    }

    .footer-column {
      flex: 1 1 200px;
    }

    .footer-title {
      font-size: 1.2rem;
      margin-bottom: 20px;
      position: relative;
      padding-bottom: 10px;
    }

    .footer-title::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 40px;
      height: 2px;
      background-color: var(--primary);
    }

    .footer-links {
      list-style: none;
    }

    .footer-link {
      margin-bottom: 10px;
    }

    .footer-link a {
      color: var(--light);
      text-decoration: none;
      transition: var(--transition);
    }

    .footer-link a:hover {
      color: var(--primary);
    }

    .copyright {
      text-align: center;
      padding-top: 30px;
      margin-top: 30px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      font-size: 0.9rem;
      color: var(--gray);
    }

    /* 响应式断点 */
    @media (max-width: 1024px) {
      .product-card {
        max-width: calc(33.33% - 25px);
      }
    }

    @media (max-width: 768px) {
      .nav-links {
        display: none;
      }

      .search-box {
        width: 200px;
      }

      .hero {
        flex-direction: column;
        height: auto;
        text-align: center;
      }

      .hero-content {
        padding: 40px 20px;
        order: 2;
      }

      .hero-title {
        font-size: 2rem;
      }

      .hero-subtitle {
        max-width: 100%;
      }

      .hero-image {
        order: 1;
        width: 100%;
        height: 300px;
      }

      .product-card {
        max-width: calc(50% - 25px);
      }
    }

    @media (max-width: 480px) {
      .navbar-container {
        flex-wrap: wrap;
        gap: 15px;
      }

      .search-box {
        width: 100%;
        order: 3;
      }

      .product-card {
        max-width: 100%;
      }
    }
  </style>
</head>
<body>
  <!-- 导航栏 -->
  <nav class="navbar">
    <div class="container navbar-container">
      <div class="logo">ShopEase</div>
      <div class="nav-links">
        <a href="#" class="nav-link">首页</a>
        <a href="#" class="nav-link">产品</a>
        <a href="#" class="nav-link">分类</a>
        <a href="#" class="nav-link">特惠</a>
        <a href="#" class="nav-link">关于我们</a>
      </div>
      <div class="nav-actions">
        <div class="search-box">
          <input type="text" class="search-input" placeholder="搜索产品...">
          <span>🔍</span>
        </div>
        <div class="cart-icon">
          🛒
          <span class="cart-count">3</span>
        </div>
      </div>
    </div>
  </nav>

  <!-- 英雄区 -->
  <section class="hero">
    <div class="hero-content">
      <h1 class="hero-title">发现您的完美产品</h1>
      <p class="hero-subtitle">探索我们精心挑选的产品系列，满足您的各种需求，质量保证，价格优惠。</p>
      <button class="hero-button">立即购物</button>
    </div>
    <div class="hero-image">
      <img src="https://picsum.photos/seed/hero/800/600" alt="英雄区图片">
    </div>
  </section>

  <!-- 产品区域 -->
  <section class="products-section container">
    <h2 class="section-title">热门产品</h2>
    <div class="products-grid">
      <div class="product-card">
        <div class="product-image">
          <img src="https://picsum.photos/seed/product1/400/300" alt="产品图片">
        </div>
        <div class="product-details">
          <div class="product-name">无线蓝牙耳机</div>
          <div class="product-description">高品质无线蓝牙耳机，降噪功能，长达24小时续航。</div>
          <div class="product-price">¥299</div>
          <div class="product-actions">
            <button class="add-to-cart">加入购物车</button>
            <button class="view-details">查看详情</button>
          </div>
        </div>
      </div>
      <div class="product-card">
        <div class="product-image">
          <img src="https://picsum.photos/seed/product2/400/300" alt="产品图片">
        </div>
        <div class="product-details">
          <div class="product-name">智能手表</div>
          <div class="product-description">多功能智能手表，心率监测，运动追踪，防水设计。</div>
          <div class="product-price">¥899</div>
          <div class="product-actions">
            <button class="add-to-cart">加入购物车</button>
            <button class="view-details">查看详情</button>
          </div>
        </div>
      </div>
      <div class="product-card">
        <div class="product-image">
          <img src="https://picsum.photos/seed/product3/400/300" alt="产品图片">
        </div>
        <div class="product-details">
          <div class="product-name">机械键盘</div>
          <div class="product-description">青轴机械键盘，RGB背光，全键无冲，游戏办公皆宜。</div>
          <div class="product-price">¥499</div>
          <div class="product-actions">
            <button class="add-to-cart">加入购物车</button>
            <button class="view-details">查看详情</button>
          </div>
        </div>
      </div>
      <div class="product-card">
        <div class="product-image">
          <img src="https://picsum.photos/seed/product4/400/300" alt="产品图片">
        </div>
        <div class="product-details">
          <div class="product-name">便携充电宝</div>
          <div class="product-description">20000mAh大容量充电宝，双向快充，小巧便携。</div>
          <div class="product-price">¥129</div>
          <div class="product-actions">
            <button class="add-to-cart">加入购物车</button>
            <button class="view-details">查看详情</button>
          </div>
        </div>
      </div>
      <div class="product-card">
        <div class="product-image">
          <img src="https://picsum.photos/seed/product5/400/300" alt="产品图片">
        </div>
        <div class="product-details">
          <div class="product-name">智能音箱</div>
          <div class="product-description">AI智能音箱，语音助手，高品质音效，智能家居控制。</div>
          <div class="product-price">¥399</div>
          <div class="product-actions">
            <button class="add-to-cart">加入购物车</button>
            <button class="view-details">查看详情</button>
          </div>
        </div>
      </div>
      <div class="product-card">
        <div class="product-image">
          <img src="https://picsum.photos/seed/product6/400/300" alt="产品图片">
        </div>
        <div class="product-details">
          <div class="product-name">高清投影仪</div>
          <div class="product-description">1080P高清投影仪，智能系统，家用办公两相宜。</div>
          <div class="product-price">¥2499</div>
          <div class="product-actions">
            <button class="add-to-cart">加入购物车</button>
            <button class="view-details">查看详情</button>
          </div>
        </div>
      </div>
      <div class="product-card">
        <div class="product-image">
          <img src="https://picsum.photos/seed/product7/400/300" alt="产品图片">
        </div>
        <div class="product-details">
          <div class="product-name">游戏鼠标</div>
          <div class="product-description">专业游戏鼠标，RGB背光，可调节DPI，人体工学设计。</div>
          <div class="product-price">¥199</div>
          <div class="product-actions">
            <button class="add-to-cart">加入购物车</button>
            <button class="view-details">查看详情</button>
          </div>
        </div>
      </div>
      <div class="product-card">
        <div class="product-image">
          <img src="https://picsum.photos/seed/product8/400/300" alt="产品图片">
        </div>
        <div class="product-details">
          <div class="product-name">无线充电器</div>
          <div class="product-description">15W快速无线充电器，支持多种设备，智能识别。</div>
          <div class="product-price">¥89</div>
          <div class="product-actions">
            <button class="add-to-cart">加入购物车</button>
            <button class="view-details">查看详情</button>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 页脚 -->
  <footer class="footer">
    <div class="container footer-container">
      <div class="footer-column">
        <h3 class="footer-title">关于我们</h3>
        <ul class="footer-links">
          <li class="footer-link"><a href="#">公司简介</a></li>
          <li class="footer-link"><a href="#">联系我们</a></li>
          <li class="footer-link"><a href="#">加入我们</a></li>
          <li class="footer-link"><a href="#">隐私政策</a></li>
        </ul>
      </div>
      <div class="footer-column">
        <h3 class="footer-title">客户服务</h3>
        <ul class="footer-links">
          <li class="footer-link"><a href="#">帮助中心</a></li>
          <li class="footer-link"><a href="#">订单查询</a></li>
          <li class="footer-link"><a href="#">退换货政策</a></li>
          <li class="footer-link"><a href="#">配送信息</a></li>
        </ul>
      </div>
      <div class="footer-column">
        <h3 class="footer-title">支付方式</h3>
        <ul class="footer-links">
          <li class="footer-link"><a href="#">支付宝</a></li>
          <li class="footer-link"><a href="#">微信支付</a></li>
          <li class="footer-link"><a href="#">银行卡</a></li>
          <li class="footer-link"><a href="#">货到付款</a></li>
        </ul>
      </div>
      <div class="footer-column">
        <h3 class="footer-title">关注我们</h3>
        <ul class="footer-links">
          <li class="footer-link"><a href="#">微信公众号</a></li>
          <li class="footer-link"><a href="#">微博</a></li>
          <li class="footer-link"><a href="#">抖音</a></li>
          <li class="footer-link"><a href="#">小红书</a></li>
        </ul>
      </div>
    </div>
    <div class="container copyright">
      &copy; 2023 ShopEase 电子商务平台. 保留所有权利.
    </div>
  </footer>
</body>
</html>

布局技术选择与最佳实践

布局技术对比

布局技术	适用场景	优点	缺点
流动布局	简单内容展示	默认行为，无需额外代码	缺乏灵活性，难以实现复杂布局
浮动布局	图文混排、简单多列	实现简单，兼容性好	需要清除浮动，复杂布局易出问题
定位布局	精确位置控制	定位精确，层级分明	脱离文档流，可能导致重叠问题
Flexbox	一维布局、组件对齐	强大的对齐能力，简化代码	一维限制，复杂二维布局不够灵活
Grid	二维布局、复杂页面结构	强大的二维布局能力，语义化	浏览器兼容性略差（IE不完全支持）

Grid和Flexbox的选择策略

当需要二维布局时，选择CSS Grid
当需要一维布局时，选择Flexbox
两者可以结合使用，Grid用于大布局，Flexbox用于组件内部布局
对于复杂的响应式设计，可以使用Grid的auto-fit和minmax组合

响应式布局策略

使用媒体查询(@media)适配不同屏幕尺寸
使用相对单位(rem, em, %, vw, vh)代替固定单位
使用Flexbox和Grid创建灵活的布局结构
图片使用max-width: 100%确保自适应
设计移动优先的布局，然后向上扩展
使用CSS Grid的auto-fit和minmax实现自动调整的列

高级布局技巧

使用Grid的命名区域提高代码可读性
使用Flexbox的flex属性实现灵活的空间分配
结合媒体查询实现完全响应式布局
使用CSS变量(自定义属性)简化布局维护
利用object-fit和object-position控制图片布局

常见布局问题解决

垂直居中：使用Flexbox的align-items: center或Grid的place-items: center
响应式间距：使用Grid的gap属性结合媒体查询
等高列：Grid默认创建等高列，Flexbox可以使用align-items: stretch
内容溢出：使用minmax和auto值确保内容有足够空间

最佳实践

根据具体需求选择合适的布局技术
优先使用现代布局技术(Flexbox, Grid)而非传统布局技术(float, position)
保持布局代码简洁，避免不必要的嵌套
使用语义化的HTML结构配合CSS布局
实现响应式设计，适配不同设备
测试布局在不同浏览器和设备上的表现
使用CSS预处理器的混合宏(mixin)复用布局代码
考虑无障碍性，确保布局不影响键盘导航和屏幕阅读器

工具推荐

Grid Garden：学习CSS Grid的互动游戏
Flexbox Froggy：学习Flexbox的互动游戏
CSS Grid Generator：可视化Grid布局生成器
Firefox Grid Inspector：调试Grid布局的浏览器工具
Chrome DevTools：包含Flexbox和Grid调试工具
CSS Layout Patterns：布局模式参考

介绍​

基础布局原理​

流动布局 (Normal Flow)​

​

浮动布局 (Float)​

定位布局 (Position)​

现代布局技术​

Flexbox布局​

Grid布局​

高级布局实例​

高级CSS Grid布局 - 响应式仪表板​

高级Flexbox布局 - 电子商务产品展示​

布局技术选择与最佳实践​

布局技术对比​

Grid和Flexbox的选择策略​

响应式布局策略​

高级布局技巧​

常见布局问题解决​

最佳实践​

工具推荐​

介绍

基础布局原理

流动布局 (Normal Flow)

浮动布局 (Float)

定位布局 (Position)

现代布局技术

Flexbox布局

Grid布局

高级布局实例

高级CSS Grid布局 - 响应式仪表板

高级Flexbox布局 - 电子商务产品展示

布局技术选择与最佳实践

布局技术对比

Grid和Flexbox的选择策略

响应式布局策略

高级布局技巧

常见布局问题解决

最佳实践

工具推荐