display:none、visibility:hidden和opacity:0之间的区别

本文详细对比了使用display:none、visibility:hidden及opacity:0三种CSS属性隐藏网页元素的区别,包括空间占据、子元素继承、事件绑定及过渡动画等方面,并提供了代码示例。
摘要由CSDN通过智能技术生成

一、空间占据

display:none隐藏后不占据额外空间,它会产生回流和重绘,而visibility:hidden和opacity:0元素虽然隐藏了,但它们仍然占据着空间,它们俩只会引起页面重绘。

代码:

<style>
	div {
		width: 200px;
		height: 200px;
		background: #ccc;
		margin-top: 10px;
	}
	.div1 {
		display: none;
	}
	.div2 {
		visibility: hidden;
	}
	.div3 {
		opacity: 0;
	}
</style>
<body>
	<div class="div1">
		<p>display:none</p>
	</div>
	<div class="div2">
		<p>visibility:visible</p>
	</div>
	<div class="div3">
		<p>opacity:0</p>
	</div>
</body>

页面:

    

二、子元素继承

display:none不会被子元素继承,但是父元素都不在了,子元素自然也就不会显示了,皮之不存,毛之安附~~

visibility:hidden 会被子元素继承,可以通过设置子元素visibility:visible 使子元素显示出来

opacity: 0 也会被子元素继承,但是不能通过设置子元素opacity: 0使其重新显示

代码:

<style>
    .div1 p {
        display: block;
    }
    .div2 p {
        visibility: visible;
    }
    .div3 p {
        opacity: 1;
    }
</style>

页面效果:


三、事件绑定

display:none 的元素都已经不再页面存在了,因此肯定也无法触发它上面绑定的事件;

visibility:hidden 元素上绑定的事件也无法触发;

opacity: 0元素上面绑定的事件是可以触发的。

(这个就不太好在图上看了,可以自己测试一下)

四、过渡动画

transition对于display肯定是无效的,大家应该都知道;

transition对于visibility也是无效的;

transition对于opacity是有效,大家也是知道的:).


评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值