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

     
     
     
    好文要顶 关注我 收藏该文 
  • 相关阅读:
    记一次在黑盒环境下使用网络设备(华为)寻找主机
    mips交叉编译zlib
    Python 爬虫 之LOL皮肤图片抓取
    gitlab 新建项目 并将本地项目上传
    flask项目目录结构
    SQLALCHEM 初始化数据库
    python连接access数据库查询
    .Net Core 3.1 -- APISIX2.6 微服务网关入门
    SqlServer Agent代理无法启动(启动后自动关闭)的解决方法
    Centos7安装配置DNS服务器
  • 原文地址:https://www.cnblogs.com/zhaoyingjie/p/6019114.html
Copyright © 2011-2022 走看看