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