【技术专题】CSS3 网页技术 - CSS3 布局进阶

大家好，我是Java1234_小锋老师，最近更新《一天学会 CSS3 视频教程(无废话版) 》专辑，感谢大家支持。

本课程主要介绍和讲解 CSS3简介，CSS3 入门，CSS3 选择器与优先级，CSS3 单位、颜色、字体与文本，CSS3 盒模型与基础样式，CSS3 布局基础，CSS3 布局进阶，CSS3 视觉增强，CSS3 变换与动画，CSS3 函数与变量，CSS3 响应式与移动端适配，CSS3 工程化与最佳实践。

视频教程+课件+源码打包下载：

链接：https://pan.baidu.com/s/1o-zRfndo1HHrS_uFroOiCw?pwd=1234

提取码：1234

CSS3（在第二阶段目录里）

CSS3 布局进阶

一、Flexbox 弹性布局

Flexbox 适合一行或一列的元素排列。设置 display:flex 后，父元素成为 Flex 容器 ，直接子元素成为 Flex 项目 。

主轴由 flex-direction 决定，justify-content 控制主轴对齐，align-items 控制交叉轴对齐。

1. Flex 容器属性

复制代码

.container {
  display: flex;              /* 或 inline-flex */
  flex-direction: row;        /* 主轴方向 */
  flex-wrap: wrap;            /* 是否换行 */
  justify-content: space-between; /* 主轴对齐 */
  align-items: center;        /* 单行交叉轴对齐 */
  align-content: flex-start;  /* 多行交叉轴整体对齐 */
}

属性	作用	常用值
`display: flex`	声明 Flex 容器，子元素变成 Flex 项目	`flex`、`inline-flex`
`flex-direction`	决定主轴方向	`row`、`row-reverse`、`column`、`column-reverse`
`justify-content`	项目在主轴上的对齐方式	`flex-start`、`flex-end`、`center`、`space-between`、`space-around`、`space-evenly`
`align-items`	项目在交叉轴上的对齐方式，单行有效	`stretch`、`flex-start`、`flex-end`、`center`、`baseline`
`flex-wrap`	是否换行	`nowrap`、`wrap`、`wrap-reverse`
`align-content`	多行/多列时，行与行之间的整体对齐	`stretch`、`flex-start`、`flex-end`、`center`、`space-between`、`space-around`、`space-evenly`

注意：align-content 只有在 flex-wrap: wrap 且出现多行时才明显生效。

2. Flex 项目属性

复制代码

.item {
  flex: 1 1 200px;   /* grow shrink basis */
  order: 2;          /* 排序，数字越小越靠前 */
  align-self: flex-end; /* 单独覆盖 align-items */
}

属性	作用	说明
`flex`	`flex-grow`、`flex-shrink`、`flex-basis` 的简写	`flex:1` 约等于 `1 1 0%`；`flex:none` 等于 `0 0 auto`
`flex-grow`	放大比例	默认 `0`，有剩余空间时按比例放大
`flex-shrink`	收缩比例	默认 `1`，空间不足时按比例收缩
`flex-basis`	主轴方向上的初始尺寸	默认 `auto`，可写 `200px`、`30%`、`0`
`align-self`	单个项目覆盖容器的 `align-items`	`auto`、`flex-start`、`flex-end`、`center`、`baseline`、`stretch`
`order`	控制项目视觉顺序	默认 `0`，可为负数

示例：响应式卡片列表。

复制代码

.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.card {
  flex: 1 1 260px;
}

二、Grid 网格布局

Grid 是二维布局，同时控制行和列。它适合页面整体框架、卡片网格、仪表盘等。

1. Grid 容器属性

复制代码

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 80px auto 60px;
  gap: 16px;
  justify-items: center;
  align-items: center;
}

属性	作用	常用值
`grid-template-columns`	定义列轨道	`100px 1fr 2fr`、`repeat(3, 1fr)`、`minmax(200px, 1fr)`
`grid-template-rows`	定义行轨道	`80px auto 60px`、`repeat(2, 1fr)`
`gap`	行列间距简写	`gap: 16px`、`gap: 16px 24px`，即行间距、列间距
`justify-items`	项目在单元格内的水平对齐	`start`、`end`、`center`、`stretch`
`align-items`	项目在单元格内的垂直对齐	`start`、`end`、`center`、`stretch`

