css隐藏元素之display和visibility属性的用法笔记

原创 PHP笔记  2017-03-25 18:37  阅读 2,163 views 次

display属性是用来设置html元素应该如何显示,visibility属性是用来设置html元素是显示还是隐藏。

display和visibility属性隐藏元素

隐藏html元素可以用display和visibility属性来实现,我们只要把display属性的属性值设置为"none",或者是把visibility属性的属性值设置为"hidden"即可达到隐藏元素的效果,但要注意的是,它们隐藏的效果不一样。

实例:

......
<body>
<style type="text/css">
#a span{color:red;}
#b span{visibility:hidden;}
#c span{display:none;}
</style>
<p id="a">下边隐藏的元素:<span>隐藏的span元素</span>|||</p>
<p id="b">display属性隐藏的元素:<span>隐藏的span元素</span>|||</p>
<p id="c">visibility属性隐藏的元素:<span>隐藏的span元素</span>|||</p>
</body>
.......

运行结果:

说明:根据上边实例可知:display属性隐藏的元素不会占据任何空间,而visibility属性隐藏的元素会占据原有空间。

display块和内联元素

display属性还可以用来改变元素的显示(块元素和内联元素的互转)。

  • display:inline;:转换为内联元素(行内元素)
  • display:block;:转换为块元素

实例:

......
<body>
<style type="text/css">
div,span{border:1px solid red;}
#a{display:inline;}
 #b{display:inline;}
 #c{display:block;}
 #d{display:block;}
</style>
<div>我是块元素</div>
<div>我是块元素</div>
<span>我是内联元素</span>
<span>我是内联元素</span>

<h1>元素转换之后</h1>
<div id="a">我被转换为内联元素</div>
<div id="b">我被转换为内联元素</div>
<span id="c">我被转换为块元素</span>
<span id="d">我被转换为块元素</span>
</body
......

运行结果:

说明:块元素会占满整行,另一个元素会从下一行开始。内联元素紧围绕着元素内容,占据的空间取决于元素内容,另一个内联元素会紧跟跟着开始。

本文地址:https://www.ggbiji.com/css-display-visibility.html
版权声明:本文为 PHP笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情