『签 到』 开启辅助访问
 找回密码
 立即注册

扫一扫,访问微社区

只需一步,快速开始

QQ登录

只需要一步,快速开始

或者

[CSS样式] 收集的CSS隐藏元素的五种方法

0 59
风起云甬 发表于 2020-3-13 13:44:11 |阅读模式 |复制链接
用css隐藏页面元素有许多种方法。

  • opacity:0
  • visibility:hidden
  • diaplay:none
  • position:absolute


opacity
opacity属性的意思是设置一个元素的透明度。它不是为改变元素的边界框(bounding box)而设计的。
这一位着将opacity设置为0只能从视觉上隐藏元素。而元素本身依然占据它自己的位置并对网页的布局起作用,它也将响应用户交互。

visibility
    第二个要说的属性是visibility。将它的值设为hidden将隐藏我们的元素。如同opacity属性,被隐藏的元素依然会对我们的网页布局起作用。
        与opacity唯一不同的是它不会响应任何用户交互。此外元素在读屏软件中会被隐藏
    注意,如果一个元素的visibility被设置为hidden,同时想要显示它的某个子孙元素,只要将那个元素的visibility显式设置为visible即可。

dispaly
    display属性依照词义真正隐藏元素。将display属性设为none确保元素不可见并且连盒模型也不生成。
    使用这个属性,被隐藏的元素不占据任何空间。不仅如此,一旦display设为none任何对该元素直接打用户交互操作都不可能生效。
    此外,读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在。
    任何这个元素的子孙元素也会被同时隐藏。为这个属性添加过度动画是无效的,他的任何不同状态值之间的切换总是会立即生效。
    不过请注意,通过DOM依然可以访问到这个元素。因此你可以通过DOM来操作它。



position
    假设有一个元素你想要与它交互,但是你又不想让它影响你的网页布局,没有合适的属性可以处理这种情况(opacity和visibility影响布局mdisplay不影响布局但又无法直接交互)。
        在这种情况下,只能考虑将元素移出可视区域。这个办法既不会影响布局,有可能让元素保持可以操作。
       
  1. <div>.hide {</div><div>   position: absolute;</div><div>   top: -9999px;</div><div>   left: -9999px;</div><div>}</div>
复制代码




clip-path
    隐藏元素的另一种方法是通过剪裁它们实现。
  1. <div>
  2. </div><div>.hide {</div><div>  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);</div><div>}</div>
复制代码


您需要登录后才可以回帖 登录 | 立即注册  

本版积分规则

发布资源 快速回复 站点服务大厅 搜索 官方群