《前端技术基础》第03章 CSS 布局【合集】
《前端技术基础》第03章 CSS 布局【合集】
Rossy Yan
发布于 2025-01-24 11:24:56
发布于 2025-01-24 11:24:56
CSS 布局（Cascading Style Sheets Layout）是网页设计的核心，定义元素位置、大小和排列，构建页面结构。其布局模式多样：Flexbox 通过display:flex激活，借助justify-content和align-items灵活排列元素，适用于导航栏、卡片列表；CSS Grid 用grid-template-columns和grid-template-rows定义二维网格定位元素，常用于电商、多列图文排版；传统流式布局基于文档流，元素顺序排列，自适应屏幕宽度，保障页面可读性。这些模式协同，助力开发者打造适配多设备的优质布局。
第一节 传统CSS 布局方式
CSS（Cascading Style Sheets）作为用于网页样式设计的重要语言，其传统布局方式在网页页面的构建中发挥着关键作用。各自以不同的方式塑造着网页的“外观”，以下为您详细介绍：
1.1 文档流（Document Flow）
传统CSS 布局中，HTML 元素的排版主要遵循文档流规则。文档流是一种基于 HTML 文档中元素出现顺序的自然排版机制。块级元素（如<div>、<p>、<h1> - <h6>等）在文档流中会独占一行，自上而下依次排列，其宽度默认与父元素宽度一致，高度则由内容决定。
示例1-1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文档流与默认布局示例</title>
<style>
div {
background-color: lightblue;
margin: 5px;
}
p {
background-color: lightgreen;
margin: 5px;
}
</style>
</head>
<body>
<div>这是一个块级元素div</div>
<p>这是一个段落元素p</p>
<div>这是另一个块级元素div</div>
</body>
</html>运行结果：
行内元素（如<span>、<a>、<img>等）则会在同一行内按照顺序排列，直到该行空间不足时才会换行。行内元素的宽度和高度由其内容决定，并且不能直接设置宽度和高度属性（部分特殊的行内元素如<img>除外）。
示例1-2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行内元素在文档流中的布局示例</title>
<style>
span {
background-color: lightcoral;
margin: 5px;
}
a {
background-color: lightyellow;
margin: 5px;
}
</style>
</head>
<body>
<span>这是一个行内元素span</span>
<a href="#">这是一个链接元素a</a>
<span>这是另一个行内元素span</span>
</body>
</html>运行结果：
1.2 显示属性（Display）
display属性是 CSS 布局中的关键属性之一，它用于定义元素的显示类型，从而改变元素在文档流中的默认行为。以下为您详细介绍常见的 display 属性值：
1.2.1 块级元素：block
block 将元素显示为块级元素，使其具有块级元素的特性，如独占一行、可以设置宽度和高度等属性。
示例1-3：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display:block示例</title>
<style>
span {
display: block;
background-color: lightblue;
width: 200px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<span>将行内元素span显示为块级元素</span>
</body>
</html>运行结果：
1.2.2 行内元素：inline
inline：将元素显示为行内元素，恢复元素的行内显示特性。
示例1-4：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display:inline示例</title>
<style>
div {
display: inline;
background-color: lightgreen;
margin: 5px;
}
</style>
</head>
<body>
<div>将块级元素div显示为行内元素</div>
<div>这是另一个同样显示为行内元素的div</div>
</body>
</html>运行结果：
1.2.3 隐藏元素：none
none：隐藏元素，使元素在页面中不显示，并且不占据任何空间。
示例1-5：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display:none示例</title>
<style>
p {
display: none;
}
</style>
</head>
<body>
<p>这段文字将不会显示在页面上</p>
</body>
</html>运行结果（不显示）：
第二节 浮动布局（Float 布局）
为了实现更复杂的布局效果，浮动布局（Float 布局）应运而生。float 属性的引入使得元素可以脱离文档流，向左或向右浮动，直到它的外边缘碰到包含块或者另一个浮动元素的边框为止。这为多列布局和图文混排等复杂布局提供了可能。以下是float属性常见取值及作用：
2.1 左浮动：left
float: left 会使元素向左浮动，脱离正常的文档流，直到其外边缘碰到包含块或另一个浮动元素的边框为止。
示例2-1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Float Left Example</title>
<style>
.float-left {
float: left;
width: 100px;
height: 100px;
background-color: lightblue;
margin: 10px;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="clearfix">
<div class="float-left">元素 1</div>
<div class="float-left">元素 2</div>
<div class="float-left">元素 3</div>
</div>
<p>这是一段普通文本，用于展示浮动元素与文本的关系。</p>
</body>
</html>运行结果：
2.2 右浮动：right
float: right 与 float: left 相反，它会使元素向右浮动，直到其右边框碰到包含块的右边框或者另一个浮动元素的左边框。
示例2-2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Float Right Example</title>
<style>
.float-right {
float: right;
width: 100px;
height: 100px;
background-color: lightgreen;
margin: 10px;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="clearfix">
<div class="float-right">元素 1</div>
<div class="float-right">元素 2</div>
<div class="float-right">元素 3</div>
</div>
<p>这是一段普通文本，用于展示浮动元素与文本的关系。</p>
</body>
</html>运行结果：
2.2 不浮动：none
float: none 是 float属性的默认值，设置该属性后元素会按照正常的文档流进行排列。
示例2-3：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Float None Example</title>
<style>
.float-none {
float: none;
width: 100px;
height: 100px;
background-color: lightcoral;
margin: 10px;
}
</style>
</head>
<body>
<div class="float-none">元素 1</div>
<div class="float-none">元素 2</div>
<div class="float-none">元素 3</div>
<p>这是一段普通文本，用于展示不浮动元素与文本的关系。</p>
</body>
</html>运行结果：
第三节 定位布局（Position 布局）
定位布局（Position 布局）是 CSS 中用于精确控制网页元素位置的重要技术，通过position属性来实现，它有四个常见的值，为网页开发者提供了多样化的定位方式，以下为您详细介绍：
3.1 相对定位（Relative Positioning）
通过position: relative设置，元素相对自身在文档流中的位置偏移，偏移量由top等属性控制，原文档流空间保留。常用于微调元素位置，不影响其他元素布局。
示例3-1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位示例</title>
<style>
div {
position: relative;
left: 50px;
top: 30px;
width: 150px;
height: 150px;
background-color: lightcoral;
}
</style>
</head>
<body>
<div>相对定位的元素</div>
</body>
</html>运行结果：
3.2 绝对定位（Absolute Positioning）
以position: absolute声明，元素相对最近已定位祖先元素（无则相对初始包含块）定位，会脱离文档流，不占原空间，可能覆盖其他元素。适用于创建弹窗、悬浮按钮等独立于文档流的元素。
示例3-2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位示例</title>
<style>
.parent {
position: relative;
width: 300px;
height: 300px;
border: 1px solid black;
}
.child {
position: absolute;
right: 20px;
bottom: 20px;
width: 100px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">绝对定位的子元素</div>
</div>
</body>
</html>运行结果：
3.3 固定定位（Fixed Positioning）
使用position: fixed实现，元素始终相对浏览器窗口定位，位置不随页面滚动改变。常用于创建固定在页面特定位置的元素，如固定导航栏、侧边快捷按钮。
示例3-3：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位示例</title>
<style>
.fixed {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: lightgreen;
padding: 10px;
}
</style>
</head>
<body>
<div class="fixed">固定在底部的元素</div>
<p>这里是大量的内容，当页面滚动时，底部的元素始终保持可见。</p>
<p>...</p> <!-- 省略大量内容 -->
</body>
</html>运行结果：
3.4 粘性定位（Sticky Positioning）
通过position: sticky设置，元素在正常滚动时类似相对定位，滚动到特定位置（由top等属性决定）则固定，之后再恢复相对定位。适合制作长页面中可随滚动固定的目录、标题等。
示例3-4：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>粘性定位示例</title>
<style>
.sticky {
position: sticky;
top: 0;
background-color: lightyellow;
padding: 10px;
}
</style>
</head>
<body>
<div class="sticky">粘性元素</div>
<p>这里是大量的页面内容，当页面滚动时，粘性元素会在特定位置固定。</p>
<p>...</p>
</body>
</html>运行结果：
第四节 弹性盒子布局（Flexbox 布局）
Flexbox（弹性盒子布局模型）是 CSS3 中引入的一种强大的布局技术，它为网页布局带来了极大的灵活性和便捷性。Flexbox 通过将容器元素设置为display:flex，使其内部的子元素可以按照弹性规则进行排列。它有四个常见的值，以下为您详细介绍：
4.1 水平从左到右排列：row
项目在弹性容器内水平排列，从左到右依次分布。适用于构建水平导航栏、水平排列的图标或卡片等布局，让元素在一行内展示，符合常规的阅读和视觉习惯。
示例4-1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex-direction: row示例</title>
<style>
.flex-container {
display: flex;
flex-direction: row;
background-color: lightgray;
}
.flex-item {
background-color: lightblue;
padding: 20px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">项目1</div>
<div class="flex-item">项目2</div>
<div class="flex-item">项目3</div>
</div>
</body>
</html>运行结果：
4.2 水平从右到左排列：row-reverse
与row相反，项目水平排列，但顺序是从右到左。在需要改变常规阅读顺序或突出右侧元素时使用，比如在从右向左阅读语言的网页设计中，或者希望右侧元素优先被用户注意到的场景。
示例4-2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex-direction: row-reverse示例</title>
<style>
.flex-container {
display: flex;
flex-direction: row-reverse;
background-color: lightgray;
}
.flex-item {
background-color: lightblue;
padding: 20px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">项目1</div>
<div class="flex-item">项目2</div>
<div class="flex-item">项目3</div>
</div>
</body>
</html>运行结果：
4.3 垂直从上到下排列：column
项目在弹性容器内垂直排列，从上到下依次分布。常用于创建垂直菜单、侧边栏以及垂直堆叠的内容区域，能有效利用垂直空间，使页面布局更紧凑、有条理。
示例4-3：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex-direction: column示例</title>
<style>
.flex-container {
display: flex;
flex-direction: column;
background-color: lightgray;
}
.flex-item {
background-color: lightblue;
padding: 20px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">项目1</div>
<div class="flex-item">项目2</div>
<div class="flex-item">项目3</div>
</div>
</body>
</html>运行结果：
4.4 垂直从下到上排列：column-reverse
与column相反，项目垂直排列且顺序为从下到上。在需要强调底部元素，或创造特殊视觉效果时使用，比如某些创意设计中希望打破常规的竖向排版顺序。
示例4-4：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex-direction: column-reverse示例</title>
<style>
.flex-container {
display: flex;
flex-direction: column-reverse;
background-color: lightgray;
}
.flex-item {
background-color: lightblue;
padding: 20px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">项目1</div>
<div class="flex-item">项目2</div>
<div class="flex-item">项目3</div>
</div>
</body>
</html>运行结果：
第五节 网格布局（Grid 布局）
Grid 布局（网格布局）是 CSS 中一种强大的二维布局模型，它能够将网页分割为行和列的网格，然后精确地将元素放置到这些网格区域中。与 Flexbox 布局（一维布局）不同，Grid通过将容器元素设置为display:grid，可以同时在水平和垂直方向上进行布局控制，为我们提供了更灵活的布局能力。以下为您详细介绍它的常见取值：
5.1 网格列宽：grid-template-columns
grid-template-columns 定义网格列宽，支持 px、%、vw、vh 等常规单位及 fr 分数单位。如 grid-template-columns: 100px 200px 设两列宽分别为 100px、200px；grid-template-columns: 1fr 2fr 按剩余空间比例分配，第一列占 1 份，第二列占 2 份。
示例5-1：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: grid;
grid-template-columns: 100px 200px;
gap: 10px;
}
.item {
background-color: lightblue;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
</div>
</body>
</html>运行结果：
5.2 网格列高：grid-template-rows
- grid-template-rows：定义网格行高，单位同
grid-template-columns。如grid-template-rows: 80px 120px创建两行，高度分别为 80px、120px ；grid-template-rows: 1fr 3fr按比例分配行高。
示例5-2：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: grid;
grid-template-rows: 80px 120px;
gap: 10px;
}
.item {
background-color: lightgreen;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
</div>
</body>
</html>运行结果：
5.3 网格区域：grid-template-areas
grid-template-areas通过自定义命名区域定义布局。先给元素设 grid-area 赋予名称，再在该属性中按名称组合，如 grid-template-areas: "header header" "content sidebar" 划分区域。
示例5-3：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100px 100px;
grid-template-areas:
"header header"
"content sidebar";
gap: 10px;
}
.header {
grid-area: header;
background-color: orange;
}
.content {
grid-area: content;
background-color: lightblue;
}
.sidebar {
grid-area: sidebar;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="container">
<div class="header">Header</div>
<div class="content">Content</div>
<div class="sidebar">Sidebar</div>
</div>
</body>
</html>运行结果：
5.4 网格间距：grid-gap
grid-gap 是合并写法，设网格单元格间距。grid-row-gap 设行间距，grid-column-gap 设列间距。grid-gap: 10px 20px 即行间距 10px，列间距 20px；单值时行列间距相同。
示例5-4：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 100px);
grid-gap: 15px;
}
.item {
background-color: pink;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>运行结果：
5.5 网格项目水平对齐：justify-items
justify-items 设置网格项目水平对齐方式，取值 start（左对齐）、end（右对齐）、center（居中对齐）、stretch（拉伸填充，默认值） 。
示例5-5：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px;
justify-items: center;
gap: 10px;
}
.item {
background-color: lightcoral;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>运行结果：
5.6 网格项目垂直对齐：align-items
设置网格项目垂直对齐方式，取值同 justify-items，分别对应顶部对齐、底部对齐、居中对齐和拉伸填充。
示例5-6：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 200px;
align-items: center;
gap: 10px;
}
.item {
background-color: lightseagreen;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
</div>
</body>
</html>运行结果：
5.7 网格整体水平对齐：justify-content
align-items用于设置整个网格在容器水平方向上的对齐方式，取值包括start（左对齐）、end（右对齐）、center（居中对齐）、space-around（项目周围均匀分布空间）、space-between（项目间间距相等，两端对齐）、space-evenly（项目及与容器边缘间距相等）、stretch（拉伸网格填充容器）。
示例5-7：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: 100px;
justify-content: space-around;
background-color: lightgray;
padding: 20px;
}
.item {
background-color: white;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>运行结果：
5.8 网格整体垂直对齐：align-content
align-content 用于设置整个网格在容器垂直方向对齐方式，取值与 justify-content 一致，用于控制网格在垂直方向分布。
示例5-8：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: grid;
grid-template-columns: 100px;
grid-template-rows: repeat(3, 100px);
align-content: space-between;
background-color: lavender;
height: 400px;
padding: 20px;
}
.item {
background-color: white;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>运行结果：
5.9 网格自动生成轨道宽度：grid-auto-columns
grid-auto-columns设置自动生成网格列轨道宽度。项目数超显式列数时，自动生成列宽由此属性决定，如 grid-auto-columns: 200px 。
示例5-9：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: grid;
grid-template-columns: 100px;
grid-auto-columns: 150px;
gap: 10px;
}
.item {
background-color: lightyellow;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>运行结果：
5.10 网格自动生成轨道高度：grid-auto-rows
grid-auto-rows设置自动生成网格行轨道高度。超出显式行数时，自动生成行高按此属性设定，如 grid-auto-rows: 150px 。
示例5-10：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: grid;
grid-template-rows: 100px;
grid-auto-rows: 120px;
gap: 10px;
}
.item {
background-color: lightsteelblue;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>运行结果：
5.11 网格项目自动排列方式：grid-auto-flow
grid-auto-flow控制网格项目自动排列方式。row（默认，按行排列）、column（按列排列）、dense（启用紧凑排列算法，填满网格）。
示例5-11（按列排列）：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: 100px;
grid-auto-flow: column;
gap: 10px;
}
.item {
background-color: lightpink;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>示例5-12（紧凑排列）：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
grid-auto-flow: dense;
gap: 10px;
}
.item {
background-color: lightcyan;
padding: 20px;
}
.item:nth-child(2) {
grid-column: 3;
grid-row: 2;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
<div class="item">Item 9</div>
</div>
</body>
</html>运行结果：
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2025-01-23，如有侵权请联系 cloudcommunity@tencent.com 删除
目录
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号