fr 是 Grid 常用单位，表示剩余空间分配比例。

响应式网格常用写法：

复制代码

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

2. Grid 项目属性

复制代码

.item {
  grid-column: 1 / 3;      /* 从第 1 条列线到第 3 条列线，跨 2 列 */
  grid-row: 2 / 3;         /* 从第 2 条行线到第 3 条行线 */
  grid-area: 1 / 1 / 3 / 3; /* 行开始 / 列开始 / 行结束 / 列结束 */
}

属性	作用	示例
`grid-column`	控制项目跨越哪些列	`1 / 3`、`2 / span 2`
`grid-row`	控制项目跨越哪些行	`1 / 3`、`2 / span 2`
`grid-area`	简写或指定命名区域	`1 / 1 / 3 / 3`、`header`

grid-area 也可以配合命名区域：

复制代码

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

三、多列布局

多列布局适合文章、新闻、杂志式文本分栏。

复制代码

.article {
  columns: 3 200px;        /* 最多 3 列，每列最小约 200px */
  column-gap: 24px;        /* 列间距 */
  column-rule: 1px solid #ddd; /* 列之间的分隔线 */
}

属性	作用	说明
`columns`	`column-count` 和 `column-width` 的简写	如 `columns: 3`、`columns: 200px`、`columns: 3 200px`
`column-gap`	列与列之间的间距	如 `24px`、`2em`
`column-rule`	列之间的分隔线	类似边框，如 `1px solid #ccc`

还可配合 break-inside: avoid 防止某块内容被拆到两列：

复制代码

.article .block {
  break-inside: avoid;
}

四、响应式布局与媒体查询 @media

响应式布局的目标是让页面在不同屏幕宽度下都能良好显示。常用方式是"移动优先"：先写移动端样式，再用 min-width 逐步增强。

复制代码

.card {
  width: 100%;
}

@media (min-width: 768px) {
  .card {
    width: 50%;
  }
}

@media (min-width: 1024px) {
  .card {
    width: 33.333%;
  }
}

常见语法：

复制代码

