初识CSS——元素的显示和隐藏

初识CSS——元素的显示和隐藏#大有学问##头条创作挑战赛#display属性display:none | block;display:none; 表示隐藏元素,且不再占有

欢迎大家来到IT世界,在知识的湖畔探索吧!

#大有学问#

#头条创作挑战赛#

display属性

display:none | block;

欢迎大家来到IT世界,在知识的湖畔探索吧!

display:none; 表示隐藏元素,且不再占有元素原来的位置。

欢迎大家来到IT世界,在知识的湖畔探索吧!<style> 
div {
  width: 200px;
  height: 200px;
  background-color: antiquewhite;
}
.disN {
  display: none;
}
.disB {
  display: block;
}
</style>
<div class="disN">隐藏元素1</div>
<div>隐藏元素2</div>
<div class="disB">隐藏元素3</div>
初识CSS——元素的显示和隐藏

display代码运行图

visibility

欢迎大家来到IT世界,在知识的湖畔探索吧!visibility:hidden | visible;

visibility:hidden; 元素隐藏且继续占有元素原来的位置。

visibility:visible; 元素可视。

<style>
div {
  width: 200px;
  height: 200px;
  background-color: aquamarine;
}
.boxVh {
  visibility: hidden;
}
.boxVv {
  visibility: visible;
}
</style>
<div class="boxVh">隐藏元素1</div>
<div class="boxVv">隐藏元素2</div>
<div>隐藏元素3</div>
初识CSS——元素的显示和隐藏

visibility代码运行图

overflow

overflow:hidden; 溢出隐藏。当内容超出元素的边框,将其超出的部分隐藏。

overflow:scroll; 溢出部分显示滚动条。

overflow:auto; 当溢出时显示滚动条,没有溢出则不显示。

overflow: visibility; 对溢出部分正常显示,不剪切内容,也不显示滚动条。

<style>
div {
  width: 200px;
  height: 200px;
  border: 1px solid black;
}
.overflowH {
  overflow: hidden;
}
.overflowS {
  overflow: scroll;
}
.overflowA{
  overflow: auto;
}
</style>
<div>
  overflow:hidden;  溢出隐藏。当内容超出元素的边框,将其超出的部分隐藏。
  overflow:hidden;  溢出隐藏。当内容超出元素的边框,将其超出的部分隐藏。
  overflow:hidden;  溢出隐藏。当内容超出元素的边框,将其超出的部分隐藏。
  overflow:hidden;  溢出隐藏。当内容超出元素的边框,将其超出的部分隐藏。
</div>
<br>
<br>
<br>
<div class="overflowH">
  overflow:hidden;  溢出隐藏。当内容超出元素的边框,将其超出的部分隐藏。
  overflow:hidden;  溢出隐藏。当内容超出元素的边框,将其超出的部分隐藏。
  overflow:hidden;  溢出隐藏。当内容超出元素的边框,将其超出的部分隐藏。
  overflow:hidden;  溢出隐藏。当内容超出元素的边框,将其超出的部分隐藏。
</div>
<br>
<div class="overflowS">
  overflow:scroll;  溢出部分显示滚动条。
  overflow:scroll;  溢出部分显示滚动条。
  overflow:scroll;  溢出部分显示滚动条。
  overflow:scroll;  溢出部分显示滚动条。
  overflow:scroll;  溢出部分显示滚动条。
  overflow:scroll;  溢出部分显示滚动条。
  overflow:scroll;  溢出部分显示滚动条。
  overflow:scroll;  溢出部分显示滚动条。
</div>
<div class="overflowA">
  overflow:auto; 有溢出部分就显示滚动条,没有溢出就不显示滚动条。
  overflow:auto; 有溢出部分就显示滚动条,没有溢出就不显示滚动条。
</div>
<div class="overflowA">
  overflow:auto; 有溢出部分就显示滚动条,没有溢出就不显示滚动条。
  overflow:auto; 有溢出部分就显示滚动条,没有溢出就不显示滚动条。
  overflow:auto; 有溢出部分就显示滚动条,没有溢出就不显示滚动条。
  overflow:auto; 有溢出部分就显示滚动条,没有溢出就不显示滚动条。
</div>
初识CSS——元素的显示和隐藏

overflow代码运行图

图片遮罩小案例

实现效果:

当鼠标悬停在目标元素上,有半透明遮罩显示在图片上,鼠标移开后,图片没有遮罩效果。

<style>
* {
  margin: 0;
  padding: 0;  
}
.boxF {
  position: relative;
  width: 430px;
  height: 240px;
  margin: 30px auto;
}
img {
  width: 100%;
  height: 100%;
}
.zZ {       
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 0;
  left: 0;
  /* 将元素属性设置为隐藏状态 不显示*/
  display: none;
}
/* 当鼠标经过boxF时,zZ的遮罩显示出来 */
.boxF:hover .zZ{
  /* 在这里该属性代表显示元素 */
  display: block;
}
<div class="boxF">
  <div class="zZ"></div>
  <img src="../images/dis1.png" alt="">
</div>
初识CSS——元素的显示和隐藏

没有鼠标悬停的图片效果

初识CSS——元素的显示和隐藏

鼠标悬停状态下的图片遮罩效果

拜拜~

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/34381.html

(0)

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

联系我们YX

mu99908888

在线咨询: 微信交谈

邮件:itzsgw@126.com

工作时间:时刻准备着!

关注微信