#大有学问#

#头条创作挑战赛#

display属性

display：none | block；

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

<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>

visibility

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>

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>

图片遮罩小案例

实现效果：

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

<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>

拜拜~