CSS隐藏元素
2020-01-30 本文已影响0人
荒剑离
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是纵向范围,这两个属性经常用在需要隐藏滚动条时。