本阶段核心目标：掌握CSS中主流的布局方式（文档流、浮动、定位、Flexbox、Grid），能根据不同的页面需求选择合适的布局方案，实现从简单的元素排列到复杂的页面整体结构搭建，解决"元素排列混乱""垂直居中困难""响应式适配"等布局难题。
学习节奏：按「传统布局（文档流/浮动/定位）→ 现代布局（Flexbox/Grid）」推进，每个布局方式搭配「原理讲解+核心属性+实战案例+常见问题」，全程基于外部样式表开发，培养布局思维和方案选择能力。
前置要求
-
已掌握CSS选择器、盒子模型、文字/背景样式，能独立编写外部样式表；
-
熟悉HTML常用标签及嵌套结构；
-
会用Chrome开发者工具调试CSS样式。
课前预览
第1 小节 ：传统布局基础------文档流与浮动布局
模块1：CSS 布局的核心概念（10分钟，建立布局思维）
1.1 什么是布局？
布局就是在页面上合理地安排和组织元素的位置、大小和排列方式，以实现美观、清晰、易用的页面结构。CSS布局的本质是控制元素在二维平面上的"流"和"位置"。
1.2 布局的核心挑战
• 元素排列：如何让元素水平排列、垂直排列、多行排列？
• 空间分配：如何让元素均分可用空间，或按比例分配？
• 对齐方式：如何让元素水平居中、垂直居中、两端对齐？
• 响应式适配：如何让布局在不同屏幕尺寸下（手机、平板、电脑）都能正常显示？
模块2：文档流布局（Normal Flow）------ 布局的基石
2.1 核心概念
文档流是浏览器默认的元素排列方式，元素按照其在HTML代码中的顺序，从上到下、从左到右依次排列，块级元素独占一行，行内元素在同一行内显示，直到行满后换行。
2.2 块级元素与行内元素的布局差异
|------|--------------------|---------------------------|-----------------------|
| 特性 | 块级元素（Block-level） | 行内元素（Inline） | 行内块元素（Inline-block） |
| 排列方式 | 独占一行，从上到下排列 | 同行排列，从左到右，行满换行 | 同行排列，从左到右，行满换行 |
| 尺寸设置 | width、height 生效 | width、height 无效 | width、height 生效 |
| 内外边距 | margin、padding 均生效 | 上下 margin、padding 无效，左右生效 | margin、padding 均生效 |
| 默认宽度 | 100%（撑满父容器） | 由内容决定 | 由内容决定 |
| 示例标签 | div、p、h1-h6、ul、li | span、a、img、strong | button、input（部分浏览器默认） |
2.3 display 属性------改变元素的显示类型
display 属性用于改变元素的默认显示类型，是控制布局的基础。
常用取值：
• block：转为块级元素；
• inline：转为行内元素；
• inline-block：转为行内块元素；
• none：隐藏元素，不占据页面空间（与visibility: hidden不同，后者隐藏但仍占空间）。
即时实操：元素显示类型转换
<!-- HTML -->
<span class="inline-to-block">行内元素转块级元素，独占一行</span>
<div class="block-to-inline">块级元素转行内元素，同行排列</div>
<a href="#" class="inline-to-inline-block">行内元素转行内块，可设宽高</a>
/* CSS */
.inline-to-block {
display: block;
width: 200px;
height: 50px;
background-color: #e3f2fd;
margin: 10px 0;
}
.block-to-inline {
display: inline;
background-color: #ffebee;
margin: 0 10px;
}
.inline-to-inline-block {
display: inline-block;
width: 150px;
height: 40px;
line-height: 40px;
background-color: #e8f5e9;
text-align: center;
text-decoration: none;
color: #333;
margin: 0 5px;
}
模块3：浮动布局（Float）------ 实现元素并排（传统布局核心）
3.1 核心概念
float 属性用于让元素脱离文档流，并向左或向右浮动，直到其边缘碰到包含块或另一个浮动元素的边缘。它是早期实现元素水平并排的主要方式（如图文环绕、多列布局）。
3.2 核心属性
语法：float: left | right | none;
取值：
• left：元素向左浮动；
• right：元素向右浮动；
• none：默认值，元素不浮动，遵循文档流。
3.3 图文环绕效果（float 经典应用）
<!-- HTML -->
<div class="article">
<img src="https://picsum.photos/150/100" alt="文章配图" class="article-img">
<p class="article-content">这是一段文章内容，图片会浮动到左侧，文字会环绕在图片右侧。这是一段文章内容，图片会浮动到左侧，文字会环绕在图片右侧。</p>
</div>
/* CSS */
.article {
width: 500px;
border: 1px solid #e0e0e0;
padding: 10px;
}
.article-img {
float: left; /* 图片向左浮动 */
margin-right: 10px; /* 图片与文字之间的间距 */
}
.article-content {
line-height: 1.5;
}
3.4 多列布局（float 实现并排）
<!-- HTML -->
<div class="container">
<div class="column column1">列1</div>
<div class="column column2">列2</div>
<div class="column column3">列3</div>
<div class="clearfix"></div> <!-- 清除浮动，防止父容器高度塌陷 -->
</div>
/* CSS */
.container {
width: 600px;
border: 1px solid #e0e0e0;
margin: 20px auto;
}
.column {
width: 200px;
height: 100px;
line-height: 100px;
text-align: center;
float: left; /* 三个列都向左浮动，实现并排 */
}
.column1 { background-color: #e3f2fd; }
.column2 { background-color: #ffebee; }
.column3 { background-color: #e8f5e9; }
/* 清除浮动的方法1：添加空的div并设置clear */
.clearfix {
clear: both; /* 清除左右两侧的浮动 */
}
3.5 浮动的核心问题：高度塌陷（Height Collapse）
问题描述：当父容器的所有子元素都浮动时，父容器会因为"没有内容可撑起高度"而高度变为0，导致布局混乱。
解决方案（清除浮动）：
-
方法1：额外标签法（如上例，在浮动元素后添加一个空的div，设置clear: both;）；
-
方法2：父容器触发BFC（块级格式化上下文）：给父容器添加overflow: hidden;（或auto、scroll）；
-
方法3：伪元素法（推荐，无侵入性）：
.clearfix::after {
content: "";
display: block;
clear: both;
}
使用时，只需给父容器添加clearfix类即可：
<div class="container clearfix"> <!-- 添加clearfix类 -->
<div class="column column1">列1</div>
<div class="column column2">列2</div>
<div class="column column3">列3</div>
</div>
第2 小节 ：定位布局（Position）------ 精准控制元素位置
模块1：定位布局的核心概念
position 属性用于精准控制元素在页面中的位置，它允许元素脱离正常的文档流，相对于某个参考点进行定位。定位布局常用于实现导航栏、弹窗、广告、回到顶部按钮等需要自由定位的UI组件。
模块2：position 属性的取值与定位规则
|----------------|---------------------|------------|--------------------|
| 取值 | 定位参考点 | 是否脱离文档流 | 应用场景 |
| static（默认） | 无，遵循文档流 | 否 | 正常布局，无特殊定位需求 |
| relative（相对定位） | 元素自身在文档流中的原始位置 | 否（仍占据原空间） | 微调元素位置、作为绝对定位的参考容器 |
| absolute（绝对定位） | 最近的已定位（非static）祖先元素 | 是（不占据原空间） | 弹窗、下拉菜单、精确定位的元素 |
| fixed（固定定位） | 浏览器视口（Viewport） | 是（不占据原空间） | 固定导航栏、回到顶部按钮、悬浮广告 |
| sticky（粘性定位） | 滚动到特定位置时固定在视口 | 否（滚动前占原空间） | 滚动时吸顶的导航栏、侧边栏目录 |
2.1 相对定位（position: relative;）
特点：元素相对于自己在文档流中的原始位置进行偏移，偏移后仍占据原始空间，不会影响其他元素的布局。
偏移属性：top, right, bottom, left（设置偏移量，可正可负）。
即时实操：微调元素位置
<!-- HTML -->
<div class="box original">原始位置</div>
<div class="box relative-box">相对定位，向下向右偏移10px</div>
/* CSS */
.box {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background-color: #e3f2fd;
margin: 10px;
}
.relative-box {
position: relative;
top: 10px; /* 向下偏移10px */
left: 10px; /* 向右偏移10px */
background-color: #ffebee;
}
效果：relative-box相对于自己的原始位置移动了，但原始位置的空间仍然保留，后面的元素不会向上移动。
2.2 绝对定位（position: absolute;）
特点：元素相对于最近的已定位（position值为relative/absolute/fixed）的祖先元素进行定位。如果没有这样的祖先元素，则相对于浏览器视口（body）定位。元素脱离文档流，不再占据原始空间。
核心用法：通常与position: relative;配合使用，将父元素设为相对定位（作为参考容器），子元素设为绝对定位（相对于父元素定位）。
即时实操：子元素相对于父元素定位
<!-- HTML -->
<div class="parent-box">
父元素（相对定位）
<div class="child-box">子元素（绝对定位，右下角）</div>
</div>
/* CSS */
.parent-box {
width: 300px;
height: 200px;
border: 1px solid #333;
position: relative; /* 父元素设为相对定位，作为子元素的参考 */
margin: 20px;
}
.child-box {
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: #ff4444;
color: #fff;
position: absolute; /* 子元素绝对定位 */
bottom: 10px; /* 距离父元素底部10px */
right: 10px; /* 距离父元素右侧10px */
}
效果：子元素精准定位在父元素的右下角，父元素的布局不受影响。
2.3 固定定位（position: fixed;）
特点：元素相对于浏览器视口定位，页面滚动时，元素位置保持不变。元素脱离文档流。
应用场景：固定在页面顶部的导航栏、固定在右下角的"回到顶部"按钮、悬浮广告等。
即时实操：固定导航栏
<!-- HTML -->
<nav class="fixed-nav">我是固定在顶部的导航栏</nav>
<div class="content">
<p>页面内容...（可滚动查看导航栏效果）</p>
<p>页面内容...</p>
</div>
/* CSS */
.fixed-nav {
width: 100%;
height: 60px;
line-height: 60px;
text-align: center;
background-color: #2196f3;
color: #fff;
position: fixed; /* 固定定位 */
top: 0; /* 距离视口顶部0px */
left: 0; /* 距离视口左侧0px */
z-index: 999; /* 确保导航栏在最上层，不被其他元素遮挡 */
}
.content {
margin-top: 70px; /* 给固定导航栏留出空间，避免内容被遮挡 */
padding: 0 20px;
line-height: 1.5;
}
效果：导航栏固定在浏览器顶部，滚动页面时，导航栏位置不变。
第3 小节 ：现代布局------Flexbox 弹性盒模型（一维布局首选）
模块1：Flexbox 核心概念（解决传统布局痛点）
Flexbox（Flexible Box Layout Module）即弹性盒模型，是CSS3引入的一种一维布局模型，专门用于解决传统布局（浮动、定位）在实现"元素居中、空间均分、自适应排列"等场景下的繁琐和困难。它可以轻松实现元素的水平/垂直居中、等高布局、自动填充剩余空间等效果。
1.1 Flexbox 的核心思想
将父容器设置为Flex容器，子元素自动成为Flex项目。通过控制Flex容器的属性，可以灵活地控制Flex项目的排列方向、对齐方式、空间分配。
1.2 Flexbox 的基本术语
• Flex容器（Flex Container）：应用了display: flex;或display: inline-flex;的元素。
• Flex项目（Flex Item）：Flex容器的直接子元素。
• 主轴（Main Axis）：Flex项目的排列方向，默认是水平方向（从左到右）。
• 交叉轴（Cross Axis）：与主轴垂直的方向，默认是垂直方向（从上到下）。
模块2：Flex容器的核心属性（控制项目排列）
2.1 display: flex; ------ 将元素转为Flex容器
.container {
display: flex; /* 块级Flex容器 */
/* display: inline-flex; */ /* 行内块级Flex容器 */
}
设置后，子元素自动成为Flex项目，并沿主轴（默认水平）排列。
2.2 flex-direction ------ 设置主轴方向
控制Flex项目的排列方向（主轴方向）。
语法：flex-direction: row | row-reverse | column | column-reverse;
取值：
• row（默认）：主轴水平，项目从左到右排列；
• row-reverse：主轴水平，项目从右到左排列；
• column：主轴垂直，项目从上到下排列；
• column-reverse：主轴垂直，项目从下到上排列。
2.3 justify-content ------ 主轴上的对齐方式
控制Flex项目在主轴上的对齐方式（水平对齐，当主轴为水平时）。
语法：justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
2.4 align-items ------ 交叉轴上的对齐方式
控制Flex项目在交叉轴上的对齐方式（垂直对齐，当主轴为水平时）。
2.5 flex-wrap ------ 项目是否换行
控制Flex项目在主轴上排不下时，是否换行。
2.6 align-content ------ 多根轴线的对齐方式
当Flex项目换行后，会产生多根轴线。align-content用于控制这些轴线在交叉轴上的对齐方式（仅在flex-wrap: wrap时生效）。
模块3：Flex项目的核心属性（控制项目自身）
3.1 flex-grow ------ 项目的放大比例：当Flex容器有剩余空间时，项目按比例分配剩余空间。默认值为0（不放大）。
3.2 flex-shrink ------ 项目的缩小比例：当Flex容器空间不足时，项目按比例缩小。默认值为1（允许缩小）。
3.3 flex-basis ------ 项目的初始宽度/高度：设置项目在主轴上的初始尺寸。默认值为auto（由内容决定）。
3.4 flex ------ 复合属性：是flex-grow, flex-shrink, flex-basis的简写。
3.5 align-self ------ 单个项目的对齐方式：覆盖Flex容器的align-items属性，单独控制某个项目在交叉轴上的对齐方式。
模块4：Flexbox 实战案例（解决经典布局问题）
案例1：元素水平垂直居中（Flexbox 最简实现）
<!-- HTML -->
<div class="center-container">
<div class="center-item">我是水平垂直居中的元素</div>
</div>
/* CSS */
.center-container {
width: 300px;
height: 200px;
border: 1px solid #e0e0e0;
display: flex; /* 关键1：转为Flex容器 */
justify-content: center; /* 关键2：主轴（水平）居中 */
align-items: center; /* 关键3：交叉轴（垂直）居中 */
}
.center-item {
background-color: #e3f2fd;
padding: 10px;
}
第4 小节 ：现代布局------CSS Grid 网格布局（二维布局首选）
模块1：CSS Grid 核心概念（二维布局的强大工具）
CSS Grid Layout是CSS3引入的一种二维布局模型，它将容器划分为行和列，形成一个网格，项目可以放置在网格的任意单元格中。与Flexbox（一维）不同，Grid擅长处理行和列同时存在的复杂布局，是构建页面整体结构（如头部、主体、侧边栏、底部）的理想选择。
1.1 Grid 的基本术语
• Grid容器（Grid Container）：应用了display: grid;或display: inline-grid;的元素。
• Grid项目（Grid Item）：Grid容器的直接子元素。
• Grid线（Grid Line）：划分网格的水平线和垂直线。
• Grid轨道（Grid Track）：两条相邻Grid线之间的空间，即网格的行或列。
• Grid单元格（Grid Cell）：Grid线交叉形成的最小单位，即网格的一个格子。
• Grid区域（Grid Area）：由多个相邻的Grid单元格组成的矩形区域。
模块2：Grid容器的核心属性（定义网格结构）
模块3：Grid项目的核心属性（控制项目位置）
模块4：Flexbox vs Grid 布局选择指南
|---------|---------|--------------------------|-----------------------------------------------|
| 布局方式 | 维度 | 核心优势 | 适用场景 |
| Flexbox | 一维（行或列） | 简单灵活，易于实现元素居中、空间均分、自适应排列 | 导航栏、按钮组、卡片布局、元素水平/垂直居中、单列/单行自适应布局 |
| Grid | 二维（行和列） | 强大的二维布局能力，可精确控制行和列的尺寸和位置 | 页面整体结构布局（头部、主体、侧边栏、底部）、复杂的网格卡片布局、需要同时控制行和列的场景 |
选择建议：
• 如果布局是一维的（只需要控制行或列），优先使用Flexbox；
• 如果布局是二维的（需要同时控制行和列），优先使用Grid；
• 实际开发中，两者可以结合使用：用Grid搭建页面整体框架，用Flexbox实现框架内部的局部布局。
本阶段核心知识点总结
-
布局是CSS的核心应用：掌握不同的布局方式，是实现页面结构的关键。
-
传统布局：
• 文档流是基础，通过display属性改变元素显示类型；
• float用于实现元素并排，但会导致高度塌陷，需清除浮动；
• position用于精准定位元素，relative+absolute是经典组合，fixed用于固定元素。
- 现代布局（推荐）：
• Flexbox是一维布局首选，轻松实现居中、均分、自适应，是日常开发中使用频率最高的布局方式；
• Grid是二维布局首选，强大的行列控制能力，适合构建复杂的页面整体结构。
- 布局选择：一维布局用Flexbox，二维布局用Grid，两者结合使用效果最佳。
课后拓展任务
-
用Flexbox实现一个响应式的导航栏（在移动端自动换行）；
-
用Grid实现一个博客页面的布局（包含头部、文章列表、侧边栏、底部）；
-
尝试用Grid和Flexbox结合的方式，实现一个电商网站的首页布局（包含轮播图、商品分类、商品列表、页脚）；
-
学习CSS媒体查询（Media Query），结合Flexbox/Grid实现响应式布局，让页面在不同屏幕尺寸下都能正常显示。