[css] visibility:hidden, display:none 的差別

visibility:hidden: The generated box is invisible (fully transparent, nothing is drawn), but still affects layout. Furthermore, descendants of the element will be visible if they have ‘visibility: visible’.

當visibility:hidden時，生成的盒子将不不可見，但是仍然影響布局，并且，如果背景元素設定visibility: visible，那麼他們依然是可見的。

display:none: This value causes an element to not appear in the formatting structure (i.e., in visual media the element generates no boxes and has no effect on layout). Descendant elements do not generate any boxes either; the element and its content are removed from the formatting structure entirely. This behavior cannot be overridden by setting the ‘display’ property on the descendants.

Please note that a display of ‘none’ does not create an invisible box; it creates no box at all. CSS includes mechanisms that enable an element to generate boxes in the formatting structure that affect formatting but are not visible themselves. Please consult the section on visibility for details.

當display:none時，元素将不會出現在“formatting structure”（這裡的formatting structure可以了解為視覺上的DOM樹）中。同時後代元素也不會生成盒子，該元素和他的内容見完全從“formatting structure”中移除，同時設定後代的displ屬性不會覆寫這個行為。

display:none不會生成任何盒子，是以元素設定display:none後會影響布局。

參考資訊： propdef-visibility / propdef-display

https://www.doctype.com.cn/archives/311/