1. display: none; 与 visibility: hidden; 的区别
相同点:都能让元素不可见
不同点:
1) 渲染树
- display: none; 会让元素完全从渲染树(不是dom树)中消失,渲染的时候不占据任何空间;
- visibility: hidden; 不会让元素从渲染树中消失,渲染元素继续占据空间,只是内容不可见
2) 属性是否可继承
- display: none; 是非继承属性,子孙节点消失由于元素从渲染树消失造成,通过修改子孙节点属性无法显示
- visibility: hidden; 是继承属性,子孙节点消失由于继承了hidden,通过设置visibility: visible; 可以让子孙节点显示
3) 修改属性值
- 修改常规流中元素的display属性通常会造成文档重排
- 修改visibility属性只会造成本元素的重绘