采用CSS实现元素隐藏的方法有很多种，比如定位到屏幕之外、透明度变换等。而常见的两种方式是将元素设置为display:none或者visibility:hidden。
当元素样式设置为display：none时，则该元素和它的子元素都会隐藏，不占据文档流（就是元素原本占据的空间会释放出来）。
给元素样式设置display:none<div class="a">A</div><div class="b">B</div><div class="c">C</div>样式设置为
.a,.b,.c{ width:50px; height:50px; text-align:center; background:blue; margin-top:5px; line-height:50px; color:red;}效果如：
图片
添加display:none后效果如下：
图片
B原本占据的空间会释放出来。
display的其他常见属性值及说明
属性值 | 说明 |
block | 元素转化为块级元素显示 |
inline | 元素转化为行内元素显示 |
inline-block | 自身元素转化为行内元素，相邻的行内元素显示在一行，但其子元素为块级元素显示 |
visibility:hidden也可以将元素隐藏，但是依然显示着元素所占据的空间。如：
给元素样式设置visibility:none<div class="a">A</div><div class="b">B</div><div class="c">C</div>css样式：
.a,.b,.c{ width:50px; height:50px; text-align:center; background:blue; margin-top:5px; line-height:50px; color:red;}.b{ visibility:hidden;}效果如下：
图片
visibility的其他属性值：
属性值 | 说明 |
inherit | 继承父元素的visibility属性设置 |
visible | 默认值 |
本文链接：http://www.28at.com/showinfo-26-34660-0.htmlDisplay和Visibility的区别，你了解了吗？
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号
