美文网首页
CSS隐藏元素

CSS隐藏元素

作者: 荒剑离 | 来源:发表于2020-01-30 12:13 被阅读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:hiddenoverflow-y:hidden,x是横向范围,y是纵向范围,这两个属性经常用在需要隐藏滚动条时。

    参考资料

    相关文章

      网友评论

          本文标题:CSS隐藏元素

          本文链接:https://www.haomeiwen.com/subject/uajithtx.html