在页面布局时我们经常要使用元素不可见的知识点比如：二级菜单、网页标题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文字用户看不到，只给搜索引擎看