@media screen and (max-width: 600px) {
  .nav {
    flex-direction: column;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .container {
    grid-template-columns: 200px 1fr;
  }
}

可用的媒体特性包括：

width、min-width、max-width
orientation: portrait / landscape
prefers-color-scheme: dark / light
hover、pointer
resolution

实际开发中，断点应根据内容决定，常见参考：576px、768px、992px、1200px。

五、移动端 viewport 与适配

1. viewport 设置

移动端页面必须写：

复制代码

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

含义：

width=device-width：布局视口等于设备宽度。
initial-scale=1.0：初始缩放比例为 1。
viewport-fit=cover：适配刘海屏、全面屏，让页面覆盖安全区。

不推荐随意使用 user-scalable=no，会影响可访问性。

2. 常用适配方案

全局盒模型：

复制代码

* {
  box-sizing: border-box;
}

图片适配：

复制代码

img {
  max-width: 100%;
  height: auto;
  display: block;
}

相对单位：

复制代码

.box {
  width: min(100%, 600px);
  padding: clamp(12px, 2vw, 24px);
  font-size: clamp(14px, 2.5vw, 18px);
}

rem 方案：

复制代码

html {
  font-size: 16px;
}

@media (max-width: 375px) {
  html {
    font-size: 14px;
  }
}

vw 方案常用于 H5：

复制代码

html {
  font-size: calc(100vw / 7.5); /* 设计稿 750px 时，1rem 约等于 100px */
}

安全区适配：

复制代码

.footer {
  padding-bottom: env(safe-area-inset-bottom);
}

触摸目标建议至少 44px，避免太小导致误触。

六、综合实例

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!-- 第五节：移动端 viewport 与适配 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>CSS3 布局综合示例</title>
<style>
  /* ================= 基础与移动端适配 ================= */
  *, *::before, *::after { box-sizing: border-box; }

  :root {
    --bg: #f5f7fa;
    --card: #ffffff;
    --text: #1f2933;
    --muted: #64748b;
    --line: #e2e8f0;
    --primary: #2f6fed;
    --tag-bg: #eef4ff;
    --note-bg: #f8fafc;
    --radius: 12px;
    --shadow: 0 1px 3px rgba(15, 23, 42, .08);
  }

  html { font-size: 16px; }

  body {
    margin: 0;
    padding: clamp(12px, 3vw, 24px);
    /* 安全区适配：避开全面屏底部小黑条 */
    padding-bottom: calc(clamp(12px, 3vw, 24px) + env(safe-area-inset-bottom));
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
  }

  img { max-width: 100%; height: auto; display: block; }
  code { font-size: .9em; padding: 1px 5px; border-radius: 4px; background: var(--tag-bg); color: var(--primary); }

  /* ================= Grid：页面骨架 ================= */
  .page {
    display: grid;
    gap: clamp(12px, 2vw, 20px);
    max-width: 1200px;
    margin: 0 auto;
    grid-template-areas:
      "header"
      "sidebar"
      "main"
      "footer";
  }

  .site-header { grid-area: header; }
  .sidebar     { grid-area: sidebar; }
  .main        { grid-area: main; min-width: 0; }
  .site-footer { grid-area: footer; }

  /* ================= Flexbox：顶栏 ================= */
  .site-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }

  .logo {
    font-weight: 700;
    font-size: clamp(16px, 2.4vw, 20px);
    color: var(--primary);
    white-space: nowrap;
  }

  .nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .nav a {
    display: block;
    padding: 6px 12px;
    border-radius: 999px;
    color: var(--muted);
    text-decoration: none;
    font-size: 14px;
  }

  .nav a:hover { background: var(--tag-bg); color: var(--primary); }

  /* Flex 项目属性 order：把它排到最后 */
  .nav .push-last { order: 1; }

  /* ================= 侧边栏 ================= */
  .sidebar {
    padding: 16px 18px;
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }

  .sidebar h2 {
    margin: 0 0 10px;
    font-size: 14px;
    color: var(--muted);
    letter-spacing: .06em;
  }

  .sidebar ul { margin: 0; padding-left: 18px; font-size: 14px; color: var(--muted); }
  .sidebar li + li { margin-top: 6px; }

  /* ================= Flex 项目属性：卡片列表 ================= */
  .cards {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: clamp(12px, 2vw, 20px);
  }

  .card {
    /* flex-grow | flex-shrink | flex-basis */
    flex: 1 1 200px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px;
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }

  .card .icon { font-size: 22px; line-height: 1; }
  .card h3 { margin: 0; font-size: 16px; }
  .card p { margin: 0; font-size: 14px; color: var(--muted); }

  .card .tag {
    align-self: flex-end;   /* align-self：单独覆盖容器的交叉轴对齐 */
    margin-top: auto;       /* 把标签推到底部 */
    padding: 2px 10px;
    font-size: 12px;
    border-radius: 999px;
    background: var(--tag-bg);
    color: var(--primary);
    white-space: nowrap;
  }

  /* ================= 多列布局：正文 ================= */
  .article {
    padding: clamp(18px, 3vw, 28px);
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }

  .article h2 { margin: 0 0 12px; font-size: clamp(18px, 2.6vw, 22px); }

  .article-body {
    columns: 1;                    /* 移动端单列 */
    column-gap: 28px;
    column-rule: 1px solid var(--line);
  }

  .article-body p { margin: 0 0 1em; font-size: 15px; color: var(--muted); }

  .note {
    break-inside: avoid;           /* 防止被拆到两列 */
    margin: 0 0 1em;
    padding: 12px 14px;
    background: var(--note-bg);
    border-left: 3px solid var(--primary);
    border-radius: 6px;
    font-size: 14px;
    color: var(--text);
  }

  /* ================= 页脚 ================= */
  .site-footer {
    padding: 16px 20px;
    text-align: center;
    font-size: 13px;
    color: var(--muted);
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }

  /* ================= 响应式：@media ================= */
  @media (min-width: 768px) {
    .article-body { columns: 2 260px; }
  }

  @media (min-width: 900px) {
    .page {
      grid-template-columns: 240px minmax(0, 1fr);
      grid-template-areas:
        "header  header"
        "sidebar main"
        "footer  footer";
    }
  }

  @media (min-width: 1200px) {
    .article-body { columns: 3 240px; }
  }

  /* 媒体特性：跟随系统深色模式 */
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #0f172a;
      --card: #1e293b;
      --text: #e2e8f0;
      --muted: #94a3b8;
      --line: #334155;
      --primary: #7aa2f7;
      --tag-bg: #253046;
      --note-bg: #172033;
      --shadow: 0 1px 3px rgba(0, 0, 0, .4);
    }
  }
