布局

本章将介绍CSS布局技术，包括传统的布局方式和现代的Flexbox、Grid布局。

布局概述

CSS布局是指控制元素在页面上的位置和大小。常见的布局方式包括：

普通流（Normal Flow）：默认的布局方式
浮动布局（Float）：传统的布局方式
定位布局（Position）：精确定位元素
Flexbox布局：一维弹性布局
Grid布局：二维网格布局

display属性

display是控制布局的核心属性：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>display属性示例</title>
    <style>
        /* 块级元素 */
        .block {
            display: block;
            background-color: #4CAF50;
            margin: 5px;
            padding: 10px;
        }
        
        /* 行内元素 */
        .inline {
            display: inline;
            background-color: #2196F3;
            padding: 5px;
        }
        
        /* 行内块元素 */
        .inline-block {
            display: inline-block;
            background-color: #FF9800;
            width: 100px;
            height: 50px;
            margin: 5px;
        }
        
        /* Flex容器 */
        .flex {
            display: flex;
            background-color: #f5f5f5;
            padding: 10px;
        }
        
        /* Grid容器 */
        .grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            background-color: #f5f5f5;
            padding: 10px;
        }
        
        /* 隐藏元素 */
        .none {
            display: none;
        }
    </style>
</head>
<body>
    <h3>block - 块级元素</h3>
    <div class="block">块级元素1</div>
    <div class="block">块级元素2</div>
    
    <h3>inline - 行内元素</h3>
    <span class="inline">行内元素1</span>
    <span class="inline">行内元素2</span>
    
    <h3>inline-block - 行内块元素</h3>
    <div class="inline-block">行内块1</div>
    <div class="inline-block">行内块2</div>
    
    <h3>flex - 弹性布局</h3>
    <div class="flex">
        <div class="inline-block">项目1</div>
        <div class="inline-block">项目2</div>
        <div class="inline-block">项目3</div>
    </div>
    
    <h3>grid - 网格布局</h3>
    <div class="grid">
        <div class="inline-block">项目1</div>
        <div class="inline-block">项目2</div>
        <div class="inline-block">项目3</div>
        <div class="inline-block">项目4</div>
        <div class="inline-block">项目5</div>
        <div class="inline-block">项目6</div>
    </div>
</body>
</html>

Flexbox布局

Flexbox（弹性盒子）是一种一维布局模型，适合处理一行或一列的布局。

