zoukankan      html  css  js  c++  java
  • display:none,overflow:hidden,visibility:hidden之间的区别

    一,display:none;

    隐藏元素,不占网页中的任何空间,让这个元素彻底消失(看不见也摸不着)

    二,overflow:hidden;

    让超出的元素隐藏,就是在设置该属性的时候他会根据你设置的宽高把多余的那部分剪掉

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

    三,visibility:hidden;

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


    { display: none; /* 不占据空间,无法点击 */ } 
    /********************************************************************************/

    { visibility: hidden; /* 占据空间,无法点击 */ } 
    /********************************************************************************/

    { height: 0; overflow: hidden; /* 不占据空间,无法点击 */ } 
    /********************************************************************************/
    { position: absolute; top: -999em; /* 不占据空间,无法点击 */ } 
    /********************************************************************************/
    { position: relative; top: -999em; /* 占据空间,无法点击 */ } 
    /********************************************************************************/
    { position: absolute; visibility: hidden; /* 不占据空间,无法点击 */ } 
    /********************************************************************************/
    { opacity: 0; filter:Alpha(opacity=0); /* 占据空间,可以点击 */ } 
    /********************************************************************************/
    { position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占据空间,可以点击 */ } 
    /********************************************************************************/

  • 相关阅读:
    cmake使用总结
    Fatal error RC1015: cannot open include file "xxxx.h" vs2008
    可重入函数(转)
    《左耳听风》-ARTS-打卡记录-第十二周
    异常声明
    QString与const char *相互转换
    Qt中使用子线程去关闭弹出框
    什么是反向代理
    【GOJ 3002】颜色
    【GOJ 2296】毛毛虫
  • 原文地址:https://www.cnblogs.com/yangjie-space/p/4857654.html
Copyright © 2011-2022 走看看