第八章 - 元素的显示与隐藏

我们在浏览网页时，经常会看到有些图片上面带一个小叉号，当我们点击小叉号的时候，图片就会消失，当我们重新刷新网页时，图片还会显示出来，这就用到了元素的显示与隐藏。

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

• display:显示隐藏元素，但是不保留位置
• visibility:显示隐藏元素，但是保留原来的位置
• overflow:溢出显示隐藏，但是只对溢出部分进行处理

下面就对这三个属性进行详细的描述

1. display属性

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

display:none隐藏对象

display: block;除了转换为块级元素外，同时还有显示元素的意思

[注]

display隐藏元素之后，不在占有原来位置

display: none不是删除元素，只是隐藏元素，并且不在占有原来位置

2. visibility可见性

visibility属性用于指定一个元素是应该显示还是隐藏

visibility: visible; 元素可视

visibility: hidden; 元素隐藏

[注]

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

如果隐藏元素想要原来的位置，就用visibility:hidden;如果隐藏元素不想要占用原来的位置，就用display:none

3. overflow 溢出

overflow属性指定了如果内容溢出时(超出其指定宽度或高度),会发生什么现象

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

• 一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局
• 但是如果有定位的盒子，请慎用overflow:hidden，因为他会隐藏多余的部分