元素的显示和隐藏(display、visibility、overflow)-爱代码爱编程
类似网页广告,当点击关闭就不见了,但重新刷新页面,就会重新出现。
本质:让元素在页面中显示或者隐藏。
一、display 显示
display属性用于设置一个元素如何显示。
- display: none; 隐藏对象
- display: block; 转换为块级元素;显示元素
display隐藏元素后,不再占有原来的位置。
二、visibility 可见性
visibility属性用于指定一个元素可见还是隐藏。
- visibility: visible; 元素可视
- visibility: hidden; 元素隐藏
display隐藏元素后,继续占有原来的位置。
三、overflow 溢出
overflow属性用于指定内容溢出元素框的效果
属性值 | 描述 |
visible | 不剪切内容也不添加滚动条 |
hidden | 不显示超过对象尺寸的内容,超出的部分隐藏掉 |
srcoll | 不管超出内容否,总是显示滚动条 |
auto | 超出自动显示滚动条,不超出不显示滚动条 |
一般情况下,我们都不想让溢出的内容显示出来,因为溢出的部分会影响布局。
但是如果有定位的盒子,慎用overflow: hidden 因为它会隐藏多余的部分。
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接: https://blog.csdn.net/qq_43623147/article/details/111088922