CSS隐藏元素

display: none

当我们不希望某个元素显示，也不需要该元素占据页面空间时，使用 display:none，是推荐的内容隐藏方式。

<div style="display:none;">我不占地儿，你看不见我；</div>

visibility:hidden

当我们不希望某个元素显示，但是需要该元素依然占据其所在的页面空间时，使用 visibility:hidden，这个隐藏了内容却保留空间的位置会在网页中显示为空白。另外，visibility:visible 则会显示内容。

<div style="visibility:hidden;">我占了地儿，你也看不见我；</div>

overflow:hidden

当我们希望元素的显示有范围，超出范围的部分就自动隐藏时，使用 overflow:hidden，但应注意，使用它时需要给它定义宽度和高度，否则会无效。

<div style="width:120px; height:20px; overflow:hidden;">我占的地儿太多了你就看不见我的尾巴了。。。。。</div>

overflow用法中存在一个分支，overflow-x:hidden 和 overflow-y:hidden，x是横向范围，y是纵向范围，这两个属性经常用在需要隐藏滚动条时。

参考资料

• CSS中如何让元素隐藏？