zoukankan      html  css  js  c++  java
  • 【总结整理】display、visibility、overflow的隐藏问题

    display、visibility、overflow的隐藏问题


    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效果。

     
  • 相关阅读:
    javascript 事件冒泡的补充
    不存在的数组元素
    Android应用程序线程消息循环模型分析
    Android系统匿名共享内存(Anonymous Shared Memory)C++调用接口分析
    Linux下的压缩解压缩命令详解
    Android应用程序组件Content Provider简要介绍和学习计划
    Android应用程序组件Content Provider应用实例
    三层架构之初识庐山真面目
    Android系统的智能指针(轻量级指针、强指针和弱指针)的实现原理分析
    Android应用程序消息处理机制(Looper、Handler)分析
  • 原文地址:https://www.cnblogs.com/lianghong/p/8011455.html
Copyright © 2011-2022 走看看