zoukankan      html  css  js  c++  java
  • 用css隐藏元素的几种种方法

    大家一看到隐藏元素应该会想到visibility:hidden和display:none,另外的几种您是否能想起来呢???

    要隐藏的元素为下面的div

    <div class = "hide"></div>
    

      

    用css隐藏元素的几种方法
    名称 实现 描述
    display:none

    .hide{

       display:none;

    }

    元素在页面上彻底消失,不占据空间,

    会导致浏览器重排和重绘,不可交互

    visibility:hidden

    .hide{

       visibility:hidden;

    }

    元素在页面消失,但是仍然占据空间,

    只会导致浏览器的重绘,不会重排。

    适用于元素隐藏后,不希望页面布局

    发生变化的场景

    opacity:0

    .hide{

       opacity:0;

    }

    设置元素的透明度为0,只是在视觉

    上隐藏了元素,元素本身仍然占据着

    空间,并影响网页的布局,可交互,

    可被读屏软件识别

    position

    .hide {
    position: absolute;
    top: -9999px;
    left: -9999px;
    }

    假设有一个元素你想要与它交互,但

    是你又不想让它影响你的网页布局,

    没有合适的属性可以处理这种情况

    (opacity 和 visibility 影响布局,

    display 不影响布局但又无法直接

    交互)。在这种情况下,你只能考

    虑将元素移出可视区域。这个办法

    既不会影响布局,有能让元素保持

    可以操作。

    position

    .hide{
    position:absolute;
    z-index:-1000;/* 不占据空间,无法点击 */
    }

    通过设置z-index值使其它元素遮

    盖该元素也算是一种隐藏,此方法

    不占据空间,不可交互,无法点击

  • 相关阅读:
    c#向某网址Post信息,并得到Cookies
    调度自动化系统及调度数据网安全分析探讨
    C#winform中怎么将程序最小化到系统托盘
    电力配网自动化解决方案
    .NET (c#) 模拟 Cookie
    调整数组顺序使奇数位于偶数前面
    在字符串中删除特定的字符
    在O(1)时间内删除链表结点
    单链表逆置
    从尾到头输出链表
  • 原文地址:https://www.cnblogs.com/zqcoding/p/7866412.html
Copyright © 2011-2022 走看看