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

  • 相关阅读:
    asp.net基础开发中常用代码大全
    IPv6網絡開發范例
    [轉]现场:是谁在住救灾帐篷者?
    运送救灾物资路上的感人画面纪实
    DataGridView新特色、常用操作
    [ZT]定制自己的Windows CE 5.0 ARM中文模拟器
    LoadRunner参数化功能详解
    [轉]灾区那么大,王十为什么直奔遵道镇,不去别处?
    [理想?夢想?]ERP项目怎么管
    乞讨老人为地震灾区捐款105元(图)
  • 原文地址:https://www.cnblogs.com/yangjie-space/p/4857654.html
Copyright © 2011-2022 走看看