CSS基础之元素的隐藏与显示
文章目录
- 前言
- 1.display显示隐藏
- 2.visibility显示隐藏
- 3.overflow溢出显示隐藏
- 4.display与visibility的区别
前言
类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现，这时候我们就需要用到元素的隐藏和显示
1.display显示隐藏
display属性用于设置一个元素应如何显示
<style> div { display: block; /* 同时具有转换为块级元素和显示元素的作用 */ display: none; /* 具有隐藏对象的作用 */ }</style>2.visibility显示隐藏
visibility属性用于指定一个元素应可见还是隐藏
<style> div { visibility: visible; /* 元素可以被看见 */ visibility: hidden; /* 元素不可见 */ }</style>注意点：
visibility隐藏元素后，继续占有原来的位置
3.overflow溢出显示隐藏
overflow 有四个属性能指定内容溢出后会发生的不同的变化
| 属性值 | 描述 |
|---|---|
| visible | 不剪切内容也不添加滚动条 |
| hidden | 不显示超过对象尺寸的内容，超出的部分隐藏掉 |
| scroll | 不管超出内容否，总是显示滚动条 |
| auto | 超出自动显示滚动条，不超出不显示滚动条 |
4.display与visibility的区别
- 设置了
visibility：hidden的元素，占有原来的位置
<style> div { width: 200px; height: 200px; } .first { visibility: none; /* display: none; */ background-color: lightblue; } .second { background-color: lightgreen; } </style></head><body> <div class="first"></div> <div class="second"></div></body>效果图~
- 设置了
display：none的元素，不再占有原来的位置
