我们在浏览网页时,经常会看到有些图片上面带一个小叉号,当我们点击小叉号的时候,图片就会消失,当我们重新刷新网页时,图片还会显示出来,这就用到了元素的显示与隐藏。
本质:让一个元素在页面中隐藏或显示出来。
- 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,因为他会隐藏多余的部分