display:none

 1.使元素隐藏，不再占据空间。

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

 2.动态操作时会引起页面回流和重绘，影响性能。

 3.子元素也会被隐藏并且添加display:block/visibility:visible无效。

 

visibility:hidden

 1.使元素隐藏，占据空间。

 2.只引起页面重绘，性能开销相对较低。

 3.子元素也会被隐藏，但是添加visibility:visible子元素会显示。

 

注：回流和重绘见 基础总结（05）-- 回流和重绘

扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