2022了，属实有点难受，但确实有以前没注意的点，翻来翻去都是复制黏贴的没看到满意的，索性根据定义及一些demo在mac os12.2.1 (21D62),chrome101.0.4951.54版本下得出如下结论。有异议提下，我们一起维护一份靠谱的
个人总结
display: none（v-show）
- DOM 结构：dom树上存在，UI上隐藏，不占据空间；
- 事件监听：不能获取焦点，UI上无法触发，但是通过js依然可以获取dom，以及触发监听事件，子类无法显示；
- 性能：动态改变此属性时会引起回流、重绘；
- 继承：不会被子元素继承，子类也不会被渲染；
- transition：
transition不支持display。 - counter-increment：不计数
visibility: hidden
- DOM 结构：dom树上存在，UI上隐藏，占据空间；
- 事件监听：不能获取焦点，UI上无法触发事件，但是通过js依然可以获取dom，以及触发监听事件，子类的事件也会冒泡到该节点；
- 性 能：动态改变此属性时会引起重绘；
- 继 承：会被子元素继承，子元素可以通过设置
visibility: visible来取消隐藏； - transition：
visibility会立即显示，隐藏时会延时。(待验证) - counter-increment：计数
opacity: 0
- DOM 结构：dom树上存在，UI上透明，占据空间；
- 事件监听：可以获取焦点，UI上可以触发事件；
- 性 能：如果提升为合成层，不会触发回流、重绘。如果没有提升，则会触发回流重绘；
- 继 承：会被子元素继承,且，子元素并不能通过
opacity: 1来取消隐藏； - transition：
opacity可以延时显示和隐藏。 - counter-increment：计数
visibility:collapse
面试官还特地问了这个，我确实不知道，但是浏览器实现方式各异，实属有些八股文了
- 用于表格子元素(如
tr,tbody,col,colgroup)时效果和display:none一样，用于其他元素上时则效果与visibility:hidden一样
回顾下定义
其实它们的区别都可以从定义中合理的推出来
display: none
Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off.
关闭元素的显示，使其对布局没有影响（文档渲染就当元素不存在）。所有后代元素的显示也都处于关闭状态。
visibility: hidden
The element box is invisible (not drawn), but still affects layout as normal. Descendants of the element will be visible if they have
visibilityset tovisible. The element cannot receive focus (such as when navigating through tab indexes).
元素框不可见（未绘制），但仍会正常影响布局。如果元素的后代将visibility设置为visible，则这些后代将可见。元素无法接收焦点（例如，通过tab导航获取焦点）。
