CSS元素显示与隐藏
About 2 min
目的:让一个元素在页面中消失或者显示出来
场景:类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现
1. display显示
display 属性用于设置一个元素应如何显示
display: none; /* 隐藏对象 */
display:block;/* 除了转换为块级元素之外,同时还有显示元素的意思 */
特点: display 隐藏元素后,不再占有原来的位置
2. visibility可见性
visibility 属性用于指定一个元素应可见还是隐藏
visibility:visible; /* 元素可视 */
visibility:hidden; /* 元素隐藏 */
特点:visibility 隐藏元素后,继续占有原来的位置
如果隐藏元素想要原来位置,就用 visibility:hidden;
如果隐藏元素不想要原来位置,就用 display:none;
3. overflow溢出
overflow 属性指定了如果内容溢出一个元素的框(超过其指定高度及宽度) 时,会发生什么
属性值 | 描述 |
---|---|
visible | 不剪切内容也不添加滚动条 |
hidden | 不显示超过对象尺寸的内容,超出的部分隐藏掉 |
scroll | 不管超出内容否,总是显示滚动条 |
auto | 超出自动显示滚动条,不超出不显示滚动条 |
一般情况下,我们都不想让溢出的内容显示出来,因为溢出的部分会影响布局
但是如果有定位的盒子,请慎用 overflow:hidden
因为它会隐藏多余的部分
用途
- 清除浮动
- 保证盒子里面的内容不会超出该盒子范围
4. 显示与隐藏总结
属性 | 区别 | 用途 |
---|---|---|
display 显示 | 隐藏对象,不保留位置 | 配合后面 js 做特效,比如下拉菜单,原先没有,鼠标经过,显示下拉菜单,应用极为广泛 |
visibility 可见性 | 隐藏对象,保留位置 | 使用较少 |
overflow 溢出 | 只是隐藏超出大小的部分 | 1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围 |