display:none和visibility:hidden的區別

來自專欄 前端知識筆記

在使用CSS隱藏一些元素時，我們經常用到 display:none 和 visibility:hidden。兩者差別如下：

1. 是否佔據空間

display:none，該元素不佔據任何空間，在文檔渲染時，該元素如同不存在（但依然存在文檔對象模型樹中）。

即一個（display:none）不會在渲染樹中出現，一個（visibility :hidden）會。

2. 是否渲染

display:none，會觸發reflow（迴流），進行渲染。

3. 是否是繼承屬性

display:none，display不是繼承屬性，元素及其子元素都會消失。

visibility:hidden，visibility是繼承屬性，若子元素使用了visibility:visible，則不繼承，這個子孫元素又會顯現出來。

4. 讀屏器是否讀取

讀屏器不會讀取display：none的元素內容，而會讀取visibility：hidden的元素內容。

5. 參考鏈接

• https://developer.mozilla.org/zh-CN/docs/Web/CSS/display
• https://developer.mozilla.org/zh-CN/docs/Web/CSS/visibility
• http://www.zhangxinxu.com/wordpress/2012/02/css-overflow-hidden-visibility-hidden-disabled-use/
• http://snailsky.me/2014/08/18/displaynone-%E5%92%8C-visibilityhidden-%E6%9C%89%E4%BD%95%E5%8C%BA%E5%88%AB%EF%BC%9F/
• https://www.jianshu.com/p/da8e9fba48b7
• https://www.nowcoder.com/questionTerminal/dce13fd5b59c41be80a22b38c5a32dc1

推薦閱讀：