【总结整理】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效果。