课程12: CSS布局技术

🎯 课程目标

完成本课程后，你将能够：

掌握Flexbox弹性盒子的原理和使用方法
理解CSS Grid网格布局的核心概念
能够使用定位属性控制元素位置
理解不同布局方式的适用场景
能够创建响应式页面布局

📖 布局概述

CSS布局是前端开发的核心技能之一。良好的布局能让网页在不同设备上都呈现良好的效果。现代CSS提供了多种布局方式，其中Flexbox和Grid是最强大和常用的两种。

                    ✨ 常见布局方式
                    Normal Flow（普通流）：元素按文档顺序自然排列
Flexbox（弹性盒子）：一维布局，适合行或列排列
Grid（网格布局）：二维布局，适合复杂页面结构
Position（定位）：精确控制元素位置
Float（浮动）：传统布局方式，现在较少使用

                

💻 Flexbox弹性布局

Flexbox是一种一维布局模型，特别适合处理一行或一列的元素排列。

步骤 1：创建Flex容器

将display属性设置为flex或inline-flex即可创建Flex容器。

/* Flex容器 */
.container {
    display: flex;
    /* 或使用 inline-flex 行内元素 */
    /* display: inline-flex; */
}

/* 容器属性 */
.container {
    display: flex;
    flex-direction: row;           /* 主轴方向：row(水平) 或 column(垂直) */
    justify-content: center;       /* 主轴对齐方式 */
    align-items: center;           /* 交叉轴对齐方式 */
    flex-wrap: wrap;               /* 是否换行 */
    gap: 20px;                     /* 项目间距 */
}
                    

步骤 2：主轴对齐方式

justify-content属性控制主轴（水平方向）上的对齐方式。

.container {
    justify-content: flex-start;   /* 左对齐（默认） */
    justify-content: center;       /* 居中 */
    justify-content: flex-end;     /* 右对齐 */
    justify-content: space-between;/* 两端对齐，项目间距相等 */
    justify-content: space-around; /* 项目两侧间距相等 */
    justify-content: space-evenly; /* 项目间距完全相等 */
}
                    

步骤 3：交叉轴对齐方式

align-items属性控制交叉轴（垂直方向）上的对齐方式。

.container {
    align-items: stretch;          /* 拉伸占满容器（默认） */
    align-items: flex-start;       /* 顶部对齐 */
    align-items: center;           /* 垂直居中 */
    align-items: flex-end;         /* 底部对齐 */
    align-items: baseline;         /* 基线对齐 */
}
                    

步骤 4：Flex项目属性

子元素可以使用flex属性来控制自身的大小和伸缩性。

/* 子元素样式 */
.item {
    flex: 1;                       /* 占据剩余空间的等份 */
    flex: 0 1 auto;               /* 放大不缩小，自适应内容 */
    flex-grow: 2;                 /* 放大比例，默认为1 */
    flex-shrink: 0;               /* 缩小比例，默认为1 */
    flex-basis: 200px;            /* 基准尺寸 */
    align-self: center;           /* 单独设置自身的对齐方式 */
    order: -1;                    /* 排列顺序，数值越小越靠前 */
}
                    

📐 CSS Grid网格布局

Grid是二维布局系统，可以同时控制行和列，特别适合复杂的页面结构。

步骤 1：创建Grid容器

/* Grid容器 */
.grid-container {
    display: grid;
    /* 或使用 inline-grid */
}

