The difference between display:none; and visibility:hidden;

My answer at the time was that both can hide elements, but setting the element to display:none; after that, the document flow space previously occupied by the element will be canceled at the same time, but visibility:hidden; Even if the element is not displayed, it will still occupy space.
It was a telephone interview. After I answered, the other party did not continue to ask about display-related knowledge.
Now that I think about it, I am really lucky. If someone asks me about display-related knowledge, what should I pay attention to when using display:inline-block? I definitely won't be able to fight.

A few days agoExerciseWhen writing Navigation, since it is always necessary to set some inline elements or block-level elements to inline block-level elements, I just Thought of display:inline-block
However, I found that this is a attribute value that still has some knowledge. Recommend this article.

• Inline-block has been supported since IE5.5, but you must know that IE5.5 was officially launched in 2000, but W3C This attribute value was only added to the CSS2.1 draft in 2002.

• Block-level elements in IE 5.5, 6, 7, and 8 (Q) have incomplete support for inline-block. If you want to achieve similar effects, you need to set it to display:inline first. Then use zoom:1 and so on to trigger hasLayout (this is the reason for the bug in IE browser, I will write about it in detail). For inline elements in IE 5.5, 6, 7, and 8 (Q), if you want to achieve the effect of inline-block, you only need to directly set this attribute value or use zoom:1, etc.

• The following are for IE 5.5, 6, 7, 8 (Q) browsers

• Inline element display:inline-block
  You only need to perform display:inline-block, or zoom:1; on the inline element to trigger hasLayout, and then you can set the width and height of the inline element.
  display:inline-block;
  *zoom:1;
  Add * in front of zoom so that this attribute can only be used for IE browsers Identify. There are other ways. Here is a detailed explanation

• Block-level element display:inline-block
  The block-level element triggers hasLayout through display:inline-block, which does not make the block-level element have the feature of not wrapping. . This is also a manifestation of incomplete support. The method to make up for it is:
  display:inline; zoom:1;
  First convert it into an inline element, and then make it have a layout.

• Combined with modern browsers, when we want to convert an element into an inline block-level element, all we need to do is:

   `display:inline-block;`/*兼容现代浏览器，IE6、7 行内元素*/
   `*display:inline;`/*兼容IE6、7块级元素*/

  Copy after login

  *zoom :1;
  [Another problem caused by inline elements] is that there will be a certain amount of blank margin between inline elements. This is why.
  I didn’t understand it when I wrote the last note, but after reading the blog I just recommended, I understand it. The browser renders inline elements as if it is rendering the words in a paragraph, or the word ,
  There is a space between hello and buddy when we write,

         <p>hello buddy</p>

  Copy after login

  is written inline elements, each in-line element will be wrapped habitually

         <span>hello</span>
         <span>buddy</span>

  Copy after login

  Normally, for multiple consecutive whitespace characters (spaces, line feeds, carriage returns, etc.), the browser will Combined into a single whitespace character.

• How to remove white space between inline elements

• Use font-size# on the parent element of the inline element ##:0px;

           font-size:0px;

  Copy after login
  Except for versions before IE6, 7 and safri5, this method can be used to remove the white space of inline elements.

• Perform

  letter-spacing on the parent element of the inline elementThis method can remove the white space between the inline elements in versions prior to safri5.
  The white space between inline elements is related to the font size. The larger the font size, the larger the gap. When the absolute value of the negative value of letter-spacing is greater than the gap size, internal inline elements will overlap.
  

          letter-spacing:-2px;//这个2px等于元素之间的间隙

  Copy after login
• Perform parent elements of inline elements

  white-space

   font-size:0;/* 所有浏览器 */
  letter-spacing:-5px;/* Safari 等不支持字体大小为 0 的浏览器 */
  `*letter-spacing:normal;`
  word-spacing:-1px;/* IE6、7 */

  Copy after login
  The above writing method is basically compatible with various browsers.

  It should be noted that in order to avoid conflicts between letter-spacing and word-spacing in IE6 and 7, letter-spacing needs to be hacked.
  

• 由于这些文本属性都会继承下去，造成行内元素内部的文字内容受到影响，所以需要为行内元素内部重新设置字体属性值。

        font-size: 12px; letter-spacing: normal; word-spacing: normal;

  Copy after login

  刚才推荐的那篇文章，总结了代码如下：
  .dib-wrap修饰行内元素的父级元素，.dib修饰行内元素，另外需要注意由于 inline-block 具有 inline 元素的特性，在垂直方向上很多时候我们并不希望元素以「vertical-align:baseline」方式来呈现，所以在「.dib-wrap」中统一重置为「vertical-align:top」即可

        .dib-wrap {
        font-size:0;/* 所有浏览器 */
        *word-spacing:-1px;/* IE6、7 */
        }
        .dib-wrap .dib{
        font-size: 12px;
        letter-spacing: normal;
        word-spacing: normal;
        vertical-align:top;
        }
        @media screen and (-webkit-min-device-pixel-ratio:0){
        /* firefox 中 letter-spacing 会导致脱离普通流的元素水平位移 */
        .dib-wrap{
        letter-spacing:-5px;/* Safari 等不支持字体大小为 0 的浏览器, N 根据父级字体调节*/
        }
        }
        .dib {
        display: inline-block;
        `*display:inline;`
        `*zoom:1;`
        }

  Copy after login

The above is the detailed content of The difference between display:none; and visibility:hidden;. For more information, please follow other related articles on the PHP Chinese website!