css中display如何使用(2)-木庄网络博客

2022-02-12 04:18:11 PHP中文网 JavaScript 百度已收录

display：none与visibility：hidden区别

display：none用来隐藏元素，不仅看不见还不占用任何空间大小

visibility: hidden也可以用来隐藏元素，但是虽然看不见仍存在，保留一个空位

例

display:none

.span{
   background-color: aquamarine;
  display:none;}
    </style>
</head>
<body>        
 <p><span class="span">hello</span>world</p>

效果图

Image 12.jpg

hello被隐藏但是并没有留下任何空位

visibility: hidden

<style>
 .span{
  background-color: pink;
   visibility: hidden;}
</style>
</head>
<body>
 <p><span class="span">hello</span>world</p>

效果图

Image 11.jpg

hello被隐藏但仍然空出一个位置

总结：以上就是本文章的全部内容了，希望对大家学习display有一定的帮助

以上就是css中display如何使用的详细内容，更多文章请关注木庄网络博客！

相关阅读 >>

更多相关阅读请进入《Display》频道 >>

书籍

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者