CSS3 布局完全指南 - 从入门到精通
本文面向前端小白，通过实际案例详细讲解 CSS3 各种布局方式
目录
1. Flexbox 弹性布局
Flexbox 是 CSS3 引入的一维布局系统，特别适合处理行或列方向的布局。
1.1 基础概念
/*
* display: flex
* 作用：将容器设置为弹性盒子容器
* 效果：容器内的子元素（flex items）会按照弹性盒子规则排列
*/
.flex-container {
display: flex; /* 启用 flex 布局 */
background-color: #f0f0f0;
padding: 20px;
}
/*
* flex-direction
* 作用：定义主轴方向（子元素排列方向）
* 可选值：row(默认-水平) | row-reverse | column(垂直) | column-reverse
*/
.flex-row {
display: flex;
flex-direction: row; /* 水平排列，从左到右 */
}
.flex-column {
display: flex;
flex-direction: column; /* 垂直排列，从上到下 */
}1.2 完整案例：导航栏布局
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Flexbox 导航栏示例</title>
<style>
/*
* 导航栏容器
* 使用 flex 布局让子元素水平排列
*/
.navbar {
display: flex; /* 启用 flex 布局 */
justify-content: space-between; /* 两端对齐：logo在左，菜单在右 */
align-items: center; /* 垂直居中对齐 */
background-color: #333;
padding: 15px 30px;
}
/*
* Logo 样式
* flex: 0 0 auto 表示不伸缩，保持原有大小
*/
.logo {
color: white;
font-size: 24px;
font-weight: bold;
flex: 0 0 auto; /* 不伸缩，固定大小 */
}
/*
* 导航菜单容器
* display: flex 让菜单项水平排列
*/
.nav-menu {
display: flex; /* 子菜单项水平排列 */
gap: 30px; /* 菜单项之间的间距 */
list-style: none; /* 去掉列表默认样式 */
margin: 0;
padding: 0;
}
/*
* 导航链接样式
*/
.nav-menu a {
color: white;
text-decoration: none;
transition: color 0.3s;
}
.nav-menu a:hover {
color: #ff6b6b;
}
</style>
</head>
<body>
<nav class="navbar">
<div class="logo">我的网站</div>
<ul class="nav-menu">
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系方式</a></li>
</ul>
</nav>
</body>
</html>1.3 Flex 项目属性详解
/*
* flex: 1
* 作用：定义子元素如何分配剩余空间
* 语法：flex: flex-grow flex-shrink flex-basis
* flex: 1 等同于 flex: 1 1 0%
*/
.flex-item {
flex: 1; /* 等分剩余空间 */
}
/*
* flex-grow: 2
* 作用：定义子元素的放大比例
* 说明：如果所有子元素都是 flex:1，这个元素会占据 2 份空间
*/
.flex-item-large {
flex-grow: 2; /* 占据 2 倍空间 */
}
/*
* align-self
* 作用：单独设置某个子元素的对齐方式，覆盖容器的 align-items
*/
.flex-item-center {
align-self: center; /* 垂直居中 */
}
.flex-item-bottom {
align-self: flex-end; /* 底部对齐 */
}1.4 实战：卡片等分布局
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Flexbox 卡片布局</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box; /* 边框盒模型，padding和border不增加元素尺寸 */
}
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f5f5f5;
}
/*
* 卡片容器
* 使用 flex 实现响应式卡片布局
*/
.card-container {
display: flex;
flex-wrap: wrap; /* 允许换行 */
gap: 20px; /* 卡片之间的间距 */
justify-content: center; /* 水平居中 */
}
/*
* 单个卡片
* flex: 1 1 300px 表示：
* - flex-grow: 1（可以放大）
* - flex-shrink: 1（可以缩小）
* - flex-basis: 300px（基础宽度300px）
*/
.card {
flex: 1 1 300px; /* 响应式：最小300px，可伸缩 */
max-width: 400px; /* 最大宽度限制 */
background: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
overflow: hidden;
}
.card-image {
width: 100%;
height: 200px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.card-content {
padding: 20px;
}
.card-title {
font-size: 20px;
margin-bottom: 10px;
color: #333;
}
.card-text {
color: #666;
line-height: 1.6;
}
</style>
</head>
<body>
<div class="card-container">
<div class="card">
<div class="card-image"></div>
<div class="card-content">
<h3 class="card-title">卡片标题 1</h3>
<p class="card-text">这是卡片的内容描述，使用 Flexbox 实现自适应布局。</p>
</div>
</div>
<div class="card">
<div class="card-image"></div>
<div class="card-content">
<h3 class="card-title">卡片标题 2</h3>
<p class="card-text">卡片会根据容器宽度自动调整，保持美观的排列。</p>
</div>
</div>
<div class="card">
<div class="card-image"></div>
<div class="card-content">
<h3 class="card-title">卡片标题 3</h3>
<p class="card-text">缩小浏览器窗口，卡片会自动换行并重新排列。</p>
</div>
</div>
</div>
</body>
</html>2. Grid 网格布局
Grid 是 CSS3 最强大的二维布局系统，可以同时处理行和列。
2.1 基础概念
/*
* display: grid
* 作用：将容器设置为网格容器
* 效果：可以使用行和列定义复杂的二维布局
*/
.grid-container {
display: grid; /* 启用 grid 布局 */
background-color: #f0f0f0;
}
/*
* grid-template-columns
* 作用：定义列的宽度和数量
* 单位：px, %, fr(分数单位), auto, minmax()
*/
.grid-three-columns {
display: grid;
/* 3列等宽布局，每列占据可用空间的1/3 */
grid-template-columns: 1fr 1fr 1fr;
/* 或使用 repeat 简写： */
/* grid-template-columns: repeat(3, 1fr); */
gap: 20px; /* 网格间距 */
}
/*
* grid-template-rows
* 作用：定义行的高度
*/
.grid-fixed-rows {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px auto 200px; /* 第一行100px，第二行自适应，第三行200px */
}2.2 完整案例：圣杯布局
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Grid 圣杯布局</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*
* 页面整体网格容器
* 使用 grid-template-areas 定义布局区域
*/
.layout {
display: grid;
/*
* grid-template-areas
* 作用：使用命名的网格区域定义布局
* 每个字符串代表一行，每个单词代表一个单元格
*/
grid-template-areas:
"header header header" /* 第一行：header 占据3列 */
"sidebar main ads" /* 第二行：sidebar、main、ads 各1列 */
"footer footer footer"; /* 第三行：footer 占据3列 */
/*
* grid-template-columns
* 定义3列的宽度比例：侧边栏200px，主内容自适应，广告栏150px
*/
grid-template-columns: 200px 1fr 150px;
/*
* grid-template-rows
* 定义3行的高度：头部60px，主内容自适应，底部50px
*/
grid-template-rows: 60px 1fr 50px;
min-height: 100vh; /* 最小高度为视口高度 */
gap: 10px; /* 网格间距 */
padding: 10px;
background-color: #f0f0f0;
}
/*
* grid-area
* 作用：将元素放置到指定的网格区域
*/
.header {
grid-area: header; /* 放置到名为 header 的区域 */
background-color: #333;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.sidebar {
grid-area: sidebar; /* 放置到名为 sidebar 的区域 */
background-color: #4ecdc4;
padding: 20px;
}
.main {
grid-area: main; /* 放置到名为 main 的区域 */
background-color: white;
padding: 20px;
}
.ads {
grid-area: ads; /* 放置到名为 ads 的区域 */
background-color: #ff6b6b;
padding: 20px;
}
.footer {
grid-area: footer; /* 放置到名为 footer 的区域 */
background-color: #333;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
/*
* 响应式布局
* 当屏幕宽度小于768px时，改为单列布局
*/
@media (max-width: 768px) {
.layout {
grid-template-areas:
"header"
"main"
"sidebar"
"ads"
"footer";
grid-template-columns: 1fr; /* 单列 */
grid-template-rows: auto; /* 高度自适应 */
}
}
</style>
</head>
<body>
<div class="layout">
<header class="header">网站头部</header>
<aside class="sidebar">侧边栏导航</aside>
<main class="main">
<h2>主内容区域</h2>
<p>这是使用 CSS Grid 实现的经典圣杯布局。</p>
<p>Grid 布局让二维排版变得简单直观。</p>
</main>
<aside class="ads">广告区域</aside>
<footer class="footer">网站底部 © 2024</footer>
</div>
</body>
</html>2.3 Grid 项目定位
/*
* grid-column 和 grid-row
* 作用：控制网格项目跨越的行列范围
*/
.grid-item-span {
/* 从第1列开始，跨越2列 */
grid-column: 1 / 3;
/* 或写成： */
/* grid-column: 1 / span 2; */
/* 从第1行开始，跨越2行 */
grid-row: 1 / 3;
}
/*
* 使用 grid-area 简写
* 语法：grid-row-start / grid-column-start / grid-row-end / grid-column-end
*/
.grid-item-area {
grid-area: 1 / 1 / 3 / 4; /* 从(1,1)到(3,4)，跨越2行3列 */
}2.4 实战：图片画廊网格
<!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: #1a1a1a;
}
h1 {
color: white;
text-align: center;
margin-bottom: 30px;
}
/*
* 画廊网格容器
* 使用 auto-fit 和 minmax 实现响应式网格
*/
.gallery {
display: grid;
/*
* repeat(auto-fit, minmax(250px, 1fr))
* auto-fit: 自动填充可用空间
* minmax(250px, 1fr): 每个单元格最小250px，最大1fr（等分）
* 效果：自动计算能放多少列，列数随容器宽度变化
*/
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px; /* 图片间距 */
}
/*
* 画廊项目
*/
.gallery-item {
position: relative;
overflow: hidden;
border-radius: 8px;
aspect-ratio: 1 / 1; /* 保持正方形比例 */
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
}
/*
* 特色大图：跨越2行2列
*/
.gallery-item.featured {
grid-column: span 2; /* 跨越2列 */
grid-row: span 2; /* 跨越2行 */
aspect-ratio: auto;
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover; /* 图片填充整个容器，保持比例 */
transition: transform 0.3s;
}
.gallery-item:hover img {
transform: scale(1.1); /* 鼠标悬停时放大 */
}
.gallery-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,0.7);
color: white;
padding: 15px;
transform: translateY(100%);
transition: transform 0.3s;
}
.gallery-item:hover .gallery-overlay {
transform: translateY(0); /* 鼠标悬停时显示标题 */
}
</style>
</head>
<body>
<h1>CSS Grid 图片画廊</h1>
<div class="gallery">
<div class="gallery-item featured">
<div style="width:100%;height:100%;background:linear-gradient(135deg,#667eea,#764ba2);"></div>
<div class="gallery-overlay">特色图片 - 大图展示</div>
</div>
<div class="gallery-item">
<div style="width:100%;height:100%;background:linear-gradient(135deg,#f093fb,#f5576c);"></div>
<div class="gallery-overlay">图片 2</div>
</div>
<div class="gallery-item">
<div style="width:100%;height:100%;background:linear-gradient(135deg,#4facfe,#00f2fe);"></div>
<div class="gallery-overlay">图片 3</div>
</div>
<div class="gallery-item">
<div style="width:100%;height:100%;background:linear-gradient(135deg,#43e97b,#38f9d7);"></div>
<div class="gallery-overlay">图片 4</div>
</div>
<div class="gallery-item">
<div style="width:100%;height:100%;background:linear-gradient(135deg,#fa709a,#fee140);"></div>
<div class="gallery-overlay">图片 5</div>
</div>
<div class="gallery-item">
<div style="width:100%;height:100%;background:linear-gradient(135deg,#30cfd0,#330867);"></div>
<div class="gallery-overlay">图片 6</div>
</div>
</div>
</body>
</html>3. 定位布局
CSS 定位可以让元素脱离正常文档流，精确控制位置。
3.1 定位类型详解
/*
* position: static
* 作用：默认值，元素按照正常文档流排列
* 特点：不受 top、right、bottom、left 影响
*/
.static-box {
position: static; /* 正常文档流 */
}
/*
* position: relative
* 作用：相对定位，相对于元素原来的位置偏移
* 特点：不脱离文档流，原位置保留
*/
.relative-box {
position: relative; /* 相对定位 */
top: 20px; /* 向下偏移20px */
left: 30px; /* 向右偏移30px */
}
/*
* position: absolute
* 作用：绝对定位，相对于最近的定位祖先元素
* 特点：脱离文档流，原位置不保留
*/
.absolute-box {
position: absolute; /* 绝对定位 */
top: 0; /* 距离定位父元素顶部0 */
right: 0; /* 距离定位父元素右边0 */
}
/*
* position: fixed
* 作用：固定定位，相对于视口（浏览器窗口）
* 特点：滚动页面时位置不变
*/
.fixed-box {
position: fixed; /* 固定定位 */
bottom: 20px; /* 距离视口底部20px */
right: 20px; /* 距离视口右边20px */
}
/*
* position: sticky
* 作用：粘性定位，相对和固定的混合
* 特点：在阈值前相对定位，超过阈值后固定
*/
.sticky-header {
position: sticky; /* 粘性定位 */
top: 0; /* 距离视口顶部0时固定 */
}3.2 完整案例：模态对话框
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>定位布局 - 模态对话框</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
padding: 20px;
}
/*
* 页面内容
*/
.content {
max-width: 800px;
margin: 0 auto;
}
.content p {
margin-bottom: 20px;
line-height: 1.8;
}
/*
* 打开按钮
*/
.open-btn {
padding: 12px 30px;
background-color: #667eea;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
.open-btn:hover {
background-color: #5a67d8;
}
/*
* 模态框遮罩层
* position: fixed 覆盖整个视口
*/
.modal-overlay {
display: none; /* 默认隐藏 */
position: fixed; /* 固定定位，覆盖整个屏幕 */
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
z-index: 1000; /* 确保在最上层 */
}
/*
* 模态框内容
* 使用绝对定位居中显示
*/
.modal {
position: absolute; /* 相对于遮罩层绝对定位 */
top: 50%; /* 距离顶部50% */
left: 50%; /* 距离左边50% */
/*
* transform: translate(-50%, -50%)
* 作用：将元素向左和向上移动自身宽高的50%
* 效果：实现完美居中
*/
transform: translate(-50%, -50%);
background-color: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
min-width: 400px;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.modal-title {
font-size: 20px;
font-weight: bold;
}
/*
* 关闭按钮
*/
.close-btn {
background: none;
border: none;
font-size: 24px;
cursor: pointer;
color: #999;
}
.close-btn:hover {
color: #333;
}
/*
* 显示模态框的类
*/
.modal-overlay.active {
display: block;
}
</style>
</head>
<body>
<div class="content">
<h1>定位布局示例</h1>
<p>点击下面的按钮打开模态对话框。这个示例展示了如何使用 position: fixed 和 position: absolute 创建居中显示的模态框。</p>
<button class="open-btn" onclick="openModal()">打开模态框</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<!-- 模态框 -->
<div class="modal-overlay" id="modalOverlay">
<div class="modal">
<div class="modal-header">
<h2 class="modal-title">模态对话框</h2>
<button class="close-btn" onclick="closeModal()">×</button>
</div>
<div class="modal-body">
<p>这是一个使用 CSS 定位实现的模态对话框。</p>
<p>遮罩层使用 position: fixed 覆盖整个视口。</p>
<p>对话框使用 position: absolute + transform 实现居中。</p>
</div>
</div>
</div>
<script>
function openModal() {
document.getElementById('modalOverlay').classList.add('active');
}
function closeModal() {
document.getElementById('modalOverlay').classList.remove('active');
}
// 点击遮罩层关闭模态框
document.getElementById('modalOverlay').addEventListener('click', function(e) {
if (e.target === this) {
closeModal();
}
});
</script>
</body>
</html>3.3 z-index 堆叠顺序
/*
* z-index
* 作用：控制定位元素的堆叠顺序
* 特点：数值越大，越在上层；只对定位元素有效（非 static）
*/
.box1 {
position: absolute;
z-index: 1; /* 底层 */
}
.box2 {
position: absolute;
z-index: 10; /* 中层 */
}
.box3 {
position: absolute;
z-index: 100; /* 顶层 */
}4. 响应式布局
响应式设计让网页在不同设备上都能良好显示。
4.1 媒体查询基础
/*
* @media 媒体查询
* 作用：根据设备特性应用不同的样式
* 常用媒体特性：width, height, orientation, resolution
*/
/*
* 手机：小于 576px
*/
@media (max-width: 575.98px) {
.container {
padding: 10px;
}
}
/*
* 平板：576px - 767px
*/
@media (min-width: 576px) and (max-width: 767.98px) {
.container {
padding: 20px;
}
}
/*
* 桌面：768px - 991px
*/
@media (min-width: 768px) and (max-width: 991.98px) {
.container {
padding: 30px;
max-width: 720px;
}
}
/*
* 大屏桌面：992px 以上
*/
@media (min-width: 992px) {
.container {
padding: 40px;
max-width: 960px;
margin: 0 auto;
}
}4.2 响应式断点标准
/*
* 常用断点（Bootstrap 标准）
*/
/* 超小屏幕（手机） */
@media (max-width: 575.98px) { }
/* 小屏幕（大屏手机） */
@media (min-width: 576px) { }
/* 中等屏幕（平板） */
@media (min-width: 768px) { }
/* 大屏幕（桌面） */
@media (min-width: 992px) { }
/* 超大屏幕（大桌面） */
@media (min-width: 1200px) { }
/* 特大屏幕 */
@media (min-width: 1400px) { }4.3 完整案例：响应式页面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!--
* viewport 元标签
* 作用：控制视口大小和缩放
* width=device-width: 视口宽度等于设备宽度
* initial-scale=1.0: 初始缩放比例为1
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式布局示例</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
}
/*
* 导航栏
*/
.navbar {
background-color: #2c3e50;
color: white;
padding: 1rem;
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.5rem;
font-weight: bold;
}
.nav-links {
display: flex;
gap: 2rem;
list-style: none;
}
.nav-links a {
color: white;
text-decoration: none;
transition: color 0.3s;
}
.nav-links a:hover {
color: #3498db;
}
/*
* 汉堡菜单（移动端显示）
*/
.menu-toggle {
display: none; /* 桌面端隐藏 */
background: none;
border: none;
color: white;
font-size: 1.5rem;
cursor: pointer;
}
/*
* 主要内容区
*/
.hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 4rem 1rem;
text-align: center;
}
.hero h1 {
font-size: 3rem;
margin-bottom: 1rem;
}
.hero p {
font-size: 1.2rem;
max-width: 600px;
margin: 0 auto 2rem;
}
.btn {
display: inline-block;
padding: 12px 30px;
background-color: white;
color: #667eea;
text-decoration: none;
border-radius: 30px;
font-weight: bold;
transition: transform 0.3s;
}
.btn:hover {
transform: translateY(-2px);
}
/*
* 特性卡片区域
*/
.features {
padding: 4rem 1rem;
background-color: #f8f9fa;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.section-title {
text-align: center;
font-size: 2.5rem;
margin-bottom: 3rem;
color: #2c3e50;
}
/*
* 特性网格
* 移动端：1列
* 平板：2列
* 桌面：4列
*/
.features-grid {
display: grid;
gap: 2rem;
/* 默认移动端：单列 */
grid-template-columns: 1fr;
}
.feature-card {
background: white;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
text-align: center;
transition: transform 0.3s;
}
.feature-card:hover {
transform: translateY(-5px);
}
.feature-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 50%;
margin: 0 auto 1rem;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
}
.feature-card h3 {
margin-bottom: 1rem;
color: #2c3e50;
}
/*
* 平板：2列
*/
@media (min-width: 768px) {
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/*
* 桌面：4列
*/
@media (min-width: 992px) {
.features-grid {
grid-template-columns: repeat(4, 1fr);
}
}
/*
* 移动端导航样式
*/
@media (max-width: 767.98px) {
.menu-toggle {
display: block; /* 显示汉堡菜单 */
}
.nav-links {
display: none; /* 隐藏导航链接 */
position: absolute;
top: 60px;
left: 0;
right: 0;
background-color: #2c3e50;
flex-direction: column;
padding: 1rem;
gap: 1rem;
}
.nav-links.active {
display: flex; /* 点击后显示 */
}
.hero h1 {
font-size: 2rem;
}
.section-title {
font-size: 1.8rem;
}
}
/*
* 页脚
*/
.footer {
background-color: #2c3e50;
color: white;
text-align: center;
padding: 2rem;
}
</style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar">
<div class="nav-container">
<div class="logo">响应式网站</div>
<button class="menu-toggle" onclick="toggleMenu()">☰</button>
<ul class="nav-links" id="navLinks">
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">联系</a></li>
</ul>
</div>
</nav>
<!-- 主视觉区 -->
<section class="hero">
<h1>响应式布局</h1>
<p>使用 CSS3 媒体查询和弹性布局，创建适配各种设备的现代网页。无论是在手机、平板还是桌面电脑上，都能获得最佳浏览体验。</p>
<a href="#" class="btn">开始学习</a>
</section>
<!-- 特性展示 -->
<section class="features">
<div class="container">
<h2 class="section-title">核心特性</h2>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">📱</div>
<h3>移动优先</h3>
<p>从移动端开始设计，逐步增强到桌面端，确保最佳性能。</p>
</div>
<div class="feature-card">
<div class="feature-icon">🎨</div>
<h3>弹性布局</h3>
<p>使用 Flexbox 和 Grid 创建灵活、自适应的页面结构。</p>
</div>
<div class="feature-card">
<div class="feature-icon">⚡</div>
<h3>高性能</h3>
<p>优化的 CSS 代码，减少重绘和回流，提升页面加载速度。</p>
</div>
<div class="feature-card">
<div class="feature-icon">🔧</div>
<h3>易于维护</h3>
<p>模块化的 CSS 架构，便于团队协作和后期维护。</p>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="footer">
<p>© 2024 响应式布局教程. 保留所有权利。</p>
</footer>
<script>
function toggleMenu() {
document.getElementById('navLinks').classList.toggle('active');
}
</script>
</body>
</html>5. 实战案例
5.1 综合案例：企业官网首页
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>企业官网 - CSS3 布局实战</title>
<style>
/* ==================== 基础样式 ==================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth; /* 平滑滚动 */
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: #333;
}
/* ==================== 导航栏 ==================== */
/*
* 使用 Flexbox 实现导航栏布局
* position: sticky 实现滚动时固定在顶部
*/
.header {
position: sticky; /* 粘性定位 */
top: 0; /* 距离顶部0时固定 */
background-color: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px); /* 毛玻璃效果 */
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
z-index: 1000; /* 确保在最上层 */
}
.nav {
max-width: 1200px;
margin: 0 auto;
padding: 1rem 2rem;
display: flex; /* Flexbox 布局 */
justify-content: space-between; /* 两端对齐 */
align-items: center; /* 垂直居中 */
}
.nav-logo {
font-size: 1.5rem;
font-weight: bold;
color: #667eea;
}
.nav-menu {
display: flex;
gap: 2rem;
list-style: none;
}
.nav-menu a {
color: #333;
text-decoration: none;
font-weight: 500;
transition: color 0.3s;
}
.nav-menu a:hover {
color: #667eea;
}
/* ==================== 英雄区 ==================== */
/*
* 使用 Grid 实现左右两栏布局
*/
.hero {
min-height: 90vh;
display: grid; /* Grid 布局 */
grid-template-columns: 1fr 1fr; /* 两等分列 */
align-items: center; /* 垂直居中 */
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
gap: 4rem;
}
.hero-content h1 {
font-size: 3.5rem;
line-height: 1.2;
margin-bottom: 1.5rem;
color: #2c3e50;
}
.hero-content p {
font-size: 1.2rem;
color: #666;
margin-bottom: 2rem;
}
.hero-buttons {
display: flex;
gap: 1rem;
}
.btn-primary {
padding: 1rem 2rem;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
text-decoration: none;
border-radius: 8px;
font-weight: bold;
transition: transform 0.3s, box-shadow 0.3s;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
}
.btn-secondary {
padding: 1rem 2rem;
background: white;
color: #667eea;
text-decoration: none;
border-radius: 8px;
font-weight: bold;
border: 2px solid #667eea;
transition: all 0.3s;
}
.btn-secondary:hover {
background: #667eea;
color: white;
}
.hero-image {
display: flex;
justify-content: center;
align-items: center;
}
.hero-image-placeholder {
width: 100%;
max-width: 500px;
aspect-ratio: 4/3;
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
box-shadow: 0 20px 40px rgba(102, 126, 234, 0.3);
}
/* ==================== 服务区域 ==================== */
.services {
padding: 6rem 2rem;
background-color: #f8f9fa;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.section-header {
text-align: center;
margin-bottom: 4rem;
}
.section-header h2 {
font-size: 2.5rem;
color: #2c3e50;
margin-bottom: 1rem;
}
.section-header p {
color: #666;
font-size: 1.1rem;
max-width: 600px;
margin: 0 auto;
}
/*
* 服务卡片网格
* 使用 Grid 的 auto-fit 实现响应式
*/
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.service-card {
background: white;
padding: 2.5rem;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
transition: transform 0.3s, box-shadow 0.3s;
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.service-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
margin-bottom: 1.5rem;
}
.service-card h3 {
font-size: 1.3rem;
margin-bottom: 1rem;
color: #2c3e50;
}
.service-card p {
color: #666;
}
/* ==================== 数据统计 ==================== */
.stats {
padding: 5rem 2rem;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
}
.stats-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 3rem;
text-align: center;
}
.stat-item h3 {
font-size: 3rem;
margin-bottom: 0.5rem;
}
.stat-item p {
font-size: 1.1rem;
opacity: 0.9;
}
/* ==================== 页脚 ==================== */
.footer {
background-color: #2c3e50;
color: white;
padding: 3rem 2rem 2rem;
}
.footer-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 3rem;
margin-bottom: 3rem;
}
.footer-brand h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.footer-brand p {
color: #bdc3c7;
line-height: 1.8;
}
.footer-links h4 {
margin-bottom: 1rem;
color: #ecf0f1;
}
.footer-links ul {
list-style: none;
}
.footer-links li {
margin-bottom: 0.5rem;
}
.footer-links a {
color: #bdc3c7;
text-decoration: none;
transition: color 0.3s;
}
.footer-links a:hover {
color: white;
}
.footer-bottom {
max-width: 1200px;
margin: 0 auto;
padding-top: 2rem;
border-top: 1px solid #34495e;
text-align: center;
color: #bdc3c7;
}
/* ==================== 响应式设计 ==================== */
@media (max-width: 991.98px) {
.hero {
grid-template-columns: 1fr; /* 单列 */
text-align: center;
}
.hero-content h1 {
font-size: 2.5rem;
}
.hero-buttons {
justify-content: center;
}
.hero-image {
order: -1; /* 图片移到上方 */
}
.footer-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 767.98px) {
.nav-menu {
display: none; /* 移动端隐藏菜单 */
}
.hero-content h1 {
font-size: 2rem;
}
.section-header h2 {
font-size: 1.8rem;
}
.footer-grid {
grid-template-columns: 1fr;
text-align: center;
}
.stat-item h3 {
font-size: 2rem;
}
}
</style>
</head>
<body>
<!-- 导航栏 -->
<header class="header">
<nav class="nav">
<div class="nav-logo">🏢 TechCorp</div>
<ul class="nav-menu">
<li><a href="#home">首页</a></li>
<li><a href="#services">服务</a></li>
<li><a href="#about">关于</a></li>
<li><a href="#contact">联系</a></li>
</ul>
</nav>
</header>
<!-- 英雄区 -->
<section class="hero" id="home">
<div class="hero-content">
<h1>打造卓越的<br>数字体验</h1>
<p>我们专注于为企业提供创新的数字解决方案，帮助您在数字时代脱颖而出。从网站开发到移动应用，我们为您提供全方位的技术支持。</p>
<div class="hero-buttons">
<a href="#" class="btn-primary">立即开始</a>
<a href="#" class="btn-secondary">了解更多</a>
</div>
</div>
<div class="hero-image">
<div class="hero-image-placeholder">
🚀 创新科技
</div>
</div>
</section>
<!-- 服务区域 -->
<section class="services" id="services">
<div class="container">
<div class="section-header">
<h2>我们的服务</h2>
<p>提供全方位的数字化解决方案，助力企业转型升级</p>
</div>
<div class="services-grid">
<div class="service-card">
<div class="service-icon">💻</div>
<h3>网站开发</h3>
<p>响应式网站设计与开发，确保在各种设备上都能获得最佳用户体验。</p>
</div>
<div class="service-card">
<div class="service-icon">📱</div>
<h3>移动应用</h3>
<p>iOS 和 Android 原生应用开发，以及跨平台解决方案。</p>
</div>
<div class="service-card">
<div class="service-icon">🎨</div>
<h3>UI/UX 设计</h3>
<p>以用户为中心的设计理念，打造美观且易用的界面。</p>
</div>
<div class="service-card">
<div class="service-icon">☁️</div>
<h3>云服务</h3>
<p>提供安全、可靠的云基础设施和部署解决方案。</p>
</div>
<div class="service-card">
<div class="service-icon">🔒</div>
<h3>网络安全</h3>
<p>全面的安全评估和防护方案，保护您的数字资产。</p>
</div>
<div class="service-card">
<div class="service-icon">📊</div>
<h3>数据分析</h3>
<p>深度数据挖掘和可视化，助力商业决策。</p>
</div>
</div>
</div>
</section>
<!-- 数据统计 -->
<section class="stats">
<div class="stats-grid">
<div class="stat-item">
<h3>500+</h3>
<p>成功案例</p>
</div>
<div class="stat-item">
<h3>98%</h3>
<p>客户满意度</p>
</div>
<div class="stat-item">
<h3>50+</h3>
<p>专业团队</p>
</div>
<div class="stat-item">
<h3>24/7</h3>
<p>技术支持</p>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="footer">
<div class="footer-grid">
<div class="footer-brand">
<h3>🏢 TechCorp</h3>
<p>致力于为企业提供最前沿的数字化解决方案，帮助客户在数字时代取得成功。</p>
</div>
<div class="footer-links">
<h4>产品</h4>
<ul>
<li><a href="#">网站开发</a></li>
<li><a href="#">移动应用</a></li>
<li><a href="#">云服务</a></li>
</ul>
</div>
<div class="footer-links">
<h4>公司</h4>
<ul>
<li><a href="#">关于我们</a></li>
<li><a href="#">团队</a></li>
<li><a href="#">招聘</a></li>
</ul>
</div>
<div class="footer-links">
<h4>支持</h4>
<ul>
<li><a href="#">帮助中心</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">隐私政策</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2024 TechCorp. 保留所有权利。</p>
</div>
</footer>
</body>
</html>总结
本文详细介绍了 CSS3 的四大布局技术：
1. Flexbox 弹性布局
适用场景：一维布局（行或列）
核心属性：
display: flex,justify-content,align-items,flex特点：简单易学，适合组件级布局
2. Grid 网格布局
适用场景：二维布局（同时处理行和列）
核心属性：
display: grid,grid-template-columns/rows,grid-area特点：功能强大，适合页面级布局
3. 定位布局
适用场景：特殊定位需求（弹窗、悬浮按钮等）
核心属性：
position(relative/absolute/fixed/sticky),z-index特点：精确控制，但会破坏文档流
4. 响应式布局
适用场景：适配不同设备
核心技术：媒体查询
@media, 弹性单位, 移动优先特点：现代网页必备技能
学习建议
从 Flexbox 开始：相对简单，日常使用频率高
掌握 Grid：现代布局的首选方案
理解定位：知道何时使用，避免滥用
实践响应式：所有项目都应该考虑移动端
希望这篇教程能帮助你掌握 CSS3 布局！