理解 visibility 属性与 display 属性的核心区别
掌握 invisible 和 visible 两个工具类的用法及场景
学会在需要保留页面布局结构但暂时隐藏内容时使用正确的工具类
能够识别何时使用 invisible 而非 hidden（display: none）
在 Web 开发中，控制元素的显示与隐藏是常见需求。Tailwind CSS 提供了 visibility 工具类，作为原生 CSS visibility 属性的封装。
核心特性：
保留空间：使用 invisible 隐藏的元素虽然不可见，但仍然占据文档流中的空间。周围的元素不会发生位置移动，就像该元素还在那里一样，只是变成了“透明”的。
对比 display: none：如果你希望元素完全从文档流中移除，不占据任何空间，导致周围元素重新排列，应该使用 Tailwind 的 hidden 类（对应 CSS display: none），而不是 invisible。
技术背景说明：
CSSvisibility属性主要用于控制元素的可见性而不影响布局。这在动画过渡、保持布局稳定性或辅助功能场景中非常有用。
Tailwind CSS 主要支持以下两个可见性类：
invisible
此类用于将元素从页面上隐藏，但该元素在文档中占据的空间会被保留。这对于防止页面布局在元素隐藏时发生跳动（Layout Shift）非常有用。
适用场景：
加载骨架屏（Skeleton Screen）时的占位
表单验证错误信息的预留位置
动画过程中的暂时隐藏
需要保持网格或 Flex 布局结构完整的场景
语法：
<element class="invisible">...</element>示例：
在此示例中，我们有一个包含四个方块的 Flex 容器。第二个方块应用了 invisible 类。
观察结果：你看不到标有 "2" 的绿色方块，但它原本占据的位置是空的，方块 "3" 和 "4" 并没有向左移动来填补空缺。整个布局的宽度保持不变。
<!DOCTYPE html>
<html>
<head>
<link href=
"https://unpkg.com/tailwindcss@1.9.6/dist/tailwind.min.css"
rel="stylesheet">
</head>
<body class="text-center p-8">
<h1 class="text-green-600 text-5xl font-bold mb-4">
编程技术站
</h1>
<b class="block mb-6">Tailwind CSS Visibility 类演示</b>
<div id="main" class="flex flex-row justify-evenly bg-gray-100 p-4 rounded">
<!-- 方块 1: 正常显示 -->
<div class="bg-green-700 w-24 h-12 flex items-center justify-center text-white font-bold">1</div>
<!-- 方块 2: 不可见，但保留空间 -->
<div class="invisible bg-green-600 w-24 h-12 flex items-center justify-center text-white font-bold">2</div>
<!-- 方块 3: 正常显示，位置未改变 -->
<div class="bg-green-500 w-24 h-12 flex items-center justify-center text-white font-bold">3</div>
<!-- 方块 4: 正常显示 -->
<div class="bg-green-400 w-24 h-12 flex items-center justify-center text-white font-bold">4</div>
</div>
<p class="mt-4 text-sm text-gray-600">
注意：虽然方块 "2" 看不见，但它仍然占据着原来的位置，方块 "3" 没有移动过来。
</p>
</body>
</html>visible
这是元素的默认状态。显式添加 visible 类通常用于覆盖父元素或默认样式中的 invisible 设置，确保元素在特定条件下可见。
适用场景：
响应式设计中，在小屏幕上隐藏 (invisible)，在大屏幕上显示 (visible)
通过 JavaScript 动态切换可见性状态时，作为“显示”状态的类名
语法：
<element class="visible">...</element>示例：
在此示例中，所有元素都正常显示。visible 类在这里是显式声明的，虽然不加该类默认也是可见的，但在某些动态切换场景中明确写出有助于代码可读性。
<!DOCTYPE html>
<html>
<head>
<link href=
"https://unpkg.com/tailwindcss@1.9.6/dist/tailwind.min.css"
rel="stylesheet">
</head>
<body class="text-center p-8">
<h1 class="text-green-600 text-5xl font-bold mb-4">
编程技术站
</h1>
<b class="block mb-6">Tailwind CSS Visibility 类演示 (Visible)</b>
<div id="main" class="flex flex-row justify-evenly bg-gray-100 p-4 rounded">
<div class="bg-green-700 w-24 h-12 flex items-center justify-center text-white font-bold">1</div>
<!-- 方块 2: 显式设置为可见 -->
<div class="visible bg-green-600 w-24 h-12 flex items-center justify-center text-white font-bold">2</div>
<div class="bg-green-500 w-24 h-12 flex items-center justify-center text-white font-bold">3</div>
<div class="bg-green-400 w-24 h-12 flex items-center justify-center text-white font-bold">4</div>
</div>
<p class="mt-4 text-sm text-gray-600">
所有方块均正常显示，布局紧凑。
</p>
</body>
</html>理解这两者的区别至关重要，它们适用于完全不同的场景。
invisible：隐藏元素但保留其占据的空间。页面布局不会因为该元素的隐藏而发生重排或抖动。
visible：显示元素，是默认状态。常用于覆盖其他隐藏的样式。
关键区别：如果需要元素消失且周围内容自动填补空缺，请使用 hidden (display: none)；如果需要元素消失但保留原位（如占位符），请使用 invisible (visibility: hidden)。
应用场景：invisible 非常适合用于加载状态下的骨架屏、表单错误提示的预留位置，以及复杂的 CSS 动画中需要暂时隐藏但不想破坏布局流的场景。
假设你正在设计一个表单，每个输入框下方都有一个用于显示错误信息的 div。为了不让错误信息出现时把下方的按钮“挤”下去（即保持页面高度稳定），你应该在错误信息为空时使用 hidden 还是 invisible？为什么？
如果你想实现一个“点击展开 / 收起”的手风琴效果（Accordion），当内容收起时，你希望下方的内容自动上移填补空缺。此时应该使用哪个 Tailwind 类来控制内容的显示与隐藏？
在一个 Flex 布局的行中，有 5 个等宽的子元素。如果将第 3 个元素设置为 invisible，这一行的总宽度会发生变化吗？第 4 和第 5 个元素的位置会移动吗？请简述理由。