• 技术文章 >web前端 >css教程

    css怎么控制元素隐藏

    青灯夜游青灯夜游2021-07-14 15:59:10原创101

    方法:1、使用“opacity:0;”;2、使用“visibility: hidden;”;3、使用“diaplay:none;”;4、使用“position:absolute;top:-999px;”;5、利用clip-path属性。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    用css隐藏页面元素有许多种方法。

    第一种方法:opacity: 0;

    opacity属性通常用于设置一个元素的透明度,从另一个角度来看,如果透明度为0,也就从视觉上隐藏了该元素。

    这个属性不是为改变元素的边界框(bounding box)而设计的,元素本身依然占据它自己的位置并对网页的布局起作用,它也将响应用户交互。

    第二种方法:visibility: hidden;

    第二个要说的属性是visibility。

    将它的值设为hidden将隐藏我们的元素。

    如同opacity属性,被隐藏的元素依然会对我们的网页布局起作用。

    与opacity唯一不同的是它不会响应任何用户交互。

    此外,设置了该属性之后,元素在读屏软件中会被隐藏。

    另外要注意的是,如果一个元素的visibility被设置为hidden之后,却想要显示它的某个子孙元素,只要将那个子孙元素的visibility显式设置为visible即可(样式覆盖)。

    第三种方法:diaplay: none;

    display属性依照词义才是真正地隐藏了元素。

    将display属性设为none就能确保元素不可见并且连盒模型也不生成,使用这个属性,被隐藏的元素不占据任何空间。

    不仅如此,一旦display设为none任何对该元素直接打用户交互操作都不可能生效。

    此外,读屏软件也不会读到元素的内容,因为这种方式产生的效果就像元素完全不存在。

    任何这个元素的子孙元素也会被同时隐藏。

    为这个属性添加过度动画是无效的,他的任何不同状态值之间的切换总是会立即生效。

    不过请注意,通过DOM依然可以访问到这个元素。因此你可以通过DOM来操作它。

    第四种方法:position: absolute;

    假设有一个元素你想要与它交互,但是你又不想让它影响你的网页布局,没有合适的属性可以处理这种情况(opacity和visibility影响布局mdisplay不影响布局但又无法直接交互)。

    在这种情况下,只能考虑将元素移出可视区域,这个办法既不会影响布局,有可能让元素保持可以操作。

    具体是通过将position属性设置为absolute来实现(绝对定位)。

    position: absolute;
    top: -999px;
    left: -999px;

    第五种方法:clip-path

    隐藏元素的另一种方法是通过剪裁它们实现,具体是通过clip-path属性,这个属性比较新,浏览器兼容性也会比较差。

    clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);

    但是了解一下还是很必要的。

    (学习视频分享:css视频教程

    以上就是css怎么控制元素隐藏的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css 元素隐藏
    上一篇:css3如何实现图片平移 下一篇:css如何加空格
    第16期线上培训班

    相关文章推荐

    • script在css是什么意思• css怎么删除滚动条• css三种颜色写法是什么• css样式常见错误有哪些• css都有哪些单位• css3哪个是设置动画播放次数

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网