每个 DOM 元素在屏幕上占据一个矩形区域。每个浏览器的开发者工具都包含对该矩形的可视化表示。以下是它的样子：

如果不进行任何自定义，该矩形的大小由元素的内容决定。Tailwind 让我们能够控制该矩形的每一个方面。

让矩形可见

任何 DOM 元素最重要的特性之一是用户是否能够看到它。通过使用一点 JavaScript 来操作这一特性，我们可以低成本地添加交互功能。一种常见模式是在页面初始加载时加载大量潜在的 DOM 元素，但让其中许多元素一开始处于隐藏状态，通过操控可见性来改变页面内容，而无需向服务器请求更多数据。

当我们要让某个 DOM 元素对用户不可见时，使用 .hidden 工具类，它封装了 CSS 属性 display: none。在 Tailwind 中，.hidden 的相反情况通常是 .block。虽然 display 还有其他多种可能值，但 Tailwind 的 Preflight 会使得许多元素默认使用 block 值。另一个常见值是 inline，但在 Tailwind 中，我们更倾向于使用 flexbox 或 grid 布局来实现内联行为，这将在下一章中介绍。

此外，Tailwind 还提供了 .visible 和 .invisible 工具类。.invisible 与 .hidden 的区别在于：一个 .hidden 元素不会显示，也不参与 DOM 布局。因此，它的存在不会影响其他元素的布局。相比之下，一个 .invisible 元素不会显示其内容，但仍然会影响页面其余部分的布局。它会在页面上表现为一个空白区域，尺寸依然存在，但内容为空。

矩形里有什么？

CSS 盒模型包含四个部分。从内到外依次为：

• 内容 是元素内部的文本或媒体。
• 内边距 是内容周围、但位于边框内部的空间。我们可以分别在四个方向上指定内边距，也可以仅在水平方向、仅在垂直方向，或同时在所有方向上指定。
• 边框 是围绕内边距的边缘。边框与内边距唯一的区别在于，通过颜色和图案来绘制边框，以包围内边距和内容。
• 外边距 是元素与其他所有元素之间的边框外部空间。我们可以像设置内边距一样，在所有方向上指定外边距。

我们还可以指定矩形的高度和宽度，可以是绝对数值，也可以是可用宽度和高度的百分比。如果我们显式指定了宽度或高度，任何未使用的空间都会被视为内容的一部分。如果限制了元素的大小，我们还可以告诉页面如何处理超出该尺寸的内容。最后，我们还可以对元素的背景进行一些调整。