前端基础- CSS样式-元素的显示与隐藏

---

前言

本文介绍元素的显示与隐藏的相关功能，主要包括三块内容：

1. display显示隐藏
2. visibility显示隐藏
3. overflow溢出显示隐藏

---

一、display显示隐藏

• display: none; 隐藏元素
• display: block; 除转化为块级元素之外，还有显示元素的意思

display隐藏元素后，不再占有原来的位置

二、visibility显示隐藏

• visibility：visible；元素可见
• visibility: hidden; 元素隐藏
  visibility隐藏元素后，继续占有原来的位置；

三、overflow显示隐藏

• overflow：visibility；
• overflow：hidden；
• overflow：scroll；溢出的地方显示滚动条；不溢出也会显示滚动条；
• overflow：auto；需要的时候添加滚动条；不溢出不显示滚动条；
  overflow溢出显示隐藏，但只是对于溢出的部分处理
  如果有定位的盒子，请慎用overflow：hidden 因为它会隐藏多余的部分；

---

总结

总结内容如下：

方法	特点
display	隐藏元素后，不再占有原来的位置
visibility	隐藏元素后，继续占有原来的位置
overflow	溢出部分显示隐藏