zoukankan      html  css  js  c++  java
  • display:none和visibility:hidden的区别?

    css控制元素不可见的方法 { display: none; /* 不占据空间,无法点击 */ }

    /********************************************************************************/

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

    /********************************************************************************/

    { position: absolute; top: -999em; /* 不占据空间,无法点击 */ }

    /********************************************************************************/

    { position: relative; top: -999em; /* 占据空间,无法点击 */ }

    /********************************************************************************/

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

    /********************************************************************************/

    { height: 0; overflow: hidden; /* 不占据空间,无法点击 */ }

    /********************************************************************************/

    { opacity: 0; filter:Alpha(opacity=0); /* 占据空间,可以点击 */ }

    /********************************************************************************/

    { position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占据空间,可以点击 */ }

    }

    { zoom: 0.001; -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); transform: scale(0); /* IE6/IE7/IE9不占据空间,IE8/FireFox/Chrome/Opera占据空间。都无法点击 */ }

    /********************************************************************************/

    { position: absolute; zoom: 0.001; -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); transform: scale(0); /* 不占据空间,无法点击 */ }

    最常用的为display:none和visibility:hidden

    dispaly:none 设置该属性后,该元素下的元素都会隐藏,占据的空间消失。

    visibility:hidden 设置该元素后,元素虽然不可见了,但是依然占据空间的位置。

    display:none和visibility:hidden的区别?

    1.visibility具有继承性,其子元素也会继承此属性,若设置visibility:visible,则子元素会显示

    2.visibility不会影响计数器的计算,虽然隐藏掉了,但是计数器依然继续运行着。

    3.在css3的transition中支持visibility属性,但是不支持display,因为transition可以延迟执行,因此配合visibility使用纯css实现hover延时显示效果可以提高用户体验

    4. display:none会引起回流(重排)和重绘 visibility:hidden会引起重绘 

    出  处:https://www.cnblogs.com/miluluyo/p/11110749.html

    本文仅提供参考,是本人闲时所写笔记,如有错误,还请赐教,作者:阿蒙不萌,大家可以随意转载

  • 相关阅读:
    传球接力
    业务办理
    P2077 红绿灯
    【UR #4】元旦激光炮
    P1939 【模板】矩阵加速(数列)
    #82. 【UR #7】水题生成器
    Visible Trees HDU
    创始人的领导力和合伙人选择
    面向对象笔试题练习一
    MicroPython+北斗+GPS+GPRS:TPYBoardv702短信功能使用说明
  • 原文地址:https://www.cnblogs.com/huchong-bk/p/11613186.html
Copyright © 2011-2022 走看看