让一个元素隐藏的方法

时间 2019-12-11

标签一个元素隐藏方法繁體版

原文原文链接

在写页面的时候，常常会让一个元素进行隐藏。下面是本身总结的一些方法。若是你们有新的想法，请不吝赐教，谢谢！css

先给出一段代码：spa

<style type="text/css">
    ul,body{
        margin:0;
        padding:0;

    }
    ul{
        list-style-type: none;
        margin-top: 20px;
        overflow: hidden;
        background:#bebebe;
    }
    li{
         padding:4px;
         float: left;
    }
    </style>
</head>
<body>
    <ul>
        <li>首页</li>
        <li>导航</li>
        <li>新闻</li>
        <li>关于</li>
    </ul>
    
</body>

咱们来实现隐藏首页这个元素。code

方法一：display:none;blog

li:first-child{
   display:none;
}

效果以下：ci

方法二：利用opacity属性it

li:first-child{
        
        filter:Alpha(opacity=0);//兼容低版本的ie;
        -moz-opacity:0;//兼容低版本的FF
        opacity: 0.0;
    }

方法三：利用visiblityclass

li:first-child{
        
        visibility: hidden;
    }

与display的区别在是否还占有空间float

经常使用的方法就是以上几种，可是还利用定位让元素不可见，或者让这个元素在一个隐藏的元素之中。方法