如何隐藏页面中的某个元素？

[Rashomon511]

常用两种方法

• display:none; (不占位隐藏)
• visibility:hidden; (占位隐藏)

将透明度设置为0

• opacity:0; (需要考虑兼容性,filter:Alpha(opacity=0))(占位)

定位

    <!--HTML结构-->
    <div class="box">
        <div class="self">qwwww</div>
    </div>

• position:absolute;left:-999%;(移出可视区域，为何不使用正值自行尝试，不占位)
• position:fixed;left:-999%;(移出可视区域，为何不使用正值自行尝试，不占位)
• position:relative;left:-999%;(移出可视区域，为何不使用正值自行尝试，占位)
• .box{background-color:#fff;}.self{position:absolute;z-index:-9;}(移至底层，使用背景遮罩，不占位)
• .box{background-color:#fff;}.self{position:fixed;z-index:-9;}(移至底层，使用背景遮罩，不占位)
• .box{background-color:#fff;}.self{position:relative;z-index:-9;}(移至底层，使用背景遮罩，占位)

Transform

• transform: translate(-999%, -999%);(移出可视区域，为何不使用正值自行尝试，占位)
• transform: scale(0);(缩放，占位)

盒模型

• margin-left:-999%;(移出可视区域，为何不使用正值自行尝试，占位，慎用)
• width:0;height:0;overflow:hidden;(盒子大小为0，超出隐藏，不占位)

常用文本隐藏

• text-indent:-9999px;(移出可视区域，为何不使用正值自行尝试)

扩展:考虑隐藏元素引起页面的回流或重绘，延伸到书写css的规范，先写布局在写其他样式