H5C3基础学习总结之元素的显示与隐藏

类似于网站广告，点击关闭就不见了，刷新页面会重新出现。

本质：让一个元素在页面中隐藏或者显示出来。

display属性

display属性用于设置一个元素如何显示

代码	作用
display: none;	隐藏对象
display: block;	除了转换为块级元素之外，同时还有显示元素的意思。

注意细节：

display隐藏元素之后，不再占有原来的位置。搭配JS可以做很多的网页特效。

visibility可见性

visibility属性用于指定一个元素应可见还是隐藏

注意细节：

visibility隐藏元素后，继续占有原来的位置。

• 如果想隐藏元素并保留原来位置，就用visibility: hidden;
• 如果隐藏元素不想保留原来的位置，就用display: none;  (用得更多！)

overflow溢出

overflow属性置顶了如果内容已出一个元素的框（超过宽和高），会发生什么。

属性值	描述
visible	不剪切内容，也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管是否超出内容，总是显示滚动条
auto	超出自动显示滚动条，不超出则不限时滚动条

注意细节：

• 一般情况戏，都不会让溢出的内容显示出来，因为溢出的内容会影响布局。
• 如果有定位的盒子，需要慎用overflow:hidden; 因为它会隐藏多余的部分。

---

总结

属性	作用
display	显示或隐藏元素，不保留位置
visibility	显示或隐藏元素，保留原来位置
overflow	只针对于溢出部分内容，显示或隐藏，

---