隐藏元素的方法及细节

  • 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/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容