CSS系列之元素的显示与隐藏

目录

• 1、元素显示和隐藏的出现的目的
• 2、使用场景
• 3、display 显示
• 4、visibility 可见性
• 5、overflow 溢出
• 后记

1、元素显示和隐藏的出现的目的

让一个元素在页面中消失或者显示出来。

2、使用场景

类似广告网站，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现。

3、display 显示

display 设置或检索对象是否及如何显示。

display: none 隐藏对象
display: block 除了转换为块级元素之外，同时还有显示元素的意思。

特点： 隐藏之后，不再保留位置。

实际开发场景：

配合js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单，应用极为广泛

4、visibility 可见性

设置或检索是否显示对象。

visibility: visible; 对象可视
visibility: hidden; 对象隐藏

特点： 隐藏之后，继续保留原有位置。（停职留薪）

除了上面介绍的两个属性值外，visibility还有另外一个属性值collapse

• 用于 <table> 行、列、列组和行组，隐藏表格的行或列，并且不占用任何空间（与将 display: none 用于表格的行/列上的效果相当）。但是，仍会计算其他行和列的大小，就好像折叠的行或列中的单元格一样。此值允许从表中快速删除行或列，而不强制重新计算整个表的宽度和高度。
• 折叠的弹性项目被隐藏，他们将占用的空间被删除。
• 对于 XUL 元素，元素的计算大小始终为零，而且通常会忽略影响大小的其他样式，尽管边距仍然有效。
• 对于其他元素，折叠处理与隐藏相同。

注意：

• 有些现代浏览器对 visibility: collapse 不支持或是不完全支持。很多时候用在不是表格行与列的元素上时不会正确的将它显示成 visibility: hidden 的效果。
• visibility:collapse 会改变表格的布局，嵌套在其被折叠的单元格中的表格也会同样被折叠，除非专门为此嵌套表格指定 visibility: visible。

5、overflow 溢出

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

实际开发场景：

1. 清除浮动
2. 隐藏超出内容，隐藏掉，不允许内容超过父盒子。

关于overflow详情，请查看这篇文章
CSS系列之详解overflow

后记

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\~~~
谢谢各位读者们啦(^_^)∠※！！！