一、回顾与本篇目标
在上一篇中，你学会了 CSS 的三种书写位置、三种基本选择器，以及如何用 color、background、font-size 等属性控制颜色和文字样式。
但有一个关键问题你肯定已经遇到了：元素和元素之间的间距怎么控制？元素的宽度和高度怎么设定？怎么让一个卡片在页面里居中？
这些问题的答案，都指向 CSS 中最重要的底层概念——盒模型。它是页面布局的基石。理解了盒模型，你才算真正迈进了 CSS 的大门。
本篇的目标：
- 彻底搞懂盒模型的四个区域：
content、padding、border、margin - 学会用
width和height控制元素大小 - 学会用
border-radius做圆角，用box-shadow做阴影 - 掌握
margin: 0 auto让块级元素水平居中 - 初步接触
display: flex，让元素轻松实现水平和垂直居中
二、什么是盒模型
在 CSS 的世界里，每一个 HTML 元素都是一个矩形盒子。无论是标题、段落、图片、按钮，还是 <div> 容器，浏览器都在把它们当作一个矩形来渲染。
这个矩形盒子由四层构成，从内到外依次是：
| 区域 | 英文名 | 含义 | 类比 |
|---|---|---|---|
| 内容区 | content | 元素的实际内容（文字、图片等）所在的区域 | 房间里的家具 |
| 内边距 | padding | 内容区到边框之间的空白区域 | 家具和墙壁之间的空地 |
| 边框 | border | 包围内边距和内容的线 | 房间的墙壁 |
| 外边距 | margin | 边框之外、与其他元素之间的空白区域 | 你家外墙和邻居家外墙之间的距离 |
一句话总结：从内到外，依次是 content → padding → border → margin。
现在，我们分别详细拆解每一层。
三、内容区：content
内容区就是元素实际内容所在的地方。对于 <p> 标签，内容就是文字；对于 <img> 标签，内容就是图片本身。
内容区的尺寸由 width 和 height 属性控制：
div {
width: 300px; /* 内容区宽度 300 像素 */
height: 200px; /* 内容区高度 200 像素 */
}注意：width 和 height 默认只控制内容区的尺寸，不包括 padding、border、margin。这个细节非常关键，我们稍后会用一个完整例子来验证。
哪些元素可以直接设置宽高？
- 块级元素（
<div>、<p>、<h1>等）：可以。 - 行内元素（
<span>、<a>等）：不可以（设置width和height无效）。 - 行内替换元素（
<img>）：可以。
四、内边距：padding
padding 是内容区和边框之间的空白区域。它的作用是把内容和边框“推开”，让内容不贴边，增加呼吸感。
写法：
/* 方式一：四个方向统一设置 */
padding: 20px; /* 上下左右都是 20px */
/* 方式二：上下、左右分别设置 */
padding: 20px 40px; /* 上下 20px，左右 40px */
/* 方式三：上、左右、下分别设置 */
padding: 10px 30px 20px; /* 上 10px，左右 30px，下 20px */
/* 方式四：上、右、下、左分别设置（顺时针） */
padding: 10px 20px 30px 40px; /* 上 10px，右 20px，下 30px，左 40px */
/* 也可以单独设置某一边 */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;记忆技巧：多个值的顺序是顺时针——上、右、下、左。如果只写两个值，第一个代表上下，第二个代表左右。
可视化理解：创建一个 <div>，给它加背景色和 padding，你会看到背景色会延伸到 padding 区域。也就是说，background 覆盖的范围是 content + padding，不包括 border 以外的区域。
五、边框：border
border 是包裹在 padding 外面的线。它是一个复合属性，由三个子属性组成：
border: 粗细 样式 颜色;示例：
.box {
border: 2px solid #333; /* 2px 宽的灰色实线边框 */
}
.card {
border: 1px dashed #ccc; /* 1px 宽的灰色虚线边框 */
}
.error-box {
border: 3px solid red; /* 3px 宽的红色实线边框 */
}
.no-border {
border: none; /* 没有边框 */
}border-style（边框样式）的常用值：
solid：实线（最常用）dashed：虚线dotted：点线none：无边框
同样，你也可以单独设置某一边：
border-bottom: 1px solid #eee; /* 只有底部有边框，常用于分隔线效果 */六、外边距：margin
margin 是边框之外的空白区域，用来控制元素与元素之间的距离。
写法和 padding 完全一样：
margin: 20px; /* 上下左右都是 20px */
margin: 20px 40px; /* 上下 20px，左右 40px */
margin: 10px 30px 20px; /* 上 10px，左右 30px，下 20px */
margin: 10px 20px 30px 40px; /* 上 10px，右 20px，下 30px，左 40px */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;margin 和 padding 的关键区别：
padding在边框里面，背景色会覆盖它。margin在边框外面，背景色不会覆盖它，它始终是透明的。
类比：padding 是你家房子内部的空白（墙内），margin 是你家院子和邻居家院子之间的距离（墙外）。
七、一个完整的盒模型示例
下面这段代码会让你直观看到 content、padding、border、margin 的实际效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>盒模型演示</title>
<style>
body {
background: #f0f0f0;
font-family: sans-serif;
padding: 40px;
}
.box {
width: 300px; /* 内容区宽度 */
height: 150px; /* 内容区高度 */
background: #ffd700; /* 金色背景（覆盖 content + padding） */
padding: 30px; /* 内边距 30px */
border: 5px solid #333; /* 5px 黑色实线边框 */
margin: 40px; /* 外边距 40px */
}
/* 对比：没有 padding 和 margin 的盒子 */
.box-no-space {
width: 300px;
height: 150px;
background: #87ceeb; /* 天蓝色背景 */
border: 5px solid #333;
/* 没有 padding 和 margin */
}
</style>
</head>
<body>
<h2>有 padding 和 margin 的盒子</h2>
<div class="box">
<p>这个盒子有 30px 的内边距和 40px 的外边距。</p>
</div>
<h2>没有 padding 和 margin 的盒子</h2>
<div class="box-no-space">
<p>这个盒子文字紧贴边框，盒子紧贴上方的标题。</p>
</div>
</body>
</html>观察要点：
- 金色盒子里面的文字和边框之间有 30px 的呼吸空间（那是 padding 的效果）。
- 金色盒子和上方标题之间有明显的距离（那是 margin 的效果）。
- 金色背景覆盖了 content 和 padding 区域，但没有覆盖 border（边框是黑色的）和 margin（透明）。
- 天蓝色盒子没有 padding 和 margin，文字紧贴边框，盒子紧贴上方标题。
打开浏览器的开发者工具（按 F12），点击左上角的“选择元素”箭头，然后点击页面上的盒子。你会看到浏览器用不同颜色高亮显示盒模型的四个区域：蓝色 = content，绿色 = padding，橙黄色 = border，浅橙色 = margin。这是理解和调试盒模型最强大的工具。
八、圆角与阴影
掌握了盒模型，我们来看两个让盒子变好看的“美容”属性。
border-radius：圆角
把盒子的四个角变成圆角：
.card {
border-radius: 10px; /* 四个角都是 10px 圆角 */
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%; /* 50% 圆角 → 正圆形（宽高必须相等） */
}
.special {
border-radius: 20px 5px 20px 5px; /* 左上 右上 右下 左下，顺时针 */
}box-shadow：阴影
给盒子添加投影，制造“悬浮感”：
box-shadow: 水平偏移 垂直偏移 模糊半径 颜色;示例：
.card {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
/* 不左右偏移（0），向下偏移 4px，模糊半径 20px，10% 透明度的黑色 */
}
.card:hover {
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
/* 鼠标悬停时阴影加深、偏移增大，制造“浮起来”的效果 */
}四个参数的含义：
- 水平偏移：正值向右，负值向左。通常写 0。
- 垂直偏移：正值向下，负值向上。通常写 2px-10px。
- 模糊半径：值越大阴影越模糊、扩散得越开。通常写 10px-30px。
- 颜色：通常用
rgba(0, 0, 0, 0.1)到rgba(0, 0, 0, 0.3)的半透明黑色。
九、让块级元素水平居中：margin: 0 auto
前面我们多次看到 margin: 0 auto，现在正式解释它。
原理：当一个块级元素有明确的宽度，并且左右外边距都设为 auto 时，浏览器会自动把剩余的水平空间平均分配给左右 margin，元素就会水平居中。
.centered-box {
width: 600px; /* 必须有明确的宽度 */
margin: 0 auto; /* 上下 0，左右自动 → 水平居中 */
}必须满足两个条件：
- 元素是块级元素（
<div>、<p>等，行内元素不行）。 - 元素有明确的宽度（
width的值不能是默认的auto，即不能自动撑满）。
这是传统网页布局中最常用的居中方式。但它只能水平居中，不能垂直居中。要实现垂直居中，我们需要下一节讲的 flex 布局。
十、弹性布局初步：display: flex 让元素居中
flex 是 CSS 中的一种现代布局方式，全称 Flexible Box（弹性盒子）。它非常强大，但我们入门阶段先掌握它最实用的一项功能：让子元素水平垂直居中。
传统方式（难）： 在没有 flex 的年代，让一个盒子在父容器中水平和垂直同时居中，需要各种 hack 技巧，初学者很难记住。
flex 方式（简单）： 只需三行代码。
.parent {
display: flex; /* 激活弹性布局 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
min-height: 100vh; /* 让父容器至少占满整个视口高度，否则垂直居中没意义 */
}完整示例：一个始终在屏幕正中央的卡片
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Flex 居中演示</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background: #f0f4f8;
font-family: sans-serif;
}
.card {
background: white;
padding: 40px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
text-align: center;
width: 300px;
}
</style>
</head>
<body>
<div class="card">
<h2>你好</h2>
<p>这个卡片始终在屏幕正中央。</p>
<p>无论窗口多大、多小。</p>
</div>
</body>
</html>代码解析：
display: flex;：把<body>变成一个弹性容器。justify-content: center;：让子元素在水平方向上居中。align-items: center;：让子元素在垂直方向上居中。min-height: 100vh;：vh是视口高度单位，100vh= 浏览器窗口的整个高度。没有这一行，<body>只有内容那么高，垂直居中就没有意义。margin: 0;：清除浏览器默认给<body>的 8px 外边距，避免出现滚动条。
flex 居中 vs margin: 0 auto：
margin: 0 auto只能水平居中一个块级元素，无法垂直居中。display: flex+justify-content+align-items可以同时水平和垂直居中，而且可以居中多个元素。它是现代 CSS 布局的首选方案。
十一、本篇综合实战：做一个居中卡片
下面这段代码综合运用了本篇学到的盒模型、圆角、阴影、flex 居中。请手敲并观察效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>综合实战：居中卡片</title>
<style>
/* 全局重置 */
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background: linear-gradient(135deg, #667eea, #764ba2); /* 渐变背景 */
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
/* 卡片容器 */
.card {
background: white;
width: 360px;
padding: 40px 30px; /* 上下 40px，左右 30px */
border-radius: 16px;
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
text-align: center;
}
/* 头像图片 */
.card img {
width: 80px;
height: 80px;
border-radius: 50%; /* 正圆形 */
border: 3px solid #667eea; /* 紫色边框 */
margin-bottom: 16px;
}
/* 名字 */
.card h2 {
margin: 0 0 4px 0; /* 上 0，右 0，下 4px，左 0 */
color: #333;
font-size: 22px;
}
/* 职称 */
.card .title {
color: #999;
font-size: 14px;
margin: 0 0 20px 0;
}
/* 简介 */
.card .bio {
color: #555;
font-size: 14px;
line-height: 1.6;
margin-bottom: 24px;
}
/* 技能标签列表 */
.card .tags {
display: flex;
justify-content: center;
gap: 8px; /* 标签之间的间距（现代写法） */
flex-wrap: wrap; /* 标签太多时自动换行 */
margin-bottom: 24px;
}
.card .tag {
background: #f0f4ff;
color: #667eea;
padding: 6px 14px;
border-radius: 20px; /* 大圆角 → 胶囊形状 */
font-size: 12px;
}
/* 按钮 */
.card button {
padding: 12px 32px;
background: #667eea;
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
transition: background 0.3s; /* 背景色过渡动画 */
}
.card button:hover {
background: #5a6fd6;
}
</style>
</head>
<body>
<div class="card">
<!-- 头像 -->
<img src="https://via.placeholder.com/80" alt="头像">
<!-- 基本信息 -->
<h2>张三</h2>
<p class="title">前端开发初学者</p>
<!-- 简介 -->
<p class="bio">正在系统学习 HTML、CSS 和 JavaScript。热爱编程，希望通过代码创造美好的用户体验。</p>
<!-- 技能标签 -->
<div class="tags">
<span class="tag">HTML</span>
<span class="tag">CSS</span>
<span class="tag">JavaScript</span>
<span class="tag">盒模型</span>
<span class="tag">Flex 布局</span>
</div>
<!-- 按钮 -->
<button>了解更多</button>
</div>
</body>
</html>逐块解析：
body使用 flex 三件套让卡片在屏幕中水平垂直居中，背景使用了渐变色（linear-gradient），让页面更有设计感。- 卡片的
padding设置了上下 40px 左右 30px，让内容有呼吸感；border-radius: 16px和box-shadow让卡片圆润且有悬浮感。 - 头像用
border-radius: 50%变成正圆，再加了一个紫色边框。 - 标题和职称的 margin 分别精确设置了上右下左的值，控制间距——这是盒模型的直接应用。
- 技能标签使用
.tag类，用padding撑开空间，用border-radius: 20px做出胶囊形状。 .tags容器本身也是 flex，用gap: 8px让标签之间有间距，flex-wrap: wrap让标签多了自动换行。- 按钮加了
transition: background 0.3s，鼠标悬停时背景色会在 0.3 秒内平滑过渡，而不是瞬间变化。这是交互细节的体现。
十二、本篇动手练习
练习 1：盒模型感知练习
新建 practice5-1.html，创建一个 <div>，分别给它设置 width: 200px、padding: 20px、border: 5px solid black、margin: 30px。用 F12 开发者工具查看盒模型区域。然后尝试修改各个值，观察变化。
练习 2：圆角和阴影练习
新建 practice5-2.html，创建三个 <div> 盒子：一个方角（border-radius: 0），一个圆角（border-radius: 12px），一个正圆（width 和 height 相等，border-radius: 50%）。再给其中两个盒子加不同参数的 box-shadow，体会阴影的视觉效果。
练习 3：水平居中练习
新建 practice5-3.html，创建一个宽度为 500px 的 <div>，用 margin: 0 auto 让它水平居中。然后故意把它的宽度去掉，看看居中是否失效——理解为什么“明确的宽度”是必要条件。
练习 4：Flex 居中练习
新建 practice5-4.html，用 display: flex 三件套，在页面正中央放一段文字“我居中了”。然后试着把 min-height: 100vh 去掉，观察效果有什么不同。
练习 5：名片改造
打开第十一节的综合代码，做以下修改：
- 把卡片宽度改为 400px。
- 把头像边框颜色改为红色。
- 增加一个技能标签“盒模型”。
- 给按钮加一个
box-shadow，让它在悬停时也有“浮起来”的感觉。
十三、本篇小结
这一篇你学会了 CSS 中最核心的概念：
- 盒模型四层：content（内容） → padding（内边距） → border（边框） → margin（外边距），以及每层的含义和控制属性。
width和height默认只控制内容区尺寸。padding和margin的值缩写规则（顺时针），以及两者的关键区别（padding 在边框内，margin 在边框外）。border的写法（粗细 样式 颜色），常用样式：solid、dashed、none。border-radius做圆角，box-shadow做阴影。margin: 0 auto让块级元素水平居中（需要明确宽度）。display: flex+justify-content: center+align-items: center让子元素水平垂直居中（父容器需要高度）。
盒模型是 CSS 布局的基石。之后的任何布局方式——flex、grid、定位——都建立在你对盒模型的理解之上。把今天的内容吃透，CSS 的大门就真正向你敞开了。
下一篇预告
CSS 入门两篇到此结束。下一篇，我们将进入 JavaScript 入门。你会学到：JavaScript 写在哪里（<script> 标签）、什么是变量（let）、三种基本数据类型（字符串、数字、布尔值），以及如何用 console.log() 来调试代码。这是让网页从“静态展示”走向“动态交互”的第一步。
前端·零基础入门专题，每周更新。
暂无评论内容