前言
上一篇《前端篇 04》中，我们已经掌握了CSS的基础语法、三种引入方式和常用的文本、背景样式，成功给个人介绍页面穿上了漂亮的\”外衣\”。但你可能已经发现，之前我们都是直接给HTML原生标签加样式，无法灵活地划分页面区域、实现复杂的布局。
本篇作为前端篇的第五篇，我们将循序渐进地学习网页布局的核心基础：首先讲解div和span这两个最重要的通用布局标签，然后引入块级元素与行内元素的核心概念，搞清楚不同元素的默认行为差异。最后深入讲解CSS盒模型——这是所有网页元素布局的底层逻辑，掌握了盒模型，你才能真正理解元素的大小和位置是如何计算的。
本文为Python全栈开发者量身打造，每一个概念都从\”是什么-为什么-怎么用\”三个维度讲解，配合大量可直接运行的实战示例，重点标注新手最容易混淆的知识点和常见坑。最后通过重构个人介绍页面的实战，将所有知识点融会贯通，为后续学习Flex、Grid等现代布局打下坚实的基础。
本节核心学习内容：
文章目录
- 前言
- 一、通用布局标签：div与span
-
- 1.1 div标签：块级容器
- 1.2 span标签：行内容器
- 1.3 div与span的核心区别
- 二、块级元素与行内元素
-
- 2.1 块级元素
- 2.2 行内元素
- 2.3 实战示例：对比块级与行内元素
- 三、CSS盒模型详解
-
- 3.1 内容区（Content）
- 3.2 内边距（Padding）
- 3.3 边框（Border）
- 3.4 外边距（Margin）
- 3.2 标准盒模型与怪异盒模型
-
- 1. 标准盒模型（W3C盒模型）
- 2. 怪异盒模型（IE盒模型）
- 3. box-sizing属性
- 四、元素显示模式转换
-
- 4.1 常用的display属性值
- 4.2 行内块元素
- 4.3 实战示例：显示模式转换
- 五、综合实战：用盒模型重构个人介绍页面
-
- 5.1 完整代码
- 5.2 代码说明
- 六、常见误区与避坑指南
- 七、核心总结：布局基础知识点速查表
-
- 通用布局标签
- 元素显示模式
- CSS盒模型
- 盒模型模式
- 显示模式转换
- 八、专栏订阅
一、通用布局标签：div与span
HTML提供了两个没有任何默认样式的通用标签，专门用于划分页面区域和包裹内容，它们是div和span。这两个标签是所有复杂布局的基础，也是前端开发中使用频率最高的标签。
1.1 div标签：块级容器
<div>是division的缩写，意为\”分割、区域\”，是一个块级容器标签，用于将页面划分为多个独立的逻辑区域。
特点：
- 没有任何默认样式，只是一个空的容器
- 默认独占一行，宽度自动填满父元素
- 可以嵌套任意其他标签，包括其他div
- 主要用于页面的宏观布局，划分大的区域（如头部、导航、内容区、侧边栏、底部）
语法格式：
<div>
这里可以放任意内容
