css实现元素不可见的方法

在页面布局时我们经常要使用元素不可见的知识点比如：二级菜单、网页标题logo等等。今天我就总结一下常用的元素隐藏方法

 <div class="w">
        12345789
    </div>

.w{
		width: 100px;
        height: 100px;
        background-color: pink;
        line-height: 100px;
        text-align: center;
}

透明度opacity

.w{opacity: 0; }

注意虽然不可见但还是存在的

改 rgba

.w{background-color: rgba(255, 255, 255, 0); }

只改背景的透明度盒子还存在

display: none;

.w{display: none; }

display: none;会使盒子消失并把位置空出来

定位

.w{   	position: absolute;
        left: -1000000px;
        top: -1000000px;}

直接把盒子丢出可见区

visibility: hidden;

.w{visibility: hidden; }

和opacity一样使元素不可见但盒子还存在

网页标题logo文字

.w{ text-indent: -9999px;
     overflow: hidden; }

或者

.w{ font-size: 0; }

以上方法都可以使得标题logo文字用户看不到，只给搜索引擎看