CSS基础(part15)--元素的隐藏与显示

tech2025-08-30  5

学习笔记,仅供参考,有错必纠

参考自:pink老师学习笔记


文章目录

元素的隐藏与显示display显示visibility可见性overflow溢出显示与隐藏总结


元素的隐藏与显示

display显示

语法:

display: none /*隐藏对象*/ display:block /*除了转换为块级元素之外,同时还有显示元素的意思。*/

display可以设置或检索是否显示对象,display设置元素隐藏之后,将不再保留位置:

实际开发场景:配合js做特效,比如下拉菜单。

visibility可见性

语法:

visibility:visible ;  /*对象可视*/ visibility:hidden;   /*对象隐藏*/

visibility可以设置或检索是否显示对象,display设置元素隐藏之后,继续保留原有位置:

overflow溢出

检索或设置当对象的内容超过其指定高度及宽度时,应该如何管理内容:

属性值描述visible不剪切内容也不添加滚动条hidden不显示超过对象尺寸的内容,超出的部分隐藏掉scroll不管超出内容否,总是显示滚动条auto超出自动显示滚动条,不超出不显示滚动条

实际开发场景:清除浮动;隐藏超出内容,不允许内容超过父盒子。

显示与隐藏总结

属性区别用途display隐藏对象,不保留位置配合后面js做特效,比如下拉菜单,原先没有,鼠标经过,显示下拉菜单, 应用极为广泛visibility隐藏对象,保留位置使用较少overflow只是隐藏超出大小的部分1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围
最新回复(0)