在CSS中想要控制标签元素的显示与隐藏可以通过display,Visibility属性来实现。
使用display属性来隐藏元素只需要设置其值为none即可,并且隐藏之后标签元素所占的空间也会被收回,就是说隐藏之后的标签元素不占用任何空间的。如果想要设置其显示只需要把display属性的值设置成block即可,并且会占用本该占用的空间。
h1.hidden {display:none;}
使用visibility属性来隐藏标签元素需要把值设置成hidden,与display不同的是,通过visibility隐藏的元素会占用隐藏前的空间,例如:
<style> .d1{ visibility: hidden; } </style> <div>这里是不隐藏的第一行</div> <div class="">这里是不隐藏的第二行</div> <div>这里是不隐藏的第三行</div> <hr> <div>这里是不隐藏的第一行</div> <div class="d1">这里是不隐藏的第二行</div> <div>这里是不隐藏的第三行</div>
上面实例输出的是一样的代码,只是下面的第二行通过visibility隐藏了,但是和上面没有隐藏的一样效果,占据了空间。
大家都知道,在CSS中存在块元素以及内联元素之分,所谓块元素就是会占用一行全部宽度,在前后都是换行符,如:
与块元素不同的是,内联元素只需要一定的宽度,不强制换行,可以几个内联元素存在同一行的情况,如:
那么问题来了,这里讨论这个干啥呢?
其实display可以改变块元素以及内联元素的该属性,也就是说display可以把内联元素设置成块元素,把块元素设置成内联元素。
1、把内联元素设置成块元素
span {display:block;}2、把块元素设置成内联元素
div {display:inline;}
学习不止眼前的教程与笔记还需实践与创新——小伙伴们块动手试试吧~
jQuery2021-01-08
jQuery2021-01-07
MySQL2020-12-13
电脑2020-12-12
服务器2020-12-06
电脑2020-10-06