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); /* 不占据空间,可以点击 */ } 
    /********************************************************************************/

     
     
     
    好文要顶 关注我 收藏该文 
  • 相关阅读:
    [swustoj 243] 又是一年CET46
    [转] 解析Qt资源文件使用
    [转] Qt 多线程学习
    USACO全部测试数据
    [HUD 1195] Open the Lock
    Vue-cli+webpack单页模式详解(转)
    关于vs code终端执行webpack命令报错问题(转)
    git使用相关记录
    关于flex布局兼容
    canvas绘画交叉波浪
  • 原文地址:https://www.cnblogs.com/zhaoyingjie/p/6019114.html
Copyright © 2011-2022 走看看