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

采用CSS实现元素隐藏的方法有很多种，比如定位到屏幕之外、透明度变换等。而常见的两种方式是将元素设置为display:none或者visibility:hidden。

元素样式设置为display:none

当元素样式设置为display：none时，则该元素和它的子元素都会隐藏，不占据文档流（就是元素原本占据的空间会释放出来）。

给元素样式设置display:none
A
B
C

样式设置为

.a,.b,.c{
  width:50px;
  height:50px;
  text-align:center;
  background:blue;
  margin-top:5px;
  line-height:50px;
  color:red;
}

效果如：

图片

添加display:none后效果如下：

图片

B原本占据的空间会释放出来。

display的其他常见属性值及说明

元素样式设置为：visibility:hidden

visibility:hidden也可以将元素隐藏，但是依然显示着元素所占据的空间。如：

给元素样式设置visibility:none
A
B
C

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的其他属性值：

分享名称：Display和Visibility的区别，你了解了吗？
分享URL：http://www.shufengxianlan.com/qtweb/news2/357302.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联