CSS布局技术是网页设计的核心,决定了元素在页面中的位置和排列方式。从传统的浮动布局到现代的Flexbox和Grid,布局技术不断演进。
东巴文（db-w.cn） 认为：掌握CSS布局技术是前端开发的基础,合理选择布局方式能大幅提升开发效率。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>display属性示例</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
h2 {
color: #764ba2;
margin: 30px 0 15px;
border-left: 4px solid #764ba2;
padding-left: 15px;
}
/* display示例 */
/* block */
.block-demo {
display: block;
background: #e3f2fd;
border: 2px solid #2196f3;
padding: 15px;
margin-bottom: 10px;
}
/* inline */
.inline-demo {
display: inline;
background: #f3e5f5;
border: 2px solid #9c27b0;
padding: 5px;
}
/* inline-block */
.inline-block-demo {
display: inline-block;
background: #e8f5e9;
border: 2px solid #4caf50;
padding: 15px;
margin: 5px;
width: 150px;
}
/* none */
.none-demo {
display: none;
background: #fff3cd;
border: 2px solid #ffc107;
padding: 15px;
}
/* flex */
.flex-demo {
display: flex;
background: #ffebee;
border: 2px solid #f44336;
padding: 15px;
gap: 10px;
}
.flex-demo .item {
background: #f44336;
color: white;
padding: 10px;
flex: 1;
text-align: center;
}
/* grid */
.grid-demo {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
background: #e0f2f1;
border: 2px solid #009688;
padding: 15px;
}
.grid-demo .item {
background: #009688;
color: white;
padding: 10px;
text-align: center;
}
/* 示例容器 */
.demo-container {
background: #f8f9fa;
padding: 15px;
border-radius: 5px;
margin: 15px 0;
}
/* 代码块 */
.code-block {
background: #f8f9fa;
padding: 15px;
border-radius: 5px;
border-left: 3px solid #667eea;
margin: 10px 0;
font-family: 'Courier New', monospace;
}
/* 表格 */
.info-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.info-table th,
.info-table td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
.info-table th {
background: #667eea;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h1>display属性</h1>
<h2>block（块级元素）</h2>
<p>独占一行,可设置宽高、内外边距。</p>
<div class="demo-container">
<div class="block-demo">块级元素 1</div>
<div class="block-demo">块级元素 2</div>
</div>
<div class="code-block">
display: block;
</div>
<h2>inline（行内元素）</h2>
<p>不独占一行,不能设置宽高,只能设置水平方向的内外边距。</p>
<div class="demo-container">
<span class="inline-demo">行内元素 1</span>
<span class="inline-demo">行内元素 2</span>
<span class="inline-demo">行内元素 3</span>
</div>
<div class="code-block">
display: inline;
</div>
<h2>inline-block（行内块元素）</h2>
<p>不独占一行,但可以设置宽高和内外边距。</p>
<div class="demo-container">
<div class="inline-block-demo">行内块 1</div>
<div class="inline-block-demo">行内块 2</div>
<div class="inline-block-demo">行内块 3</div>
</div>
<div class="code-block">
display: inline-block;
</div>
<h2>none（隐藏元素）</h2>
<p>元素不显示,不占据空间。</p>
<div class="demo-container">
<div class="block-demo">可见元素</div>
<div class="none-demo">隐藏元素（不可见）</div>
<div class="block-demo">可见元素</div>
</div>
<div class="code-block">
display: none;
</div>
<h2>flex（弹性布局）</h2>
<p>现代布局方式,灵活强大。</p>
<div class="demo-container">
<div class="flex-demo">
<div class="item">项目 1</div>
<div class="item">项目 2</div>
<div class="item">项目 3</div>
</div>
</div>
<div class="code-block">
display: flex;
</div>
<h2>grid（网格布局）</h2>
<p>二维布局系统,适合复杂布局。</p>
<div class="demo-container">
<div class="grid-demo">
<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>
</div>
<div class="code-block">
display: grid;<br>
grid-template-columns: repeat(3, 1fr);
</div>
<h2>display属性对比</h2>
<table class="info-table">
<thead>
<tr>
<th>属性值</th>
<th>是否独占一行</th>
<th>可否设置宽高</th>
<th>典型元素</th>
</tr>
</thead>
<tbody>
<tr>
<td>block</td>
<td>是</td>
<td>可以</td>
<td>div, p, h1-h6</td>
</tr>
<tr>
<td>inline</td>
<td>否</td>
<td>不可以</td>
<td>span, a, strong</td>
</tr>
<tr>
<td>inline-block</td>
<td>否</td>
<td>可以</td>
<td>img, button</td>
</tr>
<tr>
<td>none</td>
<td>不显示</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>flex</td>
<td>是</td>
<td>可以</td>
<td>-</td>
</tr>
<tr>
<td>grid</td>
<td>是</td>
<td>可以</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动布局示例</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
h2 {
color: #764ba2;
margin: 30px 0 15px;
border-left: 4px solid #764ba2;
padding-left: 15px;
}
/* 浮动示例 */
/* 基本浮动 */
.float-left {
float: left;
width: 200px;
height: 150px;
background: #e3f2fd;
border: 2px solid #2196f3;
padding: 15px;
margin-right: 15px;
}
.float-right {
float: right;
width: 200px;
height: 150px;
background: #f3e5f5;
border: 2px solid #9c27b0;
padding: 15px;
margin-left: 15px;
}
/* 清除浮动 */
.clearfix::after {
content: "";
display: table;
clear: both;
}
/* 多列布局 */
.column {
float: left;
width: 33.333%;
padding: 15px;
box-sizing: border-box;
}
.column-box {
background: #e8f5e9;
border: 2px solid #4caf50;
padding: 20px;
height: 200px;
}
/* 图文环绕 */
.image-float {
float: left;
width: 150px;
height: 100px;
background: #fff3cd;
border: 2px solid #ffc107;
margin: 0 15px 10px 0;
}
/* 导航菜单 */
.nav {
background: #667eea;
padding: 0;
list-style: none;
}
.nav li {
float: left;
}
.nav li a {
display: block;
color: white;
text-decoration: none;
padding: 15px 20px;
}
.nav li a:hover {
background: #764ba2;
}
/* 代码块 */
.code-block {
background: #f8f9fa;
padding: 15px;
border-radius: 5px;
border-left: 3px solid #667eea;
margin: 10px 0;
font-family: 'Courier New', monospace;
}
/* 表格 */
.info-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.info-table th,
.info-table td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
.info-table th {
background: #667eea;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h1>浮动布局</h1>
<h2>基本浮动</h2>
<h3>左浮动</h3>
<div class="clearfix">
<div class="float-left">
左浮动元素
</div>
<p>这是文本内容,会环绕在浮动元素周围。浮动元素脱离文档流,但仍会影响文本排列。</p>
</div>
<div class="code-block">
float: left;
</div>
<h3>右浮动</h3>
<div class="clearfix">
<div class="float-right">
右浮动元素
</div>
<p>这是文本内容,会环绕在浮动元素周围。浮动元素脱离文档流,但仍会影响文本排列。</p>
</div>
<div class="code-block">
float: right;
</div>
<h2>清除浮动</h2>
<p>浮动元素会导致父容器高度塌陷,需要清除浮动。</p>
<div class="code-block">
/* 方法1：clearfix */<br>
.clearfix::after {<br>
content: "";<br>
display: table;<br>
clear: both;<br>
}<br><br>
/* 方法2：overflow */<br>
.parent {<br>
overflow: hidden;<br>
}
</div>
<h2>多列布局</h2>
<div class="clearfix">
<div class="column">
<div class="column-box">
<h3>第一列</h3>
<p>列内容</p>
</div>
</div>
<div class="column">
<div class="column-box">
<h3>第二列</h3>
<p>列内容</p>
</div>
</div>
<div class="column">
<div class="column-box">
<h3>第三列</h3>
<p>列内容</p>
</div>
</div>
</div>
<h2>图文环绕</h2>
<div class="clearfix">
<div class="image-float">图片区域</div>
<p>这是一段很长的文本内容,用于演示图文环绕效果。图片浮动在左侧,文本会自动环绕在图片周围。这是传统的图文排版方式,在新闻网站和博客中经常使用。</p>
</div>
<h2>导航菜单</h2>
<ul class="nav clearfix">
<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>
<h2>浮动属性说明</h2>
<table class="info-table">
<thead>
<tr>
<th>属性值</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>left</td>
<td>元素向左浮动</td>
</tr>
<tr>
<td>right</td>
<td>元素向右浮动</td>
</tr>
<tr>
<td>none</td>
<td>不浮动（默认）</td>
</tr>
<tr>
<td>inherit</td>
<td>继承父元素的浮动属性</td>
</tr>
</tbody>
</table>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示：</strong>浮动布局是传统布局方式,现代布局推荐使用Flexbox和Grid。
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox布局示例</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
h2 {
color: #764ba2;
margin: 30px 0 15px;
border-left: 4px solid #764ba2;
padding-left: 15px;
}
/* Flexbox示例 */
/* 基本容器 */
.flex-container {
display: flex;
background: #f8f9fa;
padding: 15px;
border: 2px solid #ddd;
margin-bottom: 20px;
gap: 10px;
}
.flex-item {
background: #667eea;
color: white;
padding: 20px;
text-align: center;
border-radius: 5px;
}
/* flex-direction */
.flex-row {
flex-direction: row;
}
.flex-row-reverse {
flex-direction: row-reverse;
}
.flex-column {
flex-direction: column;
}
.flex-column-reverse {
flex-direction: column-reverse;
}
/* justify-content */
.justify-start {
justify-content: flex-start;
}
.justify-end {
justify-content: flex-end;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.justify-around {
justify-content: space-around;
}
.justify-evenly {
justify-content: space-evenly;
}
/* align-items */
.align-start {
align-items: flex-start;
height: 150px;
}
.align-end {
align-items: flex-end;
height: 150px;
}
.align-center {
align-items: center;
height: 150px;
}
.align-stretch {
align-items: stretch;
height: 150px;
}
/* flex-wrap */
.flex-nowrap {
flex-wrap: nowrap;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-wrap-reverse {
flex-wrap: wrap-reverse;
}
/* flex-grow, flex-shrink, flex-basis */
.grow-1 {
flex-grow: 1;
}
.grow-2 {
flex-grow: 2;
}
.shrink-0 {
flex-shrink: 0;
}
/* 实际应用 */
/* 导航栏 */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background: #667eea;
padding: 15px 20px;
border-radius: 5px;
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-layout {
display: flex;
gap: 20px;
}
.card {
flex: 1;
background: white;
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.card h3 {
color: #667eea;
margin-bottom: 10px;
}
/* 圣杯布局 */
.holy-grail {
display: flex;
flex-direction: column;
min-height: 400px;
}
.holy-grail-header,
.holy-grail-footer {
background: #667eea;
color: white;
padding: 20px;
text-align: center;
}
.holy-grail-body {
display: flex;
flex: 1;
}
.holy-grail-content {
flex: 1;
background: #f8f9fa;
padding: 20px;
}
.holy-grail-nav,
.holy-grail-ads {
flex: 0 0 150px;
background: #e8f5e9;
padding: 20px;
}
.holy-grail-nav {
order: -1;
}
/* 代码块 */
.code-block {
background: #f8f9fa;
padding: 15px;
border-radius: 5px;
border-left: 3px solid #667eea;
margin: 10px 0;
font-family: 'Courier New', monospace;
}
/* 表格 */
.info-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.info-table th,
.info-table td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
.info-table th {
background: #667eea;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h1>Flexbox布局</h1>
<h2>flex-direction（主轴方向）</h2>
<h3>row（默认）</h3>
<div class="flex-container flex-row">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<h3>row-reverse</h3>
<div class="flex-container flex-row-reverse">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<h3>column</h3>
<div class="flex-container flex-column">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<h3>column-reverse</h3>
<div class="flex-container flex-column-reverse">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<h2>justify-content（主轴对齐）</h2>
<h3>flex-start</h3>
<div class="flex-container justify-start">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<h3>flex-end</h3>
<div class="flex-container justify-end">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<h3>center</h3>
<div class="flex-container justify-center">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<h3>space-between</h3>
<div class="flex-container justify-between">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<h3>space-around</h3>
<div class="flex-container justify-around">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<h3>space-evenly</h3>
<div class="flex-container justify-evenly">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<h2>align-items（交叉轴对齐）</h2>
<h3>flex-start</h3>
<div class="flex-container align-start">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<h3>flex-end</h3>
<div class="flex-container align-end">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<h3>center</h3>
<div class="flex-container align-center">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<h3>stretch</h3>
<div class="flex-container align-stretch">
<div class="flex-item" style="padding: 10px;">1</div>
<div class="flex-item" style="padding: 10px;">2</div>
<div class="flex-item" style="padding: 10px;">3</div>
</div>
<h2>flex-wrap（换行）</h2>
<h3>nowrap（默认）</h3>
<div class="flex-container flex-nowrap">
<div class="flex-item" style="width: 200px;">1</div>
<div class="flex-item" style="width: 200px;">2</div>
<div class="flex-item" style="width: 200px;">3</div>
</div>
<h3>wrap</h3>
<div class="flex-container flex-wrap">
<div class="flex-item" style="width: 200px;">1</div>
<div class="flex-item" style="width: 200px;">2</div>
<div class="flex-item" style="width: 200px;">3</div>
</div>
<h2>flex-grow, flex-shrink, flex-basis</h2>
<div class="flex-container">
<div class="flex-item grow-1">flex-grow: 1</div>
<div class="flex-item grow-2">flex-grow: 2</div>
<div class="flex-item grow-1">flex-grow: 1</div>
</div>
<div class="code-block">
flex-grow: 1; /* 放大比例 */<br>
flex-shrink: 1; /* 缩小比例 */<br>
flex-basis: auto; /* 初始大小 */
</div>
<h2>实际应用：导航栏</h2>
<div class="navbar">
<div class="logo">东巴文</div>
<div class="nav-links">
<a href="#">首页</a>
<a href="#">产品</a>
<a href="#">服务</a>
<a href="#">关于</a>
</div>
</div>
<h2>实际应用：卡片布局</h2>
<div class="card-layout">
<div class="card">
<h3>卡片 1</h3>
<p>这是卡片内容</p>
</div>
<div class="card">
<h3>卡片 2</h3>
<p>这是卡片内容</p>
</div>
<div class="card">
<h3>卡片 3</h3>
<p>这是卡片内容</p>
</div>
</div>
<h2>实际应用：圣杯布局</h2>
<div class="holy-grail">
<div class="holy-grail-header">头部</div>
<div class="holy-grail-body">
<div class="holy-grail-content">主内容区域</div>
<div class="holy-grail-nav">导航</div>
<div class="holy-grail-ads">广告</div>
</div>
<div class="holy-grail-footer">底部</div>
</div>
<h2>Flexbox属性总结</h2>
<table class="info-table">
<thead>
<tr>
<th>属性</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr><td>flex-direction</td><td>主轴方向</td></tr>
<tr><td>justify-content</td><td>主轴对齐</td></tr>
<tr><td>align-items</td><td>交叉轴对齐</td></tr>
<tr><td>flex-wrap</td><td>换行方式</td></tr>
<tr><td>align-content</td><td>多行对齐</td></tr>
<tr><td>flex-grow</td><td>放大比例</td></tr>
<tr><td>flex-shrink</td><td>缩小比例</td></tr>
<tr><td>flex-basis</td><td>初始大小</td></tr>
<tr><td>order</td><td>排列顺序</td></tr>
</tbody>
</table>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid布局示例</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
h2 {
color: #764ba2;
margin: 30px 0 15px;
border-left: 4px solid #764ba2;
padding-left: 15px;
}
/* Grid示例 */
/* 基本容器 */
.grid-container {
display: grid;
background: #f8f9fa;
padding: 15px;
border: 2px solid #ddd;
margin-bottom: 20px;
gap: 10px;
}
.grid-item {
background: #667eea;
color: white;
padding: 20px;
text-align: center;
border-radius: 5px;
}
/* grid-template-columns */
.grid-cols-fixed {
grid-template-columns: 200px 200px 200px;
}
.grid-cols-percent {
grid-template-columns: 25% 50% 25%;
}
.grid-cols-fr {
grid-template-columns: 1fr 2fr 1fr;
}
.grid-cols-repeat {
grid-template-columns: repeat(3, 1fr);
}
.grid-cols-auto {
grid-template-columns: auto auto auto;
}
.grid-cols-minmax {
grid-template-columns: minmax(100px, 200px) minmax(150px, 1fr) minmax(100px, 200px);
}
/* grid-template-rows */
.grid-rows {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px 200px 100px;
}
/* gap */
.grid-gap {
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
/* grid-area */
.grid-area {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
}
.grid-area .item-1 {
grid-area: 1 / 1 / 3 / 3;
background: #e3f2fd;
color: #333;
}
.grid-area .item-2 {
grid-area: 1 / 3 / 2 / 4;
background: #f3e5f5;
color: #333;
}
.grid-area .item-3 {
grid-area: 2 / 3 / 4 / 4;
background: #e8f5e9;
color: #333;
}
.grid-area .item-4 {
grid-area: 3 / 1 / 4 / 3;
background: #fff3cd;
color: #333;
}
/* 实际应用 */
/* 网格系统 */
.grid-system {
grid-template-columns: repeat(12, 1fr);
gap: 15px;
}
.col-6 {
grid-column: span 6;
}
.col-4 {
grid-column: span 4;
}
.col-3 {
grid-column: span 3;
}
/* 网站布局 */
.website-layout {
grid-template-areas:
"header header header"
"nav content ads"
"footer footer footer";
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
min-height: 400px;
gap: 0;
}
.website-layout .header {
grid-area: header;
background: #667eea;
color: white;
padding: 20px;
text-align: center;
}
.website-layout .nav {
grid-area: nav;
background: #e8f5e9;
padding: 20px;
}
.website-layout .content {
grid-area: content;
background: #f8f9fa;
padding: 20px;
}
.website-layout .ads {
grid-area: ads;
background: #fff3cd;
padding: 20px;
}
.website-layout .footer {
grid-area: footer;
background: #764ba2;
color: white;
padding: 20px;
text-align: center;
}
/* 代码块 */
.code-block {
background: #f8f9fa;
padding: 15px;
border-radius: 5px;
border-left: 3px solid #667eea;
margin: 10px 0;
font-family: 'Courier New', monospace;
}
/* 表格 */
.info-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.info-table th,
.info-table td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
.info-table th {
background: #667eea;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h1>Grid布局</h1>
<h2>grid-template-columns（列定义）</h2>
<h3>固定宽度</h3>
<div class="grid-container grid-cols-fixed">
<div class="grid-item">200px</div>
<div class="grid-item">200px</div>
<div class="grid-item">200px</div>
</div>
<h3>百分比</h3>
<div class="grid-container grid-cols-percent">
<div class="grid-item">25%</div>
<div class="grid-item">50%</div>
<div class="grid-item">25%</div>
</div>
<h3>fr单位</h3>
<div class="grid-container grid-cols-fr">
<div class="grid-item">1fr</div>
<div class="grid-item">2fr</div>
<div class="grid-item">1fr</div>
</div>
<h3>repeat()函数</h3>
<div class="grid-container grid-cols-repeat">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
<h3>auto关键字</h3>
<div class="grid-container grid-cols-auto">
<div class="grid-item">auto</div>
<div class="grid-item">auto auto</div>
<div class="grid-item">auto</div>
</div>
<h3>minmax()函数</h3>
<div class="grid-container grid-cols-minmax">
<div class="grid-item">minmax(100px, 200px)</div>
<div class="grid-item">minmax(150px, 1fr)</div>
<div class="grid-item">minmax(100px, 200px)</div>
</div>
<h2>grid-template-rows（行定义）</h2>
<div class="grid-container grid-rows">
<div class="grid-item">100px</div>
<div class="grid-item">200px</div>
<div class="grid-item">100px</div>
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
<h2>gap（间距）</h2>
<div class="grid-container grid-gap">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
<div class="code-block">
gap: 20px; /* 行列间距 */<br>
row-gap: 20px; /* 行间距 */<br>
column-gap: 20px; /* 列间距 */
</div>
<h2>grid-area（网格区域）</h2>
<div class="grid-container grid-area">
<div class="grid-item item-1">项目 1（跨2行2列）</div>
<div class="grid-item item-2">项目 2</div>
<div class="grid-item item-3">项目 3（跨2行）</div>
<div class="grid-item item-4">项目 4（跨2列）</div>
</div>
<div class="code-block">
grid-area: 1 / 1 / 3 / 3; /* 行开始 / 列开始 / 行结束 / 列结束 */<br>
/* 或 */<br>
grid-row: 1 / 3;<br>
grid-column: 1 / 3;
</div>
<h2>实际应用：网格系统</h2>
<div class="grid-container grid-system">
<div class="grid-item col-6">col-6（占6列）</div>
<div class="grid-item col-6">col-6（占6列）</div>
<div class="grid-item col-4">col-4</div>
<div class="grid-item col-4">col-4</div>
<div class="grid-item col-4">col-4</div>
<div class="grid-item col-3">col-3</div>
<div class="grid-item col-3">col-3</div>
<div class="grid-item col-3">col-3</div>
<div class="grid-item col-3">col-3</div>
</div>
<h2>实际应用：网站布局</h2>
<div class="grid-container website-layout">
<div class="header">头部</div>
<div class="nav">导航</div>
<div class="content">主内容区域</div>
<div class="ads">广告</div>
<div class="footer">底部</div>
</div>
<div class="code-block">
grid-template-areas:<br>
"header header header"<br>
"nav content ads"<br>
"footer footer footer";
</div>
<h2>Grid属性总结</h2>
<table class="info-table">
<thead>
<tr>
<th>属性</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr><td>grid-template-columns</td><td>定义列</td></tr>
<tr><td>grid-template-rows</td><td>定义行</td></tr>
<tr><td>grid-template-areas</td><td>定义区域</td></tr>
<tr><td>gap</td><td>间距</td></tr>
<tr><td>grid-area</td><td>项目区域</td></tr>
<tr><td>grid-column</td><td>项目列范围</td></tr>
<tr><td>grid-row</td><td>项目行范围</td></tr>
<tr><td>justify-items</td><td>水平对齐项目</td></tr>
<tr><td>align-items</td><td>垂直对齐项目</td></tr>
</tbody>
</table>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位布局示例</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
h2 {
color: #764ba2;
margin: 30px 0 15px;
border-left: 4px solid #764ba2;
padding-left: 15px;
}
/* 定位示例 */
/* 相对定位容器 */
.position-container {
position: relative;
background: #f8f9fa;
padding: 15px;
border: 2px solid #ddd;
height: 200px;
margin-bottom: 20px;
}
/* static */
.position-static {
position: static;
background: #e3f2fd;
border: 2px solid #2196f3;
padding: 15px;
}
/* relative */
.position-relative {
position: relative;
top: 20px;
left: 20px;
background: #f3e5f5;
border: 2px solid #9c27b0;
padding: 15px;
}
/* absolute */
.position-absolute {
position: absolute;
top: 20px;
right: 20px;
background: #e8f5e9;
border: 2px solid #4caf50;
padding: 15px;
}
/* fixed */
.position-fixed {
position: fixed;
bottom: 20px;
right: 20px;
background: #667eea;
color: white;
padding: 15px;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
z-index: 1000;
}
/* sticky */
.position-sticky {
position: sticky;
top: 0;
background: #764ba2;
color: white;
padding: 15px;
margin: 0 -30px;
}
/* z-index */
.z-index-demo {
position: relative;
height: 200px;
background: #f8f9fa;
border: 2px solid #ddd;
margin-bottom: 20px;
}
.z-index-1 {
position: absolute;
top: 20px;
left: 20px;
width: 100px;
height: 100px;
background: #e3f2fd;
border: 2px solid #2196f3;
z-index: 1;
}
.z-index-2 {
position: absolute;
top: 40px;
left: 40px;
width: 100px;
height: 100px;
background: #f3e5f5;
border: 2px solid #9c27b0;
z-index: 2;
}
.z-index-3 {
position: absolute;
top: 60px;
left: 60px;
width: 100px;
height: 100px;
background: #e8f5e9;
border: 2px solid #4caf50;
z-index: 3;
}
/* 实际应用 */
/* 模态框 */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal {
position: relative;
background: white;
padding: 30px;
border-radius: 10px;
max-width: 500px;
width: 90%;
}
.modal-close {
position: absolute;
top: 10px;
right: 10px;
background: none;
border: none;
font-size: 24px;
cursor: pointer;
color: #666;
}
/* 工具提示 */
.tooltip-container {
position: relative;
display: inline-block;
}
.tooltip {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: #333;
color: white;
padding: 5px 10px;
border-radius: 5px;
font-size: 12px;
white-space: nowrap;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip-container:hover .tooltip {
opacity: 1;
}
/* 代码块 */
.code-block {
background: #f8f9fa;
padding: 15px;
border-radius: 5px;
border-left: 3px solid #667eea;
margin: 10px 0;
font-family: 'Courier New', monospace;
}
/* 表格 */
.info-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.info-table th,
.info-table td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
.info-table th {
background: #667eea;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h1>定位布局</h1>
<h2>static（静态定位）</h2>
<p>默认值,元素按照正常文档流排列。</p>
<div class="position-container">
<div class="position-static">静态定位（默认）</div>
</div>
<div class="code-block">
position: static;
</div>
<h2>relative（相对定位）</h2>
<p>相对于元素自身原始位置进行偏移,仍占据文档流空间。</p>
<div class="position-container">
<div class="position-relative">相对定位（top: 20px; left: 20px;）</div>
</div>
<div class="code-block">
position: relative;<br>
top: 20px;<br>
left: 20px;
</div>
<h2>absolute（绝对定位）</h2>
<p>相对于最近的已定位祖先元素进行定位,脱离文档流。</p>
<div class="position-container">
<div class="position-absolute">绝对定位（top: 20px; right: 20px;）</div>
</div>
<div class="code-block">
position: absolute;<br>
top: 20px;<br>
right: 20px;
</div>
<h2>fixed（固定定位）</h2>
<p>相对于浏览器窗口进行定位,不随滚动条滚动。</p>
<div class="code-block">
position: fixed;<br>
bottom: 20px;<br>
right: 20px;
</div>
<p>（右下角有一个固定定位的示例）</p>
<h2>sticky（粘性定位）</h2>
<p>在滚动到指定位置前为相对定位,之后为固定定位。</p>
<div style="height: 200px; overflow-y: auto; border: 2px solid #ddd; margin-bottom: 20px;">
<div class="position-sticky">粘性定位（top: 0）</div>
<div style="padding: 20px;">
<p>内容 1</p>
<p>内容 2</p>
<p>内容 3</p>
<p>内容 4</p>
<p>内容 5</p>
<p>内容 6</p>
<p>内容 7</p>
<p>内容 8</p>
<p>内容 9</p>
<p>内容 10</p>
</div>
</div>
<div class="code-block">
position: sticky;<br>
top: 0;
</div>
<h2>z-index（层叠顺序）</h2>
<p>控制定位元素的堆叠顺序,值越大越在上层。</p>
<div class="z-index-demo">
<div class="z-index-1">z-index: 1</div>
<div class="z-index-2">z-index: 2</div>
<div class="z-index-3">z-index: 3</div>
</div>
<div class="code-block">
z-index: 1;<br>
z-index: 2;<br>
z-index: 3;
</div>
<h2>实际应用：工具提示</h2>
<div style="text-align: center; padding: 50px;">
<div class="tooltip-container">
<button style="padding: 10px 20px; background: #667eea; color: white; border: none; border-radius: 5px; cursor: pointer;">悬停查看提示</button>
<div class="tooltip">这是一个工具提示</div>
</div>
</div>
<h2>定位属性总结</h2>
<table class="info-table">
<thead>
<tr>
<th>属性值</th>
<th>相对对象</th>
<th>是否脱离文档流</th>
</tr>
</thead>
<tbody>
<tr>
<td>static</td>
<td>正常文档流</td>
<td>否</td>
</tr>
<tr>
<td>relative</td>
<td>元素自身原始位置</td>
<td>否</td>
</tr>
<tr>
<td>absolute</td>
<td>最近已定位祖先元素</td>
<td>是</td>
</tr>
<tr>
<td>fixed</td>
<td>浏览器窗口</td>
<td>是</td>
</tr>
<tr>
<td>sticky</td>
<td>滚动容器</td>
<td>否</td>
</tr>
</tbody>
</table>
</div>
<!-- 固定定位示例 -->
<div class="position-fixed">
固定定位示例
</div>
</body>
</html>
/* 一维布局：使用Flexbox */
.navbar {
display: flex;
justify-content: space-between;
}
/* 二维布局：使用Grid */
.dashboard {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
}
/* 文本环绕：使用浮动 */
.image {
float: left;
margin: 0 15px 10px 0;
}
/* 使用媒体查询 */
.container {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
@media (min-width: 768px) {
.container {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.container {
grid-template-columns: repeat(3, 1fr);
}
}
/* 不推荐：过度嵌套 */
.container .wrapper .content .box .item {
/* 样式 */
}
/* 推荐：扁平化 */
.container-item {
/* 样式 */
}
问题1：以下哪个属性可以让元素水平居中？
A. margin: auto; B. margin: 0 auto; C. text-align: center; D. align-items: center;
<details> <summary>点击查看答案</summary>答案：B
东巴文解释：margin: 0 auto; 可以让块级元素水平居中,前提是元素必须有明确的宽度。text-align: center; 用于文本居中,align-items: center; 用于Flexbox交叉轴居中。
</details>问题2：Flexbox的默认主轴方向是什么？
A. column B. row C. row-reverse D. column-reverse
<details> <summary>点击查看答案</summary>答案：B
东巴文解释：Flexbox的默认主轴方向是row（水平方向从左到右）。
</details>任务：创建一个响应式卡片布局页面,使用Grid布局,在小屏幕上显示1列,中等屏幕显示2列,大屏幕显示3列。
<details> <summary>点击查看参考答案</summary><!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式卡片布局 - 东巴文</title>
<style>
/* 全局设置 */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Segoe UI', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
h1 {
color: white;
text-align: center;
margin-bottom: 30px;
font-size: 2.5em;
}
/* 卡片网格 */
.card-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
/* 中等屏幕 */
@media (min-width: 768px) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* 大屏幕 */
@media (min-width: 1024px) {
.card-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* 卡片样式 */
.card {
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}
.card-image {
width: 100%;
height: 200px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 48px;
}
.card-content {
padding: 20px;
}
.card-title {
font-size: 1.5em;
margin-bottom: 10px;
color: #333;
}
.card-text {
color: #666;
line-height: 1.6;
margin-bottom: 15px;
}
.card-button {
display: inline-block;
padding: 10px 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
text-decoration: none;
border-radius: 5px;
transition: opacity 0.3s;
}
.card-button:hover {
opacity: 0.8;
}
/* 提示信息 */
.info {
background: rgba(255, 255, 255, 0.9);
padding: 15px;
border-radius: 5px;
margin-bottom: 20px;
text-align: center;
color: #333;
}
</style>
</head>
<body>
<div class="container">
<h1>响应式卡片布局</h1>
<div class="info">
💡 提示：调整浏览器窗口大小查看响应式效果（小屏1列 → 中屏2列 → 大屏3列）
</div>
<div class="card-grid">
<div class="card">
<div class="card-image">🎨</div>
<div class="card-content">
<h2 class="card-title">设计</h2>
<p class="card-text">创造美观的用户界面,提升用户体验。</p>
<a href="#" class="card-button">了解更多</a>
</div>
</div>
<div class="card">
<div class="card-image">💻</div>
<div class="card-content">
<h2 class="card-title">开发</h2>
<p class="card-text">编写高质量的代码,实现功能需求。</p>
<a href="#" class="card-button">了解更多</a>
</div>
</div>
<div class="card">
<div class="card-image">🚀</div>
<div class="card-content">
<h2 class="card-title">部署</h2>
<p class="card-text">将应用部署到服务器,让用户访问。</p>
<a href="#" class="card-button">了解更多</a>
</div>
</div>
<div class="card">
<div class="card-image">📊</div>
<div class="card-content">
<h2 class="card-title">分析</h2>
<p class="card-text">收集和分析数据,优化产品性能。</p>
<a href="#" class="card-button">了解更多</a>
</div>
</div>
<div class="card">
<div class="card-image">🔒</div>
<div class="card-content">
<h2 class="card-title">安全</h2>
<p class="card-text">保护用户数据安全,防止攻击。</p>
<a href="#" class="card-button">了解更多</a>
</div>
</div>
<div class="card">
<div class="card-image">⚡</div>
<div class="card-content">
<h2 class="card-title">性能</h2>
<p class="card-text">优化加载速度,提升用户体验。</p>
<a href="#" class="card-button">了解更多</a>
</div>
</div>
</div>
</div>
</body>
</html>
东巴文（db-w.cn） - 让编程学习更有趣！