基本概念

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Flexbox基本概念</title>
    <style>
        .container {
            display: flex;              /* 创建flex容器 */
            border: 2px solid #333;
            padding: 10px;
            margin-bottom: 20px;
        }
        
        .item {
            background-color: #4CAF50;
            color: white;
            padding: 20px;
            margin: 5px;
            border-radius: 4px;
        }
        
        /* 说明样式 */
        .label {
            font-weight: bold;
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
    <p class="label">Flex容器（display: flex）</p>
    <div class="container">
        <div class="item">项目1</div>
        <div class="item">项目2</div>
        <div class="item">项目3</div>
    </div>
    <p>主轴（main axis）：项目排列的方向（默认水平）</p>
    <p>交叉轴（cross axis）：与主轴垂直的方向</p>
</body>
</html>

flex-direction（主轴方向）

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>flex-direction示例</title>
    <style>
        .container {
            display: flex;
            border: 2px solid #333;
            padding: 10px;
            margin-bottom: 10px;
        }
        
        .item {
            background-color: #4CAF50;
            color: white;
            padding: 15px;
            margin: 5px;
            border-radius: 4px;
        }
        
        /* 水平方向，从左到右（默认） */
        .row {
            flex-direction: row;
        }
        
        /* 水平方向，从右到左 */
        .row-reverse {
            flex-direction: row-reverse;
        }
        
        /* 垂直方向，从上到下 */
        .column {
            flex-direction: column;
        }
        
        /* 垂直方向，从下到上 */
        .column-reverse {
            flex-direction: column-reverse;
        }
    </style>
</head>
<body>
    <h3>flex-direction: row（默认）</h3>
    <div class="container row">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    
    <h3>flex-direction: row-reverse</h3>
    <div class="container row-reverse">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    
    <h3>flex-direction: column</h3>
    <div class="container column">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    
    <h3>flex-direction: column-reverse</h3>
    <div class="container column-reverse">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>

justify-content（主轴对齐）

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>justify-content示例</title>
    <style>
        .container {
            display: flex;
            border: 2px solid #333;
            padding: 10px;
            margin-bottom: 10px;
        }
        
        .item {
            background-color: #4CAF50;
            color: white;
            padding: 15px 25px;
            margin: 5px;
            border-radius: 4px;
        }
        
        /* 从起点开始排列 */
        .flex-start {
            justify-content: flex-start;
        }
        
        /* 从终点开始排列 */
        .flex-end {
            justify-content: flex-end;
        }
        
        /* 居中排列 */
        .center {
            justify-content: center;
        }
        
        /* 两端对齐，项目间隔相等 */
        .space-between {
            justify-content: space-between;
        }
        
        /* 两侧间隔相等 */
        .space-around {
            justify-content: space-around;
        }
        
        /* 所有间隔相等 */
        .space-evenly {
            justify-content: space-evenly;
        }
    </style>
</head>
<body>
    <h3>justify-content: flex-start（默认）</h3>
    <div class="container flex-start">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    
    <h3>justify-content: flex-end</h3>
    <div class="container flex-end">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    
    <h3>justify-content: center</h3>
    <div class="container center">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    
    <h3>justify-content: space-between</h3>
    <div class="container space-between">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    
    <h3>justify-content: space-around</h3>
    <div class="container space-around">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    
    <h3>justify-content: space-evenly</h3>
    <div class="container space-evenly">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>

align-items（交叉轴对齐）

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>align-items示例</title>
    <style>
        .container {
            display: flex;
            height: 150px;
            border: 2px solid #333;
            padding: 10px;
            margin-bottom: 10px;
        }
        
        .item {
            background-color: #4CAF50;
            color: white;
            padding: 15px;
            margin: 5px;
            border-radius: 4px;
        }
        
        .item:nth-child(2) {
            padding: 30px 15px;
        }
        
        /* 拉伸填满容器（默认） */
        .stretch {
            align-items: stretch;
        }
        
        /* 起点对齐 */
        .flex-start {
            align-items: flex-start;
        }
        
        /* 终点对齐 */
        .flex-end {
            align-items: flex-end;
        }
        
        /* 居中对齐 */
        .center {
            align-items: center;
        }
        
        /* 基线对齐 */
        .baseline {
            align-items: baseline;
        }
    </style>
</head>
<body>
    <h3>align-items: stretch（默认）</h3>
    <div class="container stretch">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    
    <h3>align-items: flex-start</h3>
    <div class="container flex-start">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    
    <h3>align-items: flex-end</h3>
    <div class="container flex-end">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    
    <h3>align-items: center</h3>
    <div class="container center">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    
    <h3>align-items: baseline</h3>
    <div class="container baseline">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>

flex-wrap（换行）

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>flex-wrap示例</title>
    <style>
        .container {
            display: flex;
            border: 2px solid #333;
            padding: 10px;
            margin-bottom: 10px;
        }
        
        .item {
            background-color: #4CAF50;
            color: white;
            padding: 20px;
            margin: 5px;
            border-radius: 4px;
            width: 150px;
            text-align: center;
        }
        
        /* 不换行（默认） */
        .nowrap {
            flex-wrap: nowrap;
        }
        
        /* 换行 */
        .wrap {
            flex-wrap: wrap;
        }
        
        /* 反向换行 */
        .wrap-reverse {
            flex-wrap: wrap-reverse;
        }
    </style>
</head>
<body>
    <h3>flex-wrap: nowrap（默认，不换行）</h3>
    <div class="container nowrap">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
    
    <h3>flex-wrap: wrap（换行）</h3>
    <div class="container wrap">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
    
    <h3>flex-wrap: wrap-reverse（反向换行）</h3>
    <div class="container wrap-reverse">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
</body>
</html>

flex-grow、flex-shrink、flex-basis

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>flex属性示例</title>
    <style>
        .container {
            display: flex;
            border: 2px solid #333;
            padding: 10px;
            margin-bottom: 20px;
        }
        
        .item {
            background-color: #4CAF50;
            color: white;
            padding: 20px;
            margin: 5px;
            border-radius: 4px;
            text-align: center;
        }
        
        /* flex-grow: 放大比例 */
        .grow-1 { flex-grow: 1; }
        .grow-2 { flex-grow: 2; }
        .grow-3 { flex-grow: 3; }
        
        /* flex-shrink: 缩小比例 */
        .shrink-0 { flex-shrink: 0; }  /* 不缩小 */
        .shrink-1 { flex-shrink: 1; }  /* 默认值 */
        .shrink-2 { flex-shrink: 2; }  /* 缩小比例更大 */
        
        /* flex-basis: 初始大小 */
        .basis-100 { flex-basis: 100px; }
        .basis-200 { flex-basis: 200px; }
        .basis-auto { flex-basis: auto; }  /* 默认值 */
        
        /* flex简写 */
        .flex-1 { flex: 1; }           /* flex: 1 1 0% */
        .flex-auto { flex: auto; }     /* flex: 1 1 auto */
        .flex-none { flex: none; }     /* flex: 0 0 auto */
    </style>
</head>
<body>
    <h3>flex-grow: 放大比例</h3>
    <p>项目1(flex-grow:1) 项目2(flex-grow:2) 项目3(flex-grow:1)</p>
    <div class="container">
        <div class="item grow-1">1</div>
        <div class="item grow-2">2</div>
        <div class="item grow-1">1</div>
    </div>
    
    <h3>flex-shrink: 缩小比例</h3>
    <p>当空间不足时，项目会按比例缩小</p>
    <div class="container">
        <div class="item shrink-1" style="width: 300px;">shrink:1</div>
        <div class="item shrink-2" style="width: 300px;">shrink:2</div>
        <div class="item shrink-1" style="width: 300px;">shrink:1</div>
    </div>
    
    <h3>flex-basis: 初始大小</h3>
    <div class="container">
        <div class="item basis-100">100px</div>
        <div class="item basis-200">200px</div>
        <div class="item basis-auto">auto</div>
    </div>
    
    <h3>flex简写</h3>
    <div class="container">
        <div class="item flex-1">flex:1</div>
        <div class="item flex-1">flex:1</div>
        <div class="item flex-1">flex:1</div>
    </div>
</body>
</html>

Flexbox常用布局示例

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Flexbox布局示例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        
        /* 水平垂直居中 */
        .center-box {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 200px;
            background-color: #f5f5f5;
            margin-bottom: 20px;
        }
        
        .center-box .box {
            background-color: #4CAF50;
            color: white;
            padding: 20px 40px;
            border-radius: 8px;
        }
        
        /* 导航栏 */
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #333;
            padding: 15px 20px;
            margin-bottom: 20px;
        }
        
        .navbar .logo {
            color: white;
            font-size: 20px;
            font-weight: bold;
        }
        
        .navbar .nav-links {
            display: flex;
            gap: 20px;
        }
        
        .navbar .nav-links a {
            color: white;
            text-decoration: none;
        }
        
        /* 卡片布局 */
        .card-container {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            margin-bottom: 20px;
        }
        
        .card {
            flex: 1;
            min-width: 200px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .card img {
            width: 100%;
            height: 150px;
            object-fit: cover;
        }
        
        .card .content {
            padding: 15px;
        }
        
        /* 圣杯布局 */
        .holy-grail {
            display: flex;
            flex-direction: column;
            min-height: 300px;
        }
        
        .holy-grail header,
        .holy-grail footer {
            background-color: #333;
            color: white;
            padding: 15px;
            text-align: center;
        }
        
        .holy-grail .body {
            display: flex;
            flex: 1;
        }
        
        .holy-grail .main {
            flex: 1;
            background-color: #f5f5f5;
            padding: 20px;
        }
        
        .holy-grail .sidebar {
            width: 150px;
            background-color: #e0e0e0;
            padding: 20px;
        }
        
        .holy-grail .sidebar.left {
            order: -1;
        }
    </style>
</head>
<body>
    <h2>水平垂直居中</h2>
    <div class="center-box">
        <div class="box">居中内容</div>
    </div>
    
    <h2>导航栏</h2>
    <nav class="navbar">
        <div class="logo">Logo</div>
        <div class="nav-links">
            <a href="#">首页</a>
            <a href="#">产品</a>
            <a href="#">关于</a>
            <a href="#">联系</a>
        </div>
    </nav>
    
    <h2>等宽卡片布局</h2>
    <div class="card-container">
        <div class="card">
            <img src="https://picsum.photos/300/200" alt="图片">
            <div class="content">
                <h3>卡片标题1</h3>
                <p>卡片内容描述</p>
            </div>
        </div>
        <div class="card">
            <img src="https://picsum.photos/300/200?random=2" alt="图片">
            <div class="content">
                <h3>卡片标题2</h3>
                <p>卡片内容描述</p>
            </div>
        </div>
        <div class="card">
            <img src="https://picsum.photos/300/200?random=3" alt="图片">
            <div class="content">
                <h3>卡片标题3</h3>
                <p>卡片内容描述</p>
            </div>
        </div>
    </div>
    
    <h2>圣杯布局</h2>
    <div class="holy-grail">
        <header>页头</header>
        <div class="body">
            <div class="main">主内容区域</div>
            <div class="sidebar left">左侧边栏</div>
            <div class="sidebar">右侧边栏</div>
        </div>
        <footer>页脚</footer>
    </div>
</body>
</html>

Grid布局

Grid（网格布局）是一种二维布局系统，适合处理行和列的布局。

基本概念

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Grid基本概念</title>
    <style>
        .container {
            display: grid;                              /* 创建grid容器 */
            grid-template-columns: 100px 100px 100px;   /* 定义列 */
            grid-template-rows: 50px 50px;              /* 定义行 */
            gap: 10px;                                  /* 间距 */
            border: 2px solid #333;
            padding: 10px;
            margin-bottom: 20px;
        }
        
        .item {
            background-color: #4CAF50;
            color: white;
            padding: 15px;
            border-radius: 4px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h3>Grid容器（display: grid）</h3>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
    <p>网格线（Grid Line）：划分网格的线</p>
    <p>网格轨道（Grid Track）：相邻网格线之间的空间</p>
    <p>网格单元（Grid Cell）：最小的网格单位</p>
</body>
</html>

grid-template-columns和grid-template-rows

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>grid-template示例</title>
    <style>
        .container {
            display: grid;
            gap: 10px;
            border: 2px solid #333;
            padding: 10px;
            margin-bottom: 20px;
        }
        
        .item {
            background-color: #4CAF50;
            color: white;
            padding: 15px;
            border-radius: 4px;
            text-align: center;
        }
        
        /* 固定宽度 */
        .fixed {
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 50px 50px;
        }
        
        /* 百分比 */
        .percent {
            grid-template-columns: 25% 50% 25%;
            grid-template-rows: 100px;
        }
        
        /* fr单位（弹性单位） */
        .fr {
            grid-template-columns: 1fr 2fr 1fr;  /* 1:2:1比例 */
            grid-template-rows: 100px;
        }
        
        /* repeat函数 */
        .repeat {
            grid-template-columns: repeat(3, 1fr);  /* 三个等宽列 */
            grid-template-rows: repeat(2, 50px);    /* 两个等高行 */
        }
        
        /* auto关键字 */
        .auto {
            grid-template-columns: auto 1fr auto;   /* 两边自适应，中间填充 */
            grid-template-rows: 100px;
        }
        
        /* minmax函数 */
        .minmax {
            grid-template-columns: minmax(100px, 1fr) 1fr 1fr;
            grid-template-rows: 100px;
        }
    </style>
</head>
<body>
    <h3>固定宽度</h3>
    <div class="container fixed">
        <div class="item">100px</div>
        <div class="item">100px</div>
        <div class="item">100px</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
    
    <h3>fr单位（弹性比例）</h3>
    <div class="container fr">
        <div class="item">1fr</div>
        <div class="item">2fr</div>
        <div class="item">1fr</div>
    </div>
    
    <h3>repeat函数</h3>
    <div class="container repeat">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
    
    <h3>auto关键字</h3>
    <div class="container auto">
        <div class="item">auto</div>
        <div class="item">1fr</div>
        <div class="item">auto</div>
    </div>
    
    <h3>minmax函数</h3>
    <div class="container minmax">
        <div class="item">minmax(100px,1fr)</div>
        <div class="item">1fr</div>
        <div class="item">1fr</div>
    </div>
</body>
</html>

grid-gap（间距）

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>grid-gap示例</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            border: 2px solid #333;
            padding: 10px;
            margin-bottom: 20px;
        }
        
        .item {
            background-color: #4CAF50;
            color: white;
            padding: 15px;
            border-radius: 4px;
            text-align: center;
        }
        
        /* 统一间距 */
        .gap-1 {
            gap: 10px;  /* 行列间距都是10px */
        }
        
        /* 分别设置 */
        .gap-2 {
            row-gap: 20px;     /* 行间距 */
            column-gap: 10px;  /* 列间距 */
        }
        
        /* 简写形式 */
        .gap-3 {
            gap: 20px 10px;  /* 行间距 列间距 */
        }
    </style>
</head>
<body>
    <h3>gap: 10px</h3>
    <div class="container gap-1">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
    
    <h3>row-gap: 20px; column-gap: 10px</h3>
    <div class="container gap-2">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
</body>
</html>

grid-column和grid-row（跨行跨列）

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>跨行跨列示例</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(3, 60px);
            gap: 10px;
            border: 2px solid #333;
            padding: 10px;
            margin-bottom: 20px;
        }
        
        .item {
            background-color: #4CAF50;
            color: white;
            padding: 15px;
            border-radius: 4px;
            text-align: center;
        }
        
        /* 跨列 */
        .span-2-cols {
            grid-column: span 2;  /* 跨2列 */
        }
        
        .span-3-cols {
            grid-column: span 3;  /* 跨3列 */
        }
        
        /* 跨行 */
        .span-2-rows {
            grid-row: span 2;  /* 跨2行 */
        }
        
        /* 使用网格线定位 */
        .position-1 {
            grid-column: 1 / 3;  /* 从第1条线到第3条线 */
            grid-row: 1 / 3;     /* 从第1条线到第3条线 */
            background-color: #2196F3;
        }
        
        .position-2 {
            grid-column: 3 / 5;
            grid-row: 2 / 4;
            background-color: #FF9800;
        }
    </style>
