ello~~各位小伙伴，今天我们广州蓝景实训部，继续和大家分享前端技术干货，CSS隐藏元素

总结出7种隐藏元素的办法

1.CSS display的值是none。(该元素是不会在页面上显示的)

div{
    display: none;
}

2. type="hidden"的表单元素。(该元素是不会在页面上显示的)

3. 宽度和高度都显式设置为0。(该元素会在页面上显示)

div{
    width: 0;
    height: 0;
}

4. 一个祖先元素是隐藏的，(该祖先以及祖先以下的元素是不会在页面上显示)

5. CSS visibility的值是hidden(该元素是会在页面上显示，还占原来的位置)

div{
    visibility: hidden;
}

6. CSS opacity的指数是0(该元素是会在页面上显示，还占原来的位置)

div{
    opacity: 0;
}

7. 将position设为absolute然后将位置设到不可见区域

div{
   position: absolute;
   top: -9999px;
   left: -9999px;
}

想要了解更多web前端开发技术资料，可在评论区留言！也可添加我们微信：philip_tan

录

使用场景

display属性

visibility 可见性

overflow 溢出

博主个人兴趣

.元素的显示与隐藏

display、visibility两个属性都可以实现元素的显示与隐藏

（1.1）display:none;隐藏元素；

display:block;以块级元素显示；

（1.2）visibility:hidden;隐藏元素；

visibility:visibile;显示元素；

display和visibility的区别在于，使用display属性隐藏元素后，不再占据原先位置；而使用visibility属性隐藏元素后，其原先位置仍被占据。

2.元素内容显示与隐藏

overflow属性会对溢出元素框的内容如何展示进行设置。

（2.1）overflow:visible;不做限制，保持原样显示，为默认值

（2.2）overflow:hidden;超出元素框的内容被隐藏

（2.3）overflow:scroll;添加滚动条，不管是否有内容溢出

（2.4）overflow:auto;当有内容溢出时，添加滚动条

3.元素显示与隐藏的应用

制作遮罩效果。

实现思路：遮罩层默认为隐藏，当鼠标在元素上方时则显示，鼠标不在元素上方时则隐藏。