1、display:none与visibility:visible以及opacity: 0的异同
相同点:均可对标签进行隐藏,可用于实现元素的切换或事件的出现隐藏
不同点:设置display:none的元素将不会再占用页面空间,其占用的空间会被其他元素所占有,从而引起浏览器的重排和重汇。而visibility:hidden虽然隐藏内容,但依旧会占用页面空间,不会引起页面重排和重汇。opacity:0则是通过改变元素的透明度,将元素设置为完全透明而达到元素的隐藏效果,也依旧会占用页面空间,不会引起页面重排和重汇。所以如果不希望页面发生重排重汇则通常选用display:none,若选用visibility:hidden和opacity:0则常与position: ;配合使用
2、元素的显示与隐藏案例-------html+css实现点击切换元素
①HTML代码
<div id="box">
<a href="#a" id="a">
<p class="back">我是P1的内容</p>
</a>
<a href="#b" id="b">
<p>我是P2的内容</p>
</a>
</div>
②css代码
body,div,a{
margin: 0px;
padding: 0px;
text-decoration: none;
}
.back{
width: 100px;
height: 100px;
background-color: rgb(163, 163, 248);
}
#box a{
display:none;
/* visibility: hidden; */
/* opacity: 0; */
}
#box a:first-of-type{
display: inline;
/* visibility:visible; */
/* opacity: 1; */
}
#box a:target {
display: none;
/* visibility: hidden; */
/* opacity: 0; */
}
#box a:target+a {
display:inline;
/* visibility:visible; */
/* opacity: 1; */
}
③页面效果