- dispaly:none;和visibility:hidden;
针对这两种方式:
初级含义是:前者隐藏后,不占据空间;而后者则占据空间。均无法实现点击
深层含义是:
1.回流与重绘
正因为前者隐藏后不占据空间,所以在隐藏时需要将其从dom上删除从而产生回流和重绘;而后者因为无需此操作,所以在性能上优于前者
2.株连性
前者设置后,其子代后代元素全部销毁隐藏
后者设置后,其子代后代元素全部隐藏,可以将子代后代设置为visibility:visible将其显示。
- height:0;overflow:hidden;
不占据空间,无法点击 - opacity: 0;
占据空间,并且不影响点击事件 - position: absolute; opacity: 0;
不占据空间,并且不影响点击事件
以下是笔者认为很详细的fenxi:
http://www.zhangxinxu.com/wordpress/2012/02/css-overflow-hidden-visibility-hidden-disabled-use/