/* 定义网格列和行 */
.grid-container {
    display: grid;
    grid-template-columns: 200px 200px 200px;  /* 三列，每列200px */
    grid-template-rows: 100px 100px;          /* 两行，每行100px */
    
    /* 使用fr单位（比例单位） */
    grid-template-columns: 1fr 2fr 1fr;       /* 三列，比例为1:2:1 */
    grid-template-rows: repeat(3, 1fr);       /* 三行，每行等高 */
    
    /* 响应式：自动填充 */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
                    

步骤 2：Grid间隙

.grid-container {
    gap: 20px;              /* 行列间隙 */
    row-gap: 20px;          /* 行间隙 */
    column-gap: 30px;       /* 列间隙 */
}
                    

步骤 3：网格项目定位

可以使用网格线编号或命名来精确定位项目位置。

/* 网格项目样式 */
.grid-item {
    grid-column-start: 1;      /* 起始列网格线 */
    grid-column-end: 3;        /* 结束列网格线 */
    grid-row-start: 1;         /* 起始行网格线 */
    grid-row-end: 3;           /* 结束行网格线 */
    
    /* 简写形式 */
    grid-column: 1 / 3;        /* 占据第1-3列 */
    grid-row: 1 / 3;           /* 占据第1-3行 */
    
    /* 使用span跨越 */
    grid-column: span 2;       /* 占据2列 */
    
    /* 命名区域 */
    grid-area: header;         /* 放置到命名区域 */
}

/* 定义命名区域 */
.container {
    display: grid;
    grid-template-areas:
        "header header header"
        "sidebar main main"
        "footer footer footer";
    grid-template-columns: 200px 1fr 1fr;
    grid-template-rows: auto 1fr auto;
}
                    

📍 Position定位

定位属性可以精确定位元素的位置，适用于浮动广告、导航栏固定等场景。

/* 静态定位（默认） */
.element {
    position: static;
}

/* 相对定位 */
.element {
    position: relative;
    top: 20px;      /* 向下移动20px */
    left: 30px;     /* 向右移动30px */
}

/* 绝对定位 */
.element {
    position: absolute;
    top: 100px;     /* 距离父元素顶部100px */
    left: 50%;      /* 距离父元素左边50% */
}

/* 固定定位 */
.element {
    position: fixed;
    top: 0;         /* 固定在页面顶部 */
    right: 0;       /* 固定在页面右边 */
}

/* 粘性定位 */
.element {
    position: sticky;
    top: 10px;      /* 滚动到顶部时固定 */
}
                

💡 使用技巧：绝对定位的元素会相对于最近的非static定位的父元素定位。如果没有这样的父元素，则相对于初始包含块（通常是页面）。

📱 响应式布局实战

使用媒体查询实现不同屏幕尺寸下的自适应布局。

/* 基础样式（移动优先） */
.container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 平板设备 */
@media (min-width: 768px) {
    .container {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .item {
        flex: 0 0 45%;
    }
}

/* 桌面设备 */
@media (min-width: 1024px) {
    .container {
        grid-template-columns: repeat(3, 1fr);
    }
    .item {
        flex: 0 0 30%;
    }
}

/* 大屏幕 */
@media (min-width: 1440px) {
    .container {
        max-width: 1400px;
        margin: 0 auto;
    }
}
                

🚀 布局实战：经典页面结构

让我们综合运用所学知识，创建一个经典的三栏布局页面。

<!-- 页面结构 -->
<div class="page-wrapper">
    <header class="header">网站头部</header>
    <div class="main-container">
        <aside class="sidebar-left">左侧边栏</aside>
        <main class="content">主要内容区域</main>
        <aside class="sidebar-right">右侧边栏</aside>
    </div>
    <footer class="footer">网站底部</footer>
</div>

<style>
.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main-container {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    gap: 20px;
    flex: 1;
}

@media (max-width: 1024px) {
    .main-container {
        grid-template-columns: 150px 1fr 150px;
    }
}

@media (max-width: 768px) {
    .main-container {
        grid-template-columns: 1fr;
    }
    .sidebar-left, .sidebar-right {
        display: none;
    }
}

.header, .footer {
    background: #333;
    color: white;
    padding: 20px;
    text-align: center;
}

.content {
    background: white;
    padding: 20px;
}

.sidebar-left, .sidebar-right {
    background: #f5f5f5;
    padding: 20px;
}
</style>
                

⚠️ 常见问题

问题	原因分析	解决方案
Flex容器不生效	子元素使用了float或position	避免在Flex项目上使用float
元素超出容器	没有设置flex-wrap	添加flex-wrap: wrap
Grid项目重叠	网格区域定义重叠	检查grid-column和grid-row设置
固定定位被遮挡	z-index层级问题	设置更高的z-index值
响应式布局无效	媒体查询顺序错误	确保媒体查询从大到小排列

✅ 课后练习

练习要求：请独立完成以下练习任务：

练习 1：使用Flexbox创建一个垂直居中的登录表单
练习 2：使用Grid创建一个响应式图片画廊，展示4列变2列变1列
选做练习：创建一个完整的个人主页，包含头部、导航、简介、作品集和联系表单