元素的隐藏与显示

元素的显示与隐藏

---

在网页中经常能看到我们把鼠标移到某个元素上时，出现了一个 新的方块，或者在我们打开网页时，页面上有一些广告，当我们点击后就消失了。实际上这些元素都是在结构中存在的，只是被隐藏了。 实现元素的隐藏有多个方法：

• display
• visibility
• overflow

---

• display

在前面我们都是使用这个对元素进行转换，这个也可以让元素进行隐藏。
当我们需要一个元素隐藏时只需要在样式中写上display: none;即可。无模式就是不显示，当我们需要他显示时只需要将需要的的模式写上就行。如：display: block;。

---

• visibility(可见性)

  • visible (可见的)
  • hidden (隐藏的)
  • inherit (继承父级元素的可见性)

---

• overflow (溢出的)

  • visible (不剪切也不添加滚动条)
  • hidden (切除超出的溢出部分)
  • scroll (不管是否超出都显示滚动条)
  • auto (超出时显示滚动条，不超出时不显示)

在实际使用中可以考虑哪个更加合适来选择使用。

---

拓展

• 鼠标样式（cursor）

在网页中鼠标样式会依旧所处位置的不同而发生改变，这可以提高用户使用的舒适度。

属性	样式
pionter	手
move	移动
text	文本
not-allowed	禁止

示例：cursor: pionter;

---

• 轮廓线（outline）

这个一般在表单中使用，在我们对一个文本输出框进行点击输入时，会发现，文本输入框出现了一个蓝色的边框，这就是轮廓线，这个并不美观。经常是被去除的，当我们想要去除时，在所需处样式中写上outline: none;即可。

---

• 文本域拖拽禁止（resize）

文本域（textarea）是可以在网页中进行大小调节的，但是一般是禁止的，因为，随意调节文本域大小会让布局出现问题，我们写上resize: none;就可以防止文本域被随意拖拽改变大小。