• What is the difference between visibility:hidden and display:none?


    What is the difference between visibility:hidden and display:none?

    答案1

    display:none means that the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags.

    visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page. The tag is rendered, it just isn't seen on the page.

    For example:

    test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test

    Replacing [style-tag-value] with display:none results in:

    test |   | test

    Replacing [style-tag-value] with visibility:hidden results in:

    test |                        | test

    Notes:

    It's important to keep css-transitions into mind when talking about visibility vs. display. For example, toggling from visibility: hidden; to visibility: visible; allows for css-transitions to be used, whereas toggling from display: none; to display: block; does not. visibility: hidden has the additional benefit of not capturing javascript events, whereas opacity: 0; captures events.

    答案2

    They are not synonyms同义词.

    display:none removes the element from the normal flow of the page, allowing other elements to fill in.

    visibility:hidden leaves the element in the normal flow of the page such that is still occupies space.

    Imagine you are in line for a ride at an amusement park and someone in the line gets so rowdy that security plucks them from the line. Everyone in line will then move forward one position to fill the now empty slot. This is like display:none.

    Contrast this with the similar situation, but that someone in front of you puts on an invisibility cloak. While viewing the line, it will look like there is an empty space, but people can't really fill that empty looking space because someone is still there. This is like visibility:hidden.

  • 相关阅读:
    cocos2dx 3.0 飞机大战
    cocos2dx 3.0 触摸机制
    cocos2d-x 3.0 rc0 + flappybird 学习心得
    cocos2dx 3.0 +VS2012 环境搭建
    cocos2dx 内存管理(3)---CCPoolManager浅析
    cocos2dx 内存管理机制(2)
    Cocos2dx 入门小游戏实例
    myBaits入门
    Java8:函数式编程、Stream
    Java基础巩固
  • 原文地址:https://www.cnblogs.com/chucklu/p/10683800.html
Copyright © 2020-2023  润新知