嘿，各位前端小可爱们，今天咱们来聊聊一个老生常谈的话题，但绝对是前端页面排版中不可或缺的技能——border-collapse 属性，以及它的小伙伴 collapse 属性。
别看它名字简单，实际用起来可是一门大学问！你以为只是简单地让表格边框合并一下？那你就太小看它了！
想象一下，你正在设计一个想让它看起来更整洁，更像一个整体，而不是一个个独立的小单元格。这时候，border-collapse 属性就闪亮登场了！
简单来说，border-collapse 属性就是用来控制表格边框是否合并的。它有两个值：collapse 和 separate。
collapse：合并边框，让表格更紧凑
当 border-collapse 属性值为 collapse 时，表格的单元格边框会合并成一个连续的边框，就像一个整体一样。这样一来，表格就会看起来更加紧凑，也更美观。
separate：分离边框，保留单元格的独立性
而当 border-collapse 属性值为 separate 时，每个单元格的边框都会独立显示，就像一个个独立的小盒子一样。这样一来，表格就会看起来更加分明，也更容易区分每个单元格。
那么，collapse 属性又是做什么的呢？
其实，collapse 属性和 border-collapse 属性是紧密相连的。当 border-collapse 属性值为 collapse 时，collapse 属性就决定了合并后的边框的样式。
collapse 属性的值可以是：
1. collapse：表示合并后的边框使用单元格的第一个边框样式，也就是最外层的边框样式。
2. inherit：表示合并后的边框样式继承自父元素的边框样式。
举个栗子:
html
| Cell 1 | Cell 2 |
| Cell 3 | Cell 4 |
在这个例子中，border-collapse 属性值为 collapse，所以表格的单元格边框会合并成一个连续的边框。而 collapse 属性没有指定，默认值为 collapse，所以合并后的边框样式使用单元格的第一个边框样式，也就是 1px solid black。
最终的结果就是，表格的所有边框都变成了黑色实线，看起来就像一个整体。
表格对比
| 属性值 | 效果 | 说明 |
|---|---|---|
| border-collapse: separate | 分离的边框 | 每个单元格的边框独立显示 |
| border-collapse: collapse | 合并的边框 | 单元格的边框合并成一个连续的边框 |
| collapse: collapse | 合并后的边框使用单元格的第一个边框样式 | 合并后的边框使用单元格的第一个边框样式 |
| collapse: inherit | 合并后的边框样式继承自父元素的边框样式 | 合并后的边框样式继承自父元素的边框样式 |
是不是很简单？是不是很有用？学会了 border-collapse 和 collapse 属性，你就离优秀的前端工程师又近了一步！
给你们留个小作业：
尝试着使用 border-collapse 属性设计一个更美观的并用不同的 collapse 属性值来改变边框样式。看看你能做出什么花样？
记得分享你的作品，让我们一起学习，一起进步！