display:none

1、display:none和visible:hidden都能把网页上某个元素隐藏起来。

2、但两者有区别:

●display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是看不见也摸不到。

●visible:hidden--- 使对象在网页上不可见,但该对象在网页上所占的空间没有改变,通俗来说就是看不见但摸得到。

1、visibility: hidden----将元素隐藏,但是在网页中该占的位置还是占着。

2、display: none----将元素的显示设为无,即在网页中不占任何的位置。

3、例如有三个table,将中间的一个table hidden掉,你会发现在那个被hidden的table看不见了,但是,中间会留有很大的一空白,而这个空白就是这个table没有被隐藏时所占的位置。

4、而none的作用更像是把元素从网页中“去除”(当然不是真的去除,只是效果是如此)

5、例如有三个table,将中间的一个table none掉,你会发现在剩下的两个table中间不会有任何的空白。就好像中间的那个table从来不存在过一样。

  • 60
    点赞
  • 190
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
display: none、visibility: hidden和opacity: 0是用于隐藏元素的三种CSS属性。它们之间有一些区别。 display: none会完全移除该元素在页面上的存在,不仅看不见,也无法交互和占据空间。换句话说,该元素在页面布局中没有留下任何痕迹。 visibility: hidden会使元素变得不可见,但仍然会占据它在页面布局中的空间。虽然不能看到该元素,但它会影响周围元素的布局。 opacity: 0会将元素的透明度设置为0,从而使元素完全透明。与display: none不同,该元素仍然存在于页面上,并且会占据空间,但用户无法看到它。但是该元素仍然能够响应用户的交互。 这三种属性的隐藏效果和行为不同,可以根据具体需求选择使用。如果希望完全删除元素并且不占据空间,可以使用display: none。如果希望元素不可见但仍然占据空间,可以使用visibility: hidden。如果希望元素透明但仍然存在并能够交互,可以使用opacity: 0。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [CSS隐藏属性display:none;visibility:hidden;overflow:hidden](https://blog.csdn.net/Jorpeng/article/details/127570390)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [display:none](https://blog.csdn.net/harry5508/article/details/81904533)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值