</style>
</head>
<body>

<div class="page">

  <!-- 顶栏：Flexbox 容器 + order -->
  <header class="site-header">
    <div class="logo">CSS3 布局</div>
    <ul class="nav">
      <li><a href="#">首页</a></li>
      <li class="push-last"><a href="#">关于</a></li>
      <li><a href="#">文档</a></li>
      <li><a href="#">示例</a></li>
    </ul>
  </header>

  <!-- 侧边栏：Grid 命名区域 -->
  <aside class="sidebar">
    <h2>本节内容</h2>
    <ul>
      <li>Flexbox 弹性布局</li>
      <li>Grid 网格布局</li>
      <li>多列布局</li>
      <li>媒体查询 @media</li>
      <li>viewport 与移动端适配</li>
    </ul>
  </aside>

  <main class="main">

    <!-- 卡片列表：Flex 项目属性 -->
    <section class="cards">
      <article class="card">
        <span class="icon">📐</span>
        <h3>Flexbox</h3>
        <p>一维布局，通过主轴与交叉轴控制对齐和伸缩。</p>
        <span class="tag">flex: 1 1 200px</span>
      </article>

      <article class="card">
        <span class="icon">🔲</span>
        <h3>Grid</h3>
        <p>二维布局，同时定义行与列，适合页面骨架。</p>
        <span class="tag">grid-area</span>
      </article>

      <article class="card">
        <span class="icon">📰</span>
        <h3>多列布局</h3>
        <p>长文本自动分栏，适合文章与杂志式排版。</p>
        <span class="tag">columns</span>
      </article>

      <article class="card">
        <span class="icon">📱</span>
        <h3>响应式</h3>
        <p>媒体查询配合 viewport，适配各种屏幕尺寸。</p>
        <span class="tag">@media</span>
      </article>
    </section>

    <!-- 正文：多列布局 -->
    <section class="article">
      <h2>这个页面用到了哪些布局</h2>
      <div class="article-body">
        <p>
          整个页面把前面五节的内容合在了一起：页面骨架用 Grid 的命名区域，
          顶栏和卡片列表用 Flexbox，正文用多列布局，整体用媒体查询做响应式，
          并通过 viewport 与相对单位完成移动端适配。
        </p>

        <p>
          拖动浏览器窗口改变宽度可以观察变化：小于 768px 时正文单列、侧边栏在主体上方；
          768px 以上正文变成两列；900px 以上侧边栏移到左侧，页面变成两栏结构；
          1200px 以上正文进一步变成三列。
        </p>

        <div class="note">
          <strong>提示：</strong>卡片使用 <code>flex: 1 1 200px</code>，
          空间充足时自动放大，空间不足时自动换行。
        </div>

        <p>
          Grid 容器的 <code>grid-template-areas</code> 让布局结构在 CSS 里一目了然，
          配合媒体查询可以整体切换页面骨架，比逐个调整元素位置清晰得多。
        </p>

        <p>
          多列布局中的 <code>column-rule</code> 只是视觉分隔线，不占布局空间；
          <code>break-inside: avoid</code> 可以防止提示块被拆分到两列，
          保证小块内容始终完整显示。
        </p>

        <p>
          移动端适配方面，viewport 中的 <code>viewport-fit=cover</code>
          配合 <code>env(safe-area-inset-bottom)</code>，
          可以让内容避开全面屏底部的小黑条；字号和间距使用
          <code>clamp()</code> 随视口平滑变化。
        </p>

        <p>
          当系统开启深色模式时，<code>prefers-color-scheme</code>
          会自动切换配色变量，无需额外 JavaScript。
        </p>
      </div>
    </section>

  </main>

  <footer class="site-footer">
    © 2024 CSS3 布局综合示例 · 拖动窗口宽度查看响应式效果
  </footer>

</div>

</body>
</html>

【技术专题】CSS3 网页技术 - CSS3 布局进阶

视频教程+课件+源码 打包下载 ：

CSS3 布局进阶

一、Flexbox 弹性布局

1. Flex 容器属性

2. Flex 项目属性

二、Grid 网格布局

1. Grid 容器属性

2. Grid 项目属性

三、多列布局

四、响应式布局与媒体查询 @media

五、移动端 viewport 与适配

1. viewport 设置

2. 常用适配方案

六、综合实例

视频教程+课件+源码打包下载：