CSS盒模型是网页布局的基础概念,每个HTML元素都被视为一个矩形盒子,由内容区域、内边距、边框和外边距组成。
东巴文（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>盒模型组成示例</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;
text-align: center;
margin-bottom: 30px;
}
/* 盒模型可视化 */
.box-model {
background: #f8f9fa;
padding: 30px;
margin: 20px;
border: 3px solid #667eea;
}
.margin-area {
background: rgba(255, 193, 7, 0.2);
padding: 20px;
border: 2px dashed #ffc107;
margin-bottom: 20px;
}
.border-area {
background: rgba(102, 126, 234, 0.2);
padding: 20px;
border: 3px solid #667eea;
margin-bottom: 20px;
}
.padding-area {
background: rgba(76, 175, 80, 0.2);
padding: 20px;
border: 2px solid #4caf50;
margin-bottom: 20px;
}
.content-area {
background: rgba(156, 39, 176, 0.2);
padding: 20px;
border: 2px solid #9c27b0;
text-align: center;
}
/* 图例 */
.legend {
display: flex;
justify-content: center;
gap: 20px;
margin: 30px 0;
flex-wrap: wrap;
}
.legend-item {
display: flex;
align-items: center;
gap: 8px;
}
.legend-color {
width: 20px;
height: 20px;
border-radius: 3px;
}
.legend-margin {
background: rgba(255, 193, 7, 0.5);
}
.legend-border {
background: rgba(102, 126, 234, 0.5);
}
.legend-padding {
background: rgba(76, 175, 80, 0.5);
}
.legend-content {
background: rgba(156, 39, 176, 0.5);
}
/* 示例盒子 */
.example-box {
width: 300px;
height: 150px;
padding: 20px;
border: 5px solid #667eea;
margin: 20px auto;
background: white;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.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;
}
.info-table tr:nth-child(even) {
background: #f8f9fa;
}
</style>
</head>
<body>
<div class="container">
<h1>CSS盒模型组成</h1>
<div class="legend">
<div class="legend-item">
<div class="legend-color legend-margin"></div>
<span>外边距（Margin）</span>
</div>
<div class="legend-item">
<div class="legend-color legend-border"></div>
<span>边框（Border）</span>
</div>
<div class="legend-item">
<div class="legend-color legend-padding"></div>
<span>内边距（Padding）</span>
</div>
<div class="legend-item">
<div class="legend-color legend-content"></div>
<span>内容（Content）</span>
</div>
</div>
<div class="margin-area">
<p style="text-align: center; margin: 0;"><strong>外边距区域（Margin Area）</strong></p>
<div class="border-area">
<p style="text-align: center; margin: 0;"><strong>边框区域（Border Area）</strong></p>
<div class="padding-area">
<p style="text-align: center; margin: 0;"><strong>内边距区域（Padding Area）</strong></p>
<div class="content-area">
<p style="margin: 0;"><strong>内容区域（Content Area）</strong></p>
</div>
</div>
</div>
</div>
<h2>盒模型示例</h2>
<div class="example-box">
<p style="margin: 0; text-align: center;">
这是一个盒子<br>
width: 300px<br>
height: 150px<br>
padding: 20px<br>
border: 5px solid
</p>
</div>
<h2>盒模型属性说明</h2>
<table class="info-table">
<thead>
<tr>
<th>属性</th>
<th>说明</th>
<th>示例</th>
</tr>
</thead>
<tbody>
<tr>
<td>content</td>
<td>内容区域,显示文本、图片等</td>
<td>width: 300px; height: 150px;</td>
</tr>
<tr>
<td>padding</td>
<td>内边距,内容与边框之间的空间</td>
<td>padding: 20px;</td>
</tr>
<tr>
<td>border</td>
<td>边框,包围内边距和内容</td>
<td>border: 5px solid #667eea;</td>
</tr>
<tr>
<td>margin</td>
<td>外边距,元素与其他元素之间的空间</td>
<td>margin: 20px;</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;
}
/* 内容区域示例 */
/* 固定宽高 */
.fixed-size {
width: 300px;
height: 150px;
background: #e3f2fd;
border: 2px solid #2196f3;
margin-bottom: 20px;
padding: 10px;
}
/* 百分比宽高 */
.percentage-size {
width: 80%;
height: 100px;
background: #f3e5f5;
border: 2px solid #9c27b0;
margin-bottom: 20px;
padding: 10px;
}
/* 最小最大宽高 */
.min-max-size {
min-width: 200px;
max-width: 600px;
min-height: 80px;
max-height: 200px;
background: #e8f5e9;
border: 2px solid #4caf50;
margin-bottom: 20px;
padding: 10px;
}
/* 自动宽高 */
.auto-size {
width: auto;
height: auto;
background: #fff3cd;
border: 2px solid #ffc107;
margin-bottom: 20px;
padding: 10px;
}
/* 视口单位 */
.viewport-size {
width: 50vw;
height: 20vh;
background: #ffebee;
border: 2px solid #f44336;
margin-bottom: 20px;
padding: 10px;
}
/* 内容溢出处理 */
.overflow-visible {
width: 200px;
height: 100px;
background: #e3f2fd;
border: 2px solid #2196f3;
overflow: visible;
margin-bottom: 20px;
}
.overflow-hidden {
width: 200px;
height: 100px;
background: #f3e5f5;
border: 2px solid #9c27b0;
overflow: hidden;
margin-bottom: 20px;
}
.overflow-scroll {
width: 200px;
height: 100px;
background: #e8f5e9;
border: 2px solid #4caf50;
overflow: scroll;
margin-bottom: 20px;
}
.overflow-auto {
width: 200px;
height: 100px;
background: #fff3cd;
border: 2px solid #ffc107;
overflow: auto;
margin-bottom: 20px;
}
/* 代码块 */
.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>内容区域（Content）</h1>
<h2>宽度和高度</h2>
<h3>固定尺寸</h3>
<div class="fixed-size">
固定宽高：width: 300px; height: 150px;
</div>
<div class="code-block">
width: 300px;<br>
height: 150px;
</div>
<h3>百分比尺寸</h3>
<div class="percentage-size">
百分比宽高：width: 80%; height: 100px;
</div>
<div class="code-block">
width: 80%;<br>
height: 100px;
</div>
<h3>最小最大尺寸</h3>
<div class="min-max-size">
最小最大宽高：min-width: 200px; max-width: 600px;
</div>
<div class="code-block">
min-width: 200px;<br>
max-width: 600px;<br>
min-height: 80px;<br>
max-height: 200px;
</div>
<h3>自动尺寸</h3>
<div class="auto-size">
自动宽高：width: auto; height: auto; 内容决定大小
</div>
<h3>视口单位</h3>
<div class="viewport-size">
视口单位：width: 50vw; height: 20vh;
</div>
<h2>内容溢出处理</h2>
<h3>overflow: visible（默认）</h3>
<div class="overflow-visible">
内容超出容器时会显示在容器外部。这是一段很长的文字,用于演示内容溢出的情况。
</div>
<h3>overflow: hidden</h3>
<div class="overflow-hidden">
内容超出容器时会被隐藏。这是一段很长的文字,用于演示内容溢出的情况。
</div>
<h3>overflow: scroll</h3>
<div class="overflow-scroll">
始终显示滚动条。这是一段很长的文字,用于演示内容溢出的情况。
</div>
<h3>overflow: auto</h3>
<div class="overflow-auto">
内容超出时自动显示滚动条。这是一段很长的文字,用于演示内容溢出的情况。
</div>
<h2>尺寸单位说明</h2>
<table class="info-table">
<thead>
<tr>
<th>单位</th>
<th>说明</th>
<th>示例</th>
</tr>
</thead>
<tbody>
<tr>
<td>px</td>
<td>像素,绝对单位</td>
<td>width: 300px;</td>
</tr>
<tr>
<td>%</td>
<td>百分比,相对于父元素</td>
<td>width: 80%;</td>
</tr>
<tr>
<td>vw</td>
<td>视口宽度的百分比</td>
<td>width: 50vw;</td>
</tr>
<tr>
<td>vh</td>
<td>视口高度的百分比</td>
<td>height: 20vh;</td>
</tr>
<tr>
<td>em</td>
<td>相对于当前字体大小</td>
<td>width: 10em;</td>
</tr>
<tr>
<td>rem</td>
<td>相对于根元素字体大小</td>
<td>width: 10rem;</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;
}
/* 内边距示例 */
/* 无内边距 */
.no-padding {
background: #e3f2fd;
border: 2px solid #2196f3;
margin-bottom: 20px;
}
/* 统一内边距 */
.uniform-padding {
padding: 20px;
background: #f3e5f5;
border: 2px solid #9c27b0;
margin-bottom: 20px;
}
/* 不同方向内边距 */
.different-padding {
padding-top: 10px;
padding-right: 30px;
padding-bottom: 10px;
padding-left: 30px;
background: #e8f5e9;
border: 2px solid #4caf50;
margin-bottom: 20px;
}
/* 简写形式 */
.shorthand-1 {
padding: 10px 20px 30px 40px; /* 上 右 下 左 */
background: #fff3cd;
border: 2px solid #ffc107;
margin-bottom: 20px;
}
.shorthand-2 {
padding: 10px 20px; /* 上下 左右 */
background: #ffebee;
border: 2px solid #f44336;
margin-bottom: 20px;
}
.shorthand-3 {
padding: 10px 20px 30px; /* 上 左右 下 */
background: #e0f2f1;
border: 2px solid #009688;
margin-bottom: 20px;
}
/* 百分比内边距 */
.percentage-padding {
width: 300px;
padding: 10%;
background: #f3e5f5;
border: 2px solid #9c27b0;
margin-bottom: 20px;
}
/* 内边距可视化 */
.padding-visual {
display: inline-block;
background: #667eea;
color: white;
margin: 10px;
}
.padding-visual .content {
background: #764ba2;
padding: 10px;
}
/* 卡片示例 */
.card {
background: white;
border: 1px solid #ddd;
border-radius: 8px;
margin-bottom: 20px;
}
.card-header {
padding: 15px 20px;
background: #667eea;
color: white;
border-radius: 8px 8px 0 0;
}
.card-body {
padding: 20px;
}
.card-footer {
padding: 15px 20px;
background: #f8f9fa;
border-radius: 0 0 8px 8px;
}
/* 代码块 */
.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>内边距（Padding）</h1>
<h2>内边距概述</h2>
<p>内边距是内容区域与边框之间的空间,用于增加元素内部的空白区域。</p>
<h2>无内边距 vs 有内边距</h2>
<div class="no-padding">
无内边距：内容紧贴边框
</div>
<div class="uniform-padding">
有内边距：内容与边框之间有空间
</div>
<h2>内边距属性</h2>
<h3>单独设置各方向</h3>
<div class="different-padding">
padding-top: 10px; padding-right: 30px; padding-bottom: 10px; padding-left: 30px;
</div>
<div class="code-block">
padding-top: 10px;<br>
padding-right: 30px;<br>
padding-bottom: 10px;<br>
padding-left: 30px;
</div>
<h3>简写形式</h3>
<div class="shorthand-1">
padding: 10px 20px 30px 40px;（上 右 下 左）
</div>
<div class="shorthand-2">
padding: 10px 20px;（上下 左右）
</div>
<div class="shorthand-3">
padding: 10px 20px 30px;（上 左右 下）
</div>
<h2>百分比内边距</h2>
<div class="percentage-padding">
padding: 10%;（相对于父元素宽度）
</div>
<h2>内边距可视化</h2>
<div style="text-align: center;">
<div class="padding-visual" style="padding: 10px;">
<div class="content">padding: 10px</div>
</div>
<div class="padding-visual" style="padding: 20px;">
<div class="content">padding: 20px</div>
</div>
<div class="padding-visual" style="padding: 30px;">
<div class="content">padding: 30px</div>
</div>
</div>
<h2>实际应用：卡片组件</h2>
<div class="card">
<div class="card-header">
<h3 style="margin: 0;">卡片标题</h3>
</div>
<div class="card-body">
<p style="margin: 0;">卡片内容区域,使用内边距增加可读性。</p>
</div>
<div class="card-footer">
<p style="margin: 0; color: #666;">卡片底部</p>
</div>
</div>
<h2>内边距简写规则</h2>
<table class="info-table">
<thead>
<tr>
<th>简写形式</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>padding: 10px;</td>
<td>四个方向相同</td>
</tr>
<tr>
<td>padding: 10px 20px;</td>
<td>上下 左右</td>
</tr>
<tr>
<td>padding: 10px 20px 30px;</td>
<td>上 左右 下</td>
</tr>
<tr>
<td>padding: 10px 20px 30px 40px;</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;
}
/* 边框样式 */
/* 边框宽度 */
.border-width-1 {
border-width: 1px;
border-style: solid;
border-color: #667eea;
padding: 15px;
margin-bottom: 10px;
}
.border-width-2 {
border-width: 3px;
border-style: solid;
border-color: #667eea;
padding: 15px;
margin-bottom: 10px;
}
.border-width-3 {
border-width: 5px;
border-style: solid;
border-color: #667eea;
padding: 15px;
margin-bottom: 10px;
}
/* 边框样式 */
.border-solid {
border: 3px solid #667eea;
padding: 15px;
margin-bottom: 10px;
}
.border-dashed {
border: 3px dashed #667eea;
padding: 15px;
margin-bottom: 10px;
}
.border-dotted {
border: 3px dotted #667eea;
padding: 15px;
margin-bottom: 10px;
}
.border-double {
border: 5px double #667eea;
padding: 15px;
margin-bottom: 10px;
}
.border-groove {
border: 5px groove #667eea;
padding: 15px;
margin-bottom: 10px;
}
.border-ridge {
border: 5px ridge #667eea;
padding: 15px;
margin-bottom: 10px;
}
.border-inset {
border: 5px inset #667eea;
padding: 15px;
margin-bottom: 10px;
}
.border-outset {
border: 5px outset #667eea;
padding: 15px;
margin-bottom: 10px;
}
/* 边框颜色 */
.border-color-1 {
border: 3px solid #667eea;
padding: 15px;
margin-bottom: 10px;
}
.border-color-2 {
border: 3px solid #764ba2;
padding: 15px;
margin-bottom: 10px;
}
.border-color-3 {
border: 3px solid #28a745;
padding: 15px;
margin-bottom: 10px;
}
/* 单边边框 */
.border-top {
border-top: 3px solid #667eea;
padding: 15px;
margin-bottom: 10px;
}
.border-right {
border-right: 3px solid #667eea;
padding: 15px;
margin-bottom: 10px;
}
.border-bottom {
border-bottom: 3px solid #667eea;
padding: 15px;
margin-bottom: 10px;
}
.border-left {
border-left: 3px solid #667eea;
padding: 15px;
margin-bottom: 10px;
}
/* 边框圆角 */
.radius-1 {
border: 2px solid #667eea;
border-radius: 5px;
padding: 15px;
margin-bottom: 10px;
}
.radius-2 {
border: 2px solid #667eea;
border-radius: 10px;
padding: 15px;
margin-bottom: 10px;
}
.radius-3 {
border: 2px solid #667eea;
border-radius: 20px;
padding: 15px;
margin-bottom: 10px;
}
.radius-4 {
border: 2px solid #667eea;
border-radius: 50%;
width: 100px;
height: 100px;
padding: 15px;
margin-bottom: 10px;
text-align: center;
line-height: 70px;
}
.radius-5 {
border: 2px solid #667eea;
border-radius: 10px 30px 10px 30px;
padding: 15px;
margin-bottom: 10px;
}
/* 代码块 */
.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>边框（Border）</h1>
<h2>边框宽度</h2>
<div class="border-width-1">border-width: 1px;</div>
<div class="border-width-2">border-width: 3px;</div>
<div class="border-width-3">border-width: 5px;</div>
<h2>边框样式</h2>
<div class="border-solid">border-style: solid;（实线）</div>
<div class="border-dashed">border-style: dashed;（虚线）</div>
<div class="border-dotted">border-style: dotted;（点线）</div>
<div class="border-double">border-style: double;（双线）</div>
<div class="border-groove">border-style: groove;（凹槽）</div>
<div class="border-ridge">border-style: ridge;（脊状）</div>
<div class="border-inset">border-style: inset;（内嵌）</div>
<div class="border-outset">border-style: outset;（外凸）</div>
<h2>边框颜色</h2>
<div class="border-color-1">border-color: #667eea;（蓝色）</div>
<div class="border-color-2">border-color: #764ba2;（紫色）</div>
<div class="border-color-3">border-color: #28a745;（绿色）</div>
<h2>单边边框</h2>
<div class="border-top">border-top: 3px solid;</div>
<div class="border-right">border-right: 3px solid;</div>
<div class="border-bottom">border-bottom: 3px solid;</div>
<div class="border-left">border-left: 3px solid;</div>
<h2>边框圆角</h2>
<div class="radius-1">border-radius: 5px;</div>
<div class="radius-2">border-radius: 10px;</div>
<div class="radius-3">border-radius: 20px;</div>
<div class="radius-4">圆形</div>
<div class="radius-5">border-radius: 10px 30px 10px 30px;</div>
<h2>边框简写</h2>
<div class="code-block">
border: 3px solid #667eea;<br><br>
/* 等价于 */<br>
border-width: 3px;<br>
border-style: solid;<br>
border-color: #667eea;
</div>
<h2>边框样式说明</h2>
<table class="info-table">
<thead>
<tr>
<th>样式</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr><td>solid</td><td>实线</td></tr>
<tr><td>dashed</td><td>虚线</td></tr>
<tr><td>dotted</td><td>点线</td></tr>
<tr><td>double</td><td>双线</td></tr>
<tr><td>groove</td><td>凹槽</td></tr>
<tr><td>ridge</td><td>脊状</td></tr>
<tr><td>inset</td><td>内嵌</td></tr>
<tr><td>outset</td><td>外凸</td></tr>
<tr><td>none</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;
}
/* 外边距示例 */
/* 无外边距 */
.no-margin {
background: #e3f2fd;
border: 2px solid #2196f3;
padding: 15px;
}
/* 统一外边距 */
.uniform-margin {
margin: 20px;
background: #f3e5f5;
border: 2px solid #9c27b0;
padding: 15px;
}
/* 不同方向外边距 */
.different-margin {
margin-top: 10px;
margin-right: 30px;
margin-bottom: 10px;
margin-left: 30px;
background: #e8f5e9;
border: 2px solid #4caf50;
padding: 15px;
}
/* 简写形式 */
.shorthand-1 {
margin: 10px 20px 30px 40px; /* 上 右 下 左 */
background: #fff3cd;
border: 2px solid #ffc107;
padding: 15px;
}
.shorthand-2 {
margin: 10px 20px; /* 上下 左右 */
background: #ffebee;
border: 2px solid #f44336;
padding: 15px;
}
.shorthand-3 {
margin: 10px 20px 30px; /* 上 左右 下 */
background: #e0f2f1;
border: 2px solid #009688;
padding: 15px;
}
/* 水平居中 */
.center {
width: 300px;
margin: 0 auto;
background: #667eea;
color: white;
padding: 15px;
text-align: center;
border-radius: 5px;
}
/* 外边距合并示例 */
.margin-collapse-1 {
margin-bottom: 30px;
background: #e3f2fd;
border: 2px solid #2196f3;
padding: 15px;
}
.margin-collapse-2 {
margin-top: 20px;
background: #f3e5f5;
border: 2px solid #9c27b0;
padding: 15px;
}
/* 外边距可视化 */
.margin-visual {
background: rgba(102, 126, 234, 0.2);
padding: 10px;
margin-bottom: 20px;
}
.margin-visual .box {
background: #667eea;
color: white;
padding: 10px;
text-align: center;
}
.margin-visual .box.margin-10 {
margin: 10px;
}
.margin-visual .box.margin-20 {
margin: 20px;
}
.margin-visual .box.margin-30 {
margin: 30px;
}
/* 负外边距 */
.negative-margin {
margin-left: -20px;
background: #fff3cd;
border: 2px solid #ffc107;
padding: 15px;
}
/* 代码块 */
.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>外边距（Margin）</h1>
<h2>外边距概述</h2>
<p>外边距是元素边框外部与其他元素之间的空间,用于控制元素之间的距离。</p>
<h2>无外边距 vs 有外边距</h2>
<div class="no-margin">无外边距：元素紧邻</div>
<div class="no-margin">无外边距：元素紧邻</div>
<div class="uniform-margin">有外边距：元素之间有空间</div>
<div class="uniform-margin">有外边距：元素之间有空间</div>
<h2>外边距属性</h2>
<h3>单独设置各方向</h3>
<div class="different-margin">
margin-top: 10px; margin-right: 30px; margin-bottom: 10px; margin-left: 30px;
</div>
<div class="code-block">
margin-top: 10px;<br>
margin-right: 30px;<br>
margin-bottom: 10px;<br>
margin-left: 30px;
</div>
<h3>简写形式</h3>
<div class="shorthand-1">
margin: 10px 20px 30px 40px;（上 右 下 左）
</div>
<div class="shorthand-2">
margin: 10px 20px;（上下 左右）
</div>
<div class="shorthand-3">
margin: 10px 20px 30px;（上 左右 下）
</div>
<h2>水平居中</h2>
<div class="center">
margin: 0 auto;（水平居中）
</div>
<div class="code-block">
width: 300px;<br>
margin: 0 auto;
</div>
<h2>外边距可视化</h2>
<div class="margin-visual">
<div class="box margin-10">margin: 10px</div>
</div>
<div class="margin-visual">
<div class="box margin-20">margin: 20px</div>
</div>
<div class="margin-visual">
<div class="box margin-30">margin: 30px</div>
</div>
<h2>外边距合并</h2>
<p>相邻块级元素的上下外边距会合并,取较大的值。</p>
<div class="margin-collapse-1">
margin-bottom: 30px;
</div>
<div class="margin-collapse-2">
margin-top: 20px;<br>
实际间距为 30px（取较大值）
</div>
<h2>负外边距</h2>
<div style="border: 2px dashed #ddd; padding: 20px; margin-top: 20px;">
<div class="negative-margin">
margin-left: -20px;（向左移动）
</div>
</div>
<h2>外边距简写规则</h2>
<table class="info-table">
<thead>
<tr>
<th>简写形式</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>margin: 10px;</td>
<td>四个方向相同</td>
</tr>
<tr>
<td>margin: 10px 20px;</td>
<td>上下 左右</td>
</tr>
<tr>
<td>margin: 10px 20px 30px;</td>
<td>上 左右 下</td>
</tr>
<tr>
<td>margin: 10px 20px 30px 40px;</td>
<td>上 右 下 左</td>
</tr>
<tr>
<td>margin: 0 auto;</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>box-sizing属性示例</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;
}
/* box-sizing示例 */
/* content-box（默认） */
.content-box {
box-sizing: content-box;
width: 300px;
padding: 20px;
border: 5px solid #667eea;
background: #e3f2fd;
margin-bottom: 20px;
}
/* border-box */
.border-box {
box-sizing: border-box;
width: 300px;
padding: 20px;
border: 5px solid #764ba2;
background: #f3e5f5;
margin-bottom: 20px;
}
/* 对比容器 */
.compare-container {
background: #f8f9fa;
padding: 10px;
margin-bottom: 20px;
border: 1px dashed #ddd;
}
/* 全局border-box */
.global-border-box *,
.global-border-box *::before,
.global-border-box *::after {
box-sizing: border-box;
}
/* 网格布局示例 */
.grid {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.grid-item {
flex: 1;
padding: 20px;
background: #667eea;
color: white;
text-align: center;
border: 3px solid #764ba2;
}
.grid-item.content-box {
box-sizing: content-box;
}
.grid-item.border-box {
box-sizing: border-box;
}
/* 代码块 */
.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>box-sizing属性</h1>
<h2>box-sizing概述</h2>
<p>box-sizing属性定义如何计算元素的总宽度和总高度。</p>
<h2>content-box（默认）</h2>
<p>width 和 height 只包含内容区域,padding 和 border 会增加元素的总尺寸。</p>
<div class="compare-container">
<div class="content-box">
box-sizing: content-box;<br>
width: 300px;<br>
padding: 20px;<br>
border: 5px solid;<br>
<strong>实际宽度 = 300 + 20×2 + 5×2 = 350px</strong>
</div>
</div>
<div class="code-block">
box-sizing: content-box;<br>
width: 300px;<br>
padding: 20px;<br>
border: 5px solid;<br>
/* 实际宽度 = 300 + 40 + 10 = 350px */
</div>
<h2>border-box</h2>
<p>width 和 height 包含内容、padding 和 border,更符合直觉。</p>
<div class="compare-container">
<div class="border-box">
box-sizing: border-box;<br>
width: 300px;<br>
padding: 20px;<br>
border: 5px solid;<br>
<strong>实际宽度 = 300px（固定）</strong>
</div>
</div>
<div class="code-block">
box-sizing: border-box;<br>
width: 300px;<br>
padding: 20px;<br>
border: 5px solid;<br>
/* 实际宽度 = 300px */
</div>
<h2>对比示例</h2>
<p>两个盒子都设置 width: 300px,但实际宽度不同：</p>
<div style="display: flex; gap: 20px; margin-bottom: 20px;">
<div>
<p><strong>content-box</strong></p>
<div class="content-box" style="margin: 0;">
宽度: 350px
</div>
</div>
<div>
<p><strong>border-box</strong></p>
<div class="border-box" style="margin: 0;">
宽度: 300px
</div>
</div>
</div>
<h2>网格布局对比</h2>
<h3>content-box（布局可能错乱）</h3>
<div class="grid">
<div class="grid-item content-box">
项目 1<br>
content-box
</div>
<div class="grid-item content-box">
项目 2<br>
content-box
</div>
<div class="grid-item content-box">
项目 3<br>
content-box
</div>
</div>
<h3>border-box（布局正常）</h3>
<div class="grid">
<div class="grid-item border-box">
项目 1<br>
border-box
</div>
<div class="grid-item border-box">
项目 2<br>
border-box
</div>
<div class="grid-item border-box">
项目 3<br>
border-box
</div>
</div>
<h2>推荐做法</h2>
<div class="code-block">
/* 全局设置 border-box */<br>
*,<br>
*::before,<br>
*::after {<br>
box-sizing: border-box;<br>
}
</div>
<h2>box-sizing对比表</h2>
<table class="info-table">
<thead>
<tr>
<th>属性值</th>
<th>width/height包含</th>
<th>实际宽度计算</th>
</tr>
</thead>
<tbody>
<tr>
<td>content-box</td>
<td>仅内容区域</td>
<td>width + padding + border</td>
</tr>
<tr>
<td>border-box</td>
<td>内容 + padding + border</td>
<td>width（固定）</td>
</tr>
</tbody>
</table>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文建议：</strong>推荐全局使用 border-box,这样更容易控制元素尺寸,避免布局错乱。
</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>盒模型计算示例</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;
}
/* 计算示例 */
/* content-box计算 */
.calc-content-box {
box-sizing: content-box;
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #667eea;
margin: 30px;
background: #e3f2fd;
}
/* border-box计算 */
.calc-border-box {
box-sizing: border-box;
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #764ba2;
margin: 30px;
background: #f3e5f5;
}
/* 计算结果展示 */
.calc-result {
background: #f8f9fa;
padding: 20px;
border-radius: 8px;
margin: 20px 0;
border-left: 4px solid #667eea;
}
.calc-result h3 {
color: #667eea;
margin-bottom: 10px;
}
.calc-result p {
margin: 5px 0;
font-family: 'Courier New', monospace;
}
/* 公式展示 */
.formula {
background: #667eea;
color: white;
padding: 15px;
border-radius: 5px;
margin: 15px 0;
text-align: center;
font-size: 18px;
font-weight: bold;
}
/* 表格 */
.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;
}
/* 可视化盒子 */
.visual-box {
position: relative;
background: rgba(156, 39, 176, 0.2);
padding: 30px;
border: 5px solid #9c27b0;
margin: 30px;
display: inline-block;
}
.visual-box::before {
content: 'margin: 30px';
position: absolute;
top: -25px;
left: 0;
color: #ffc107;
font-size: 12px;
}
.visual-box .border-label {
position: absolute;
top: 50%;
right: -80px;
transform: translateY(-50%);
color: #667eea;
font-size: 12px;
}
.visual-box .padding-label {
position: absolute;
top: 50%;
right: 40px;
transform: translateY(-50%);
color: #4caf50;
font-size: 12px;
}
.visual-box .content {
background: rgba(102, 126, 234, 0.3);
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h1>盒模型计算</h1>
<h2>content-box计算方式</h2>
<div class="calc-content-box">
内容区域
</div>
<div class="calc-result">
<h3>content-box 计算结果</h3>
<p>width: 200px</p>
<p>height: 100px</p>
<p>padding: 20px × 2 = 40px</p>
<p>border: 5px × 2 = 10px</p>
<p>margin: 30px × 2 = 60px</p>
<hr style="margin: 10px 0;">
<p><strong>元素实际宽度 = 200 + 40 + 10 = 250px</strong></p>
<p><strong>元素占据宽度 = 250 + 60 = 310px</strong></p>
</div>
<div class="formula">
实际宽度 = width + padding左右 + border左右<br>
占据宽度 = 实际宽度 + margin左右
</div>
<h2>border-box计算方式</h2>
<div class="calc-border-box">
内容区域
</div>
<div class="calc-result">
<h3>border-box 计算结果</h3>
<p>width: 200px（固定）</p>
<p>height: 100px（固定）</p>
<p>padding: 20px × 2 = 40px</p>
<p>border: 5px × 2 = 10px</p>
<p>margin: 30px × 2 = 60px</p>
<hr style="margin: 10px 0;">
<p><strong>元素实际宽度 = 200px（固定）</strong></p>
<p><strong>内容宽度 = 200 - 40 - 10 = 150px</strong></p>
<p><strong>元素占据宽度 = 200 + 60 = 260px</strong></p>
</div>
<div class="formula">
实际宽度 = width（固定）<br>
内容宽度 = width - padding左右 - border左右
</div>
<h2>盒模型可视化</h2>
<div style="text-align: center; margin: 30px 0;">
<div class="visual-box">
<span class="border-label">border: 5px</span>
<span class="padding-label">padding: 30px</span>
<div class="content">
内容区域<br>
width × height
</div>
</div>
</div>
<h2>计算对比表</h2>
<table class="info-table">
<thead>
<tr>
<th>计算项目</th>
<th>content-box</th>
<th>border-box</th>
</tr>
</thead>
<tbody>
<tr>
<td>设置宽度</td>
<td>200px</td>
<td>200px</td>
</tr>
<tr>
<td>padding</td>
<td>20px × 2</td>
<td>20px × 2</td>
</tr>
<tr>
<td>border</td>
<td>5px × 2</td>
<td>5px × 2</td>
</tr>
<tr>
<td>元素实际宽度</td>
<td>250px</td>
<td>200px</td>
</tr>
<tr>
<td>内容宽度</td>
<td>200px</td>
<td>150px</td>
</tr>
<tr>
<td>margin</td>
<td>30px × 2</td>
<td>30px × 2</td>
</tr>
<tr>
<td>占据总宽度</td>
<td>310px</td>
<td>260px</td>
</tr>
</tbody>
</table>
<div style="background: #e8f5e9; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示：</strong>理解盒模型计算对于精确控制布局至关重要,建议使用 border-box 简化计算。
</div>
</div>
</body>
</html>
/* 推荐：全局设置border-box */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* 推荐：使用内边距增加可点击区域 */
.button {
padding: 10px 20px;
}
/* 不推荐：使用固定高度和内边距 */
.box {
height: 100px;
padding: 20px; /* 可能导致内容溢出 */
}
/* 推荐：使用min-height */
.box {
min-height: 100px;
padding: 20px;
}
/* 方法1：使用padding代替margin */
.parent {
padding: 20px 0;
}
/* 方法2：使用border或overflow */
.parent {
overflow: hidden;
}
/* 方法3：使用Flexbox或Grid */
.parent {
display: flex;
flex-direction: column;
gap: 20px;
}
问题1：以下代码中,元素的实际宽度是多少？
.box {
box-sizing: content-box;
width: 200px;
padding: 20px;
border: 5px solid #000;
}
A. 200px B. 220px C. 230px D. 250px
<details> <summary>点击查看答案</summary>答案：D
东巴文解释：content-box模式下,实际宽度 = width + padding左右 + border左右 = 200 + 20×2 + 5×2 = 250px。
</details>问题2：如何让一个块级元素水平居中？
A. margin: auto; B. margin: 0 auto; C. padding: 0 auto; D. text-align: center;
<details> <summary>点击查看答案</summary>答案：B
东巴文解释：margin: 0 auto; 可以让块级元素水平居中,前提是元素必须有明确的宽度。
</details>任务：创建一个使用盒模型的登录表单页面,包含输入框、按钮和卡片布局。
<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;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
/* 登录卡片 */
.login-card {
background: white;
border-radius: 10px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
width: 100%;
max-width: 400px;
overflow: hidden;
}
/* 卡片头部 */
.card-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 30px;
text-align: center;
}
.card-header h1 {
font-size: 28px;
margin-bottom: 10px;
}
.card-header p {
opacity: 0.9;
}
/* 卡片内容 */
.card-body {
padding: 30px;
}
/* 表单组 */
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
color: #333;
font-weight: 500;
}
.form-group input {
width: 100%;
padding: 12px 15px;
border: 2px solid #e0e0e0;
border-radius: 5px;
font-size: 16px;
transition: border-color 0.3s;
}
.form-group input:focus {
outline: none;
border-color: #667eea;
}
/* 记住我 */
.remember-me {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 20px;
}
.remember-me input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: #667eea;
}
/* 按钮 */
.btn {
width: 100%;
padding: 15px;
border: none;
border-radius: 5px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s;
}
.btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}
/* 卡片底部 */
.card-footer {
padding: 20px 30px;
background: #f8f9fa;
text-align: center;
border-top: 1px solid #e0e0e0;
}
.card-footer a {
color: #667eea;
text-decoration: none;
font-weight: 500;
}
.card-footer a:hover {
text-decoration: underline;
}
/* 提示信息 */
.alert {
padding: 12px 15px;
border-radius: 5px;
margin-bottom: 20px;
font-size: 14px;
}
.alert-info {
background: #e3f2fd;
color: #1976d2;
border: 1px solid #90caf9;
}
</style>
</head>
<body>
<div class="login-card">
<div class="card-header">
<h1>欢迎登录</h1>
<p>东巴文学习平台</p>
</div>
<div class="card-body">
<div class="alert alert-info">
💡 提示：这是一个使用CSS盒模型的登录表单示例。
</div>
<form>
<div class="form-group">
<label for="username">用户名</label>
<input type="text" id="username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" id="password" placeholder="请输入密码">
</div>
<div class="remember-me">
<input type="checkbox" id="remember">
<label for="remember">记住我</label>
</div>
<button type="submit" class="btn btn-primary">登录</button>
</form>
</div>
<div class="card-footer">
<p>还没有账号？<a href="#">立即注册</a></p>
</div>
</div>
</body>
</html>
东巴文（db-w.cn） - 让编程学习更有趣！