CSS-元素的显示与隐藏_css 元素隐藏
目录
使用场景
display属性
visibility 可见性
overflow 溢出
博主个人兴趣
使用场景
案例 网站广告 当我们点击关闭就不见了 重新刷新页面 广告又会出现
本质:让一个元素在页面中隐藏或者显示出来
display属性
display设置一个元素应如何显示
- display:none; 隐藏对象
- display:block; 1.转换为块级元素 2.显示元素
display隐藏元素后,不再占有原来的位置
实践
visibility 可见性
- visibility:vsible; 元素可视
- visibility:hidden; 元素隐藏
visibility隐藏元素后,继续占有原来的位置
实践
overflow 溢出
overflow属性指定了如果内容溢出一个元素的框(所规定的高度及宽度)时,会发生什么.
属性 | 描述 |
visible | 不剪切内容也不添加滚动条 |
hidden | 不能显示超过对象尺寸的内容,超出的部分隐藏掉 |
scroll | 不管超出内容与否,总显示滚动条 |
auto | 超出自动显示滚动条,不超出的就不显示滚动条 |
一般情况下,我们都不想让溢出的内容显示出来,溢出部分会影响布局.
如果盒子有定位,慎用overflow:hidden; 因为它会隐藏多余的部分.
案例:如果父级元素不设置宽高，实际宽高则由内容撑开。倘若子元素设置绝对定位，则子元素脱离文档流，那么父元素高度为0。如果父元素再设置定位，并且设置overflow: hidden。则此时子元素会消失（看不见啦）
实践