css隐藏元素的几种方式及区别 display:none visibility:hidden opacity 元素隐藏

您所在的位置:网站首页 英语翻译方法有哪几种 css隐藏元素的几种方式及区别 display:none visibility:hidden opacity 元素隐藏

css隐藏元素的几种方式及区别 display:none visibility:hidden opacity 元素隐藏

2024-06-17 09:07| 来源: 网络整理| 查看: 265

元素的显示和隐藏 display:none

元素在页面上将彻底消失,元素本来占有的空间就会被其他元素占有,也就是说它会导致浏览器的重排和重绘,并且不会触发它的点击事件。

visibility:hidden

元素在页面消失后,其占据的空间依旧会保留着,所以它只会导致浏览器重绘而不会重排,也无法触发它的点击事件

opacity:0

将元素的透明度设置为0后,也可以视为一种隐藏,这算是一种隐藏元素的方法。和visibility:hidden的一个共同点是元素隐藏后依旧占据着空间,但我们都知道,设置透明度为0后,元素只是隐身了,它依旧存在页面中,所以依然可以触发点击事件。

设置height,width等盒模型属性为0

将元素的margin,border,padding,height和width等影响元素盒模型的属性设置成0,如果元素内有子元素或内容,也应该设置其overflow:hidden来隐藏其子元素,这也算是一种隐藏元素的方法。如果全部属性都设置为0,很显然,这个元素相当于消失了,所以无法触发它的点击事件。

总结 显示隐藏方式是否占据空间是否导致浏览器重排重绘能否触发点击事件display : none不占空间会导致浏览器重排和重绘不会触发其点击事件visibility : hidden占空间不会导致浏览器重排和重绘不会触发其点击事件opacity : 0占空间不会导致浏览器重排和重绘会触发其点击事件设置height,width等盒模型属性为0设置为0后不占空间可能会导致浏览器重排和重绘设置为0后不会触发其点击事件


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3