江苏龙网

  1. 主页 > 生活百科 > >

Display和Visibility的区别，你了解了吗？

display

采用css实现元素隐藏的方法有很多种，比如定位到屏幕之外、透明度变换等 。而常见的两种方式是将元素设置为display:none或者visibility:hidden 。
元素样式设置为display:none当元素样式设置为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和Visibility的区别，你了解了吗？

文章插图
添加display:none后效果如下：
Display和Visibility的区别，你了解了吗？

文章插图
B原本占据的空间会释放出来 。
display的其他常见属性值及说明
属性值
说明
block
元素转化为块级元素显示
inline
元素转化为行内元素显示
inline-block
自身元素转化为行内元素 ， 相邻的行内元素显示在一行，但其子元素为块级元素显示
元素样式设置为：visibility:hiddenvisibility:hidden也可以将元素隐藏 ， 但是依然显示着元素所占据的空间 。如：
给元素样式设置visibility:none<div class="a">A</div><div class="b">B</div><div class="c">C</div>css样式：
【Display和Visibility的区别，你了解了吗？】.a,.b,.c{width:50px;height:50px;text-align:center;background:blue;margin-top:5px;line-height:50px;color:red;}.b{visibility:hidden;}效果如下：
Display和Visibility的区别，你了解了吗？

文章插图
visibility的其他属性值：
属性值
说明
inherit
继承父元素的visibility属性设置
visible
默认值
 




    推荐阅读


    上一篇：YashanDB数据库主备高可用架构实践

    下一篇：Kubernetes：裸机vs虚拟机性能对比