博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【总结整理】display、visibility、overflow的隐藏问题
阅读量:5817 次
发布时间:2019-06-18

本文共 1079 字,大约阅读时间需要 3 分钟。

http://blog.sina.com.cn/s/blog_85e7c239010151r4.html
 
display:block | none | inline | table
         block: 该元素以快属性显示       none: 隐藏,此元素不会被显示      inline:该元素以行属性显示  
 
     
overflow : visible | auto | hidden | scroll
           visible : 不剪切内容也不添加滚动条    auto : 默认属性    
           hidden : 隐藏超出内容                     scroll : 总是显示滚动条
 
 
display:none;            隐藏,此元素不会被显示。隐藏的部分,不占网页中的任何区域  
overflow:hidden:       隐藏超出内容,但它内容所占据的空间还是存在
 

visibility : inherit | visible | hidden

         inherit :  继承上一个父对象的可见性 
         visible :  对象可视 
        hidden :  对象隐藏
 
 

    关于display:none;与visibility:hidden的区别:

     首先从字面意思上看,两个都是将该区域隐藏为不可见,但两者的不可见是与区别的:
 

     一、display:none;隐藏的部分,不占网页中的任何区域;一般多用于JavaScript中的一些css样式设置。可以理解为使这个对象彻底消失(看不见也摸不到)。”

        二、visibility:hidden;他是把那个层隐藏了,也就是你看不到它的内容但是它内容所占据的空间还是存在的。(看不见但摸得到)。

       再来说一下关于overflow:hidden;与visibility:hidden;的区别

       首先他们的自身含义,overflow:hidden;是让超出的文本隐藏,就是在设置该属性的时候他会根据你设置的宽高把多余的那部分剪切掉,具体怎么用,什么时候该用谁,这个问题我也尝试过很多,但只要你明白了他的自身意思就不用苦恼该用那个属性了。

       overflow:hidden;我们都知道每个浏览器对代码的解析都不同,所以我们在做页面的时候会遇到很多bug,在IE里面如果内容的高度超过了该层的高度他会自动地撑开,但火狐里面的高度是多高这层就只有这么大,内容的高即使超出了也不会影响你设置的高,在这个时候我们有的问题就可以用overflow:hidden;来解决,这是第一点,还有就是我们可以利用它做出很多hover效果。

 

转载于:https://www.cnblogs.com/lianghong/p/8011455.html

你可能感兴趣的文章
Uva 340 - Master-Mind Hints
查看>>
Uva 375 - Inscribed Circles and Isosceles Triangles
查看>>
入队列操作
查看>>
入队列操作
查看>>
eclipse 创建Maven 架构的dynamic web project 问题解决汇总
查看>>
hibernate保存失败
查看>>
Vue-自定义过滤器 通过管道符号|进行调研,支持多重过滤
查看>>
MySQL增量订阅&消费组件Canal POC
查看>>
Sqlite多线程
查看>>
数据结构-时间复杂度
查看>>
对象与字符串相互转换
查看>>
[洛谷0925]NOIP模拟赛 个人公开赛 OI
查看>>
[NOIp2017提高组]小凯的疑惑
查看>>
《C程序设计语言》练习1-5
查看>>
$\frac{dy}{dx}$ 是什么意思?
查看>>
陶哲轩实分析 命题7.18 证明
查看>>
购物车第一次代码
查看>>
Go开发之路(目录)
查看>>
第56件事 排行榜通用算法4步
查看>>
文件管理[Linux]
查看>>