浅谈CSS隐藏元素的方法及使用，你知晓几个？

发布时间：2022-04-20 08:49:19 所属栏目：语言来源：互联网

导读：在CSS中隐藏网页页面元素的方法有很多，例如display、visibility、opacity这三个属性，应该是大家首先想到的，其实除了设置这些熟悉，我们还有其他方法也能够实现CSS隐藏元素，下面我们就一起来看看css隐藏元素的方法。首先，先了解display、visibility、op

在CSS中隐藏网页页面元素的方法有很多，例如display、visibility、opacity这三个属性，应该是大家首先想到的，其实除了设置这些熟悉，我们还有其他方法也能够实现CSS隐藏元素，下面我们就一起来看看css隐藏元素的方法。
首先，先了解display、visibility、opacity这三个属性：
属性值是否在页面上显示注册点击事件是否有效是否存在于可访问性树中
display none 否否否
visibility hidden 否否是
opacity 0 否是是
       除了display、visibility、opacity三个属性可以隐藏元素之外，是否还存在其它属性可以隐藏元素呢？它们之间又存在什么必然的联系呢？这就是我们今天要讨论的问题。

       注：由于篇幅有限，本文并未提及一些像filter:alpha(opacity=0); zoom:0;之类的兼容属性。

第一种：移除出可访问性树
display : none

       display属性可以设置元素的内部和外部显示类型。将display设置为none会将元素从可访问性树中移除。

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>display : none</title>
        <style type="text/css">
            div {
                background-color: red;
                width: 100px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                margin-top: 24px;

第二种：隐藏元素
visibility: hidden

       将visibility设置为hidden会使元素不可见，但此时元素仍然位于可访问性树中(display: none时元素被移出可访问性树 )，注册点击事件无效。

（编辑：开发网_开封站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

Spring MVC和Struts2的	C++ partition 和stab
C++ STL map容器解说	C++ STL map容器迭代器