border-collapse: collapse：合并相邻边框（避免双边框）这里的collapse是啥意思？词源角度讲解一下
collapse 的词源与含义详解
一、collapse 的基本词源
collapse 来自拉丁语：
前缀
col-：一起、共同（是com-的变体，在l前变成col-）词根
-laps-：滑、滑落、倒下后缀
-e：动词结尾
字面意思：滑落到一起、倒塌在一起
二、词源演变路径
text
拉丁语 collabi (滑到一起、倒塌) ↓ 由 com-(一起) + labi(滑、倒) 组成 ↓ 进入英语 collapse (倒塌、崩溃、折叠) ↓ CSS 中借用这个单词 → border-collapse: collapse
同源词举例：
lapse：流逝、失效（时间"滑走"）
elapse：时间消逝（e-向外 + lapse）
landslide：山体滑坡（land + slide，slide 和 lapse 同源）
三、在 border-collapse 中的含义
字面理解
collapse = "倒塌在一起" → 两个边框合并/折叠成一个
视觉对比
| 属性值 | 效果 | 形象比喻 |
|---|---|---|
border-collapse: separate | 边框分离，有间隙 | 两堵墙分开站，中间有空隙 |
border-collapse: collapse | 边框合并，重叠处只显示一条 | 两堵墙倒塌在一起，合二为一 |
示例演示
html
<!-- separate：边框分离 --><table style="border-collapse: separate; border-spacing: 5px;"> <td style="border: 2px solid red;">单元格A</td> <td style="border: 2px solid blue;">单元格B</td></table><!-- 相邻边框：红色和蓝色并排显示，中间有5px空隙 --><!-- collapse：边框合并 --><table style="border-collapse: collapse;"> <td style="border: 2px solid red;">单元格A</td> <td style="border: 2px solid blue;">单元格B</td></table><!-- 相邻边框：红色和蓝色"倒塌"在一起，只显示一条边框（按规则二选一） -->
四、CSS 中 collapse 的三种用法
同一个单词 collapse 在 CSS 不同属性中有相似但略有区别的含义：
1. border-collapse: collapse（表格边框）
含义：相邻边框合并成一条
比喻：两堵墙倒塌合为一体
2. visibility: collapse（表格行/列隐藏）
含义：隐藏表格行/列，但保留占位空间（区别于
hidden）比喻：墙倒塌了，但地基还在
3. flex/grid 中的 collapse（未标准化）
含义：项目折叠收缩
五、深入理解：为什么用 "collapse" 这个词？
生活中的例子
想象两栋相邻的房子：
separate（分离）：房子之间有 10 米距离，各自独立
collapse（倒塌）：两栋房子向中间倒塌，墙壁重合在一起，变成一堵共用墙
表格边框的"倒塌"规则
当两条边框 collapse 时，遵循边框冲突解决规则：
css
/* 边框优先级（从高到低） */1. border-style: hidden（最高） 2. border-style: double、solid、dashed 等 3. border-width: 更宽的优先 4. 按边框样式优先级：double > solid > dashed > dotted > none
六、代码实例对比
html
<style>
/* 分离模式 */
.table-separate {
border-collapse: separate;
border-spacing: 10px; /* 边框间距10px */
}
/* 合并模式 */
.table-collapse {
border-collapse: collapse;
/* border-spacing 无效 */
}</style><!-- 分离：两个边框之间有10px空隙 --><table class="table-separate">
<tr><td style="border: 2px solid red;">A</td><td style="border: 2px solid blue;">B</td></tr></table><!-- 合并：相邻边框倒塌合并，只显示一条 --><table class="table-collapse">
<tr><td style="border: 2px solid red;">A</td><td style="border: 2px solid blue;">B</td></tr></table>输出效果：
分离模式：
[红色边框A] 空隙 [蓝色边框B]合并模式：
[红色边框A | 蓝色边框B]（中间竖线只显示一条）
七、记忆技巧
| 联想 | 说明 |
|---|---|
| 词源法 | col-(一起) + lapse(滑落) = 滑到一起 → 合并 |
| 场景法 | 两堵墙倒塌 → 合二为一 → 边框合并 |
| 对比法 | separate = 分开站立；collapse = 倒塌合并 |
| 英文造句 | "The two walls collapsed into one."（两堵墙倒塌成一堵） |
总结
词源本义：
col-(一起)+lapse(滑落)= 滑落到一起、倒塌CSS 含义：相邻表格边框合并成一条，就像两堵墙倒塌后共用一面墙
与 separate 对比：separate 是"分开"，collapse 是"合拢"
记忆口诀："collapse 倒塌合一起，边框合并不分你我"