display:none
1.使元素隐藏,不再占据空间。
2.动态操作时会引起页面回流和重绘,影响性能。
3.子元素也会被隐藏并且添加display:block/visibility:visible无效。
visibility:hidden
1.使元素隐藏,占据空间。
2.只引起页面重绘,性能开销相对较低。
3.子元素也会被隐藏,但是添加visibility:visible子元素会显示。
注:回流和重绘见基础总结(05)-- 回流和重绘
display:none
1.使元素隐藏,不再占据空间。
2.动态操作时会引起页面回流和重绘,影响性能。
3.子元素也会被隐藏并且添加display:block/visibility:visible无效。
visibility:hidden
1.使元素隐藏,占据空间。
2.只引起页面重绘,性能开销相对较低。
3.子元素也会被隐藏,但是添加visibility:visible子元素会显示。
注:回流和重绘见基础总结(05)-- 回流和重绘