当你浏览网页时，你看到的是文字、图片和按钮。但浏览器看到的却完全是另一番景象：一个由无数个矩形盒子组成的世界。在 浏览器渲染引擎 眼中，页面上的每一个元素，无论是一整段文字、一个链接，还是一个图片，都是一个盒子。

每个盒子都由四个部分组成，从内到外依次是：

1. 内容（Content）：盒子的核心，也就是你实际看到的文字或图片。
2. 内边距（Padding）：内容周围的透明区域，像一个缓冲垫。
3. 边框（Border）：包围内边距和内容的线，可以设置样式和颜色。
4. 外边距（Margin）：边框外的透明区域，用来推开其他盒子，制造间距。

虽然万物皆盒子，但盒子有两种基本类型：块级盒子（Block box）和内联盒子（Inline box）。它们的行为方式截然不同，决定了网页的流动和结构。

块级盒子非常“霸道”。它总是在新的一行开始，并且会占据父元素可用的全部宽度。常见的块级元素包括段落 <p>、标题 <h1> 到 <h6>，以及通用的容器 <div>。

内联盒子则很“随和”。它不会另起一行，而是会和其他内联元素在同一行内并排排列，就像句子中的单词一样。它只占据其内容所需的宽度。常见的内联元素有链接 <a>、用于局部样式的 <span> 和加粗 <strong>。

块级盒子的行为很稳定，总是一个完整的矩形。但内联盒子有一个有趣的特性：当它所在的行空间不足时，它会“断裂”并换行。这时，一个逻辑上的内联元素在视觉上就变成了多个独立的矩形。

想象一下，你用荧光笔标记一个长句子中的几个词。如果这几个词刚好在行末，荧光标记就会被分成两部分，一部分在第一行末尾，另一部分在第二行开头。尽管你只进行了一次标记操作（一个逻辑元素），但你得到了两个分离的视觉矩形。

这就是为什么在编程中，当我们试图获取一个换行文本的屏幕坐标时，有时会得到一个矩形数组，而不是单个矩形。例如，一个名为 getClientRects() 的函数就会返回这些视觉上分离的矩形（Visual Rects）的集合。理解这一点对于精确地定位文本或创建文本高亮等交互功能至关重要。

理论说得再多，也不如亲眼一见。所有现代浏览器都内置了“开发者工具”，可以让你像浏览器一样查看页面，看到构成网页的每一个盒子。这是一个非常强大的学习工具。

要打开它，只需在网页的任何位置点击鼠标右键，然后选择“检查”或“审查元素”。

打开开发者工具后，在“元素”或“Elements”面板中，当你用鼠标悬停在某一行 HTML 代码上时，页面上对应的元素就会被高亮显示。同时，通常在右侧的“样式”或“Styles”面板下方，你会看到一个盒子模型的示意图，精确地展示了该元素的内容、内边距、边框和外边距的尺寸。

不妨现在就试试。检查一下这个段落，看看它的盒子是什么样的。

理解盒子模型是掌握网页布局的第一步。一旦你开始用“盒子”的眼光看待网页，你就能更好地控制元素的位置、大小和间距。