• 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会引起重绘 拓展明日每日一题:什么是回流(重排 reflow)?什么是重绘(repaint)?有什么区别?

    拓展明日每日一题:什么是回流(重排 reflow)?什么是重绘(repaint)?有什么区别?

  • 相关阅读:
    curl 带 body
    import com.sun.org.apache.xml.internal.security.utils.Base64问题
    动静分离业务解决网页请求不被串改
    java 主动信任证书
    IO 多路复用详解
    spanish-1.1
    spring data JPA entityManager查询 并将查询到的值转为实体对象
    微信二维码支付报错
    军训入营学生发言稿
    电位器控制两个 LED 灯交替闪烁
  • 原文地址:https://www.cnblogs.com/miluluyo/p/11110749.html
Copyright © 2020-2023  润新知