css基本常用隐藏元素介绍

css基本常用隐藏元素介绍

css中隐藏元素有好几种，他们的虽然都可以隐藏元素，看起来实现的都是同样的效果。其实每一种方法实际上都有一些不同。

1.display

display：none，使元素隐藏消失，且不占据空间，像一般的二级菜单可以使用。想元素在此显示，改为display：block就行了。
示例：

    <style>
        .text {
            width: 100px;
            background-color: pink
        }
        
        .contion {
            width: 100px;
            background-color: skyblue;
            display: none;
        }
    </style>
    <div class="text">针不戳</div>
    <div class="contion">诶，高级</div>

没设置隐藏前

隐藏后，是占据空间。

2.visibility

visibility: hidden 使元素隐藏消失，且占据空间。

3.overflow

overflow：hidden隐藏溢出元素部分。

4.text-indent: -9999px

text-indent: -9999px;通过偏移掉字体的方式，来达到字体隐藏，用来网站logol图片来代替h1，这时需要隐藏h1内的这段文字，这样能优化搜索引擎。

 <style>
   .text {
       width: 200px;
       height: 150px;
       text-indent: -9999px;
     }
</style>
<div class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi iure alias doloribus sint maxime non id,                velit fuga. Cumque accusamus enim neque necessitatibus illum explicabo magnam dolor nostrum nemo, ea ut aut dolores sed quos error a eveniet quam commodi harum! Iste possimus, consequuntur architecto totam tempora sed quod repudiandae.
</div>

5.opacity: 0

opacity: 0，通过透明度为0来实现隐藏效果，占据空间。