</head>
<body>
    <h3>span关键字</h3>
    <div class="container">
        <div class="item span-2-cols">跨2列</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item span-3-cols">跨3列</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
    </div>
    
    <h3>网格线定位</h3>
    <div class="container">
        <div class="item position-1">1-3列, 1-3行</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item position-2">3-5列, 2-4行</div>
        <div class="item">5</div>
    </div>
</body>
</html>

grid-template-areas（区域命名）

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>grid-template-areas示例</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 150px 1fr 150px;
            grid-template-rows: auto 1fr auto;
            grid-template-areas:
                "header header header"
                "sidebar main aside"
                "footer footer footer";
            gap: 10px;
            min-height: 400px;
        }
        
        .header {
            grid-area: header;
            background-color: #333;
            color: white;
            padding: 20px;
            text-align: center;
        }
        
        .sidebar {
            grid-area: sidebar;
            background-color: #e0e0e0;
            padding: 20px;
        }
        
        .main {
            grid-area: main;
            background-color: #f5f5f5;
            padding: 20px;
        }
        
        .aside {
            grid-area: aside;
            background-color: #e0e0e0;
            padding: 20px;
        }
        
        .footer {
            grid-area: footer;
            background-color: #333;
            color: white;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h3>使用命名区域创建布局</h3>
    <div class="container">
        <header class="header">页头</header>
        <nav class="sidebar">侧边栏</nav>
        <main class="main">主内容区域</main>
        <aside class="aside">附加信息</aside>
        <footer class="footer">页脚</footer>
    </div>
</body>
</html>

Grid布局示例

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Grid布局综合示例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background-color: #f5f5f5;
        }
        
        /* 图片画廊 */
        .gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 30px;
        }
        
        .gallery-item {
            aspect-ratio: 1;
            overflow: hidden;
            border-radius: 8px;
        }
        
        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s;
        }
        
        .gallery-item:hover img {
            transform: scale(1.1);
        }
        
        /* 仪表盘布局 */
        .dashboard {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: auto repeat(2, 150px);
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .dashboard-header {
            grid-column: 1 / -1;
            background-color: #333;
            color: white;
            padding: 20px;
            border-radius: 8px;
        }
        
        .stat-card {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .stat-card.large {
            grid-column: span 2;
        }
        
        .stat-card h3 {
            color: #666;
            font-size: 14px;
            margin-bottom: 10px;
        }
        
        .stat-card .number {
            font-size: 28px;
            font-weight: bold;
            color: #333;
        }
        
        /* 复杂网格布局 */
        .complex-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            grid-template-rows: repeat(3, 100px);
            gap: 10px;
        }
        
        .complex-grid .item {
            background-color: #4CAF50;
            color: white;
            padding: 15px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }
        
        .complex-grid .item:nth-child(1) {
            grid-column: 1 / 3;
            grid-row: 1 / 3;
        }
        
        .complex-grid .item:nth-child(2) {
            grid-column: 3 / 5;
        }
        
        .complex-grid .item:nth-child(3) {
            grid-column: 5 / 7;
        }
        
        .complex-grid .item:nth-child(4) {
            grid-column: 3 / 7;
            grid-row: 2 / 4;
        }
        
        .complex-grid .item:nth-child(5) {
            grid-column: 1 / 3;
        }
        
        .complex-grid .item:nth-child(6) {
            grid-column: 1 / 3;
        }
    </style>
</head>
<body>
    <h2>图片画廊</h2>
    <div class="gallery">
        <div class="gallery-item"><img src="https://picsum.photos/300/300" alt="图片"></div>
        <div class="gallery-item"><img src="https://picsum.photos/300/300?random=2" alt="图片"></div>
        <div class="gallery-item"><img src="https://picsum.photos/300/300?random=3" alt="图片"></div>
        <div class="gallery-item"><img src="https://picsum.photos/300/300?random=4" alt="图片"></div>
        <div class="gallery-item"><img src="https://picsum.photos/300/300?random=5" alt="图片"></div>
        <div class="gallery-item"><img src="https://picsum.photos/300/300?random=6" alt="图片"></div>
    </div>
    
    <h2>仪表盘布局</h2>
    <div class="dashboard">
        <div class="dashboard-header">
            <h1>数据仪表盘</h1>
        </div>
        <div class="stat-card">
            <h3>总用户</h3>
            <div class="number">12,345</div>
        </div>
        <div class="stat-card">
            <h3>活跃用户</h3>
            <div class="number">8,234</div>
        </div>
        <div class="stat-card large">
            <h3>本月收入</h3>
            <div class="number">¥123,456</div>
        </div>
        <div class="stat-card">
            <h3>订单数</h3>
            <div class="number">567</div>
        </div>
    </div>
    
    <h2>复杂网格布局</h2>
    <div class="complex-grid">
        <div class="item">1 (2x2)</div>
        <div class="item">2 (2x1)</div>
        <div class="item">3 (2x1)</div>
        <div class="item">4 (4x2)</div>
        <div class="item">5 (2x1)</div>
        <div class="item">6 (2x1)</div>
    </div>
</body>
</html>

position定位

position属性用于控制元素的定位方式。

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>position定位示例</title>
    <style>
        .container {
            position: relative;
            border: 2px solid #333;
            padding: 50px;
            margin: 20px;
            height: 300px;
        }
        
        .box {
            padding: 20px;
            background-color: #4CAF50;
            color: white;
            margin-bottom: 10px;
        }
        
        /* 静态定位（默认） */
        .static {
            position: static;
        }
        
        /* 相对定位 */
        .relative {
            position: relative;
            top: 20px;
            left: 20px;
            background-color: #2196F3;
        }
        
        /* 绝对定位 */
        .absolute {
            position: absolute;
            top: 20px;
            right: 20px;
            background-color: #FF9800;
        }
        
        /* 固定定位 */
        .fixed {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #E91E63;
            z-index: 100;
        }
        
        /* 粘性定位 */
        .sticky {
            position: sticky;
            top: 0;
            background-color: #9C27B0;
        }
    </style>
</head>
<body>
    <h3>static - 静态定位（默认）</h3>
    <div class="box static">静态定位元素</div>
    
    <h3>relative - 相对定位</h3>
    <div class="container">
        <div class="box relative">相对定位（相对原位置偏移）</div>
    </div>
    
    <h3>absolute - 绝对定位</h3>
    <div class="container">
        <div class="box absolute">绝对定位（相对于最近的定位祖先）</div>
    </div>
    
    <h3>fixed - 固定定位</h3>
    <div class="box fixed">固定定位（相对于视口）</div>
    
    <h3>sticky - 粘性定位</h3>
    <div style="height: 200px; overflow: auto; border: 1px solid #ccc;">
        <div class="box sticky">粘性定位（滚动时固定）</div>
        <div style="height: 500px; padding: 20px;">滚动内容区域...</div>
    </div>
</body>
</html>

本章小结

本章我们学习了：

display属性：block、inline、inline-block、flex、grid
Flexbox布局：一维弹性布局，适合处理行或列
Grid布局：二维网格布局，适合处理行列组合
position定位：static、relative、absolute、fixed、sticky

下一章我们将学习文本与字体，掌握文本样式和字体设置。

布局 ​

布局概述 ​

display属性 ​

Flexbox布局 ​

基本概念 ​

flex-direction（主轴方向） ​

justify-content（主轴对齐） ​

align-items（交叉轴对齐） ​

flex-wrap（换行） ​

flex-grow、flex-shrink、flex-basis ​

Flexbox常用布局示例 ​

Grid布局 ​

基本概念 ​

grid-template-columns和grid-template-rows ​

grid-gap（间距） ​

grid-column和grid-row（跨行跨列） ​

grid-template-areas（区域命名） ​

Grid布局示例 ​

position定位 ​

本章小结 ​

下一章 ​

布局

布局概述

display属性

Flexbox布局

基本概念

flex-direction（主轴方向）

justify-content（主轴对齐）

align-items（交叉轴对齐）

flex-wrap（换行）

flex-grow、flex-shrink、flex-basis

Flexbox常用布局示例

Grid布局

基本概念

grid-template-columns和grid-template-rows

grid-gap（间距）

grid-column和grid-row（跨行跨列）

grid-template-areas（区域命名）

Grid布局示例

position定位

本章小结

下一章