The difference between Display:none and Visibility:hidden;

What I was saying was that both can implement the hidden element, but the element is set to Display:none, and then the document flow space occupied before the element is canceled, but Visibility:hidden, so that the element will still occupy space even if it is not displayed.
It was a telephone interview, and after I answered it, the other person did not continue to ask about display-related knowledge.
Now think of it, really lucky, if someone asked me about the display related knowledge, Display:inline-block use need to pay attention to the place. I'm sure I can't make it.

When I practiced writing navigation the other day, I thought that because there was always a need to set some inline elements or block-level elements into inline block-level elements,display:inline-block
However, I have found that this is a property value or a bit of learning. Recommend this article.

• IE5.5 began to support Inline-block, but to know that IE5.5 was officially launched in 2000, but it only began to add this attribute value to the css2.1 draft in 2002 years.

• IE 5.5, 6, 7, 8 (Q) block-level elements of Inline-block support is not complete, if you want to achieve similar effects, you need to set to Display:inline, and then use zoom:1 and other triggers hasLayout (this is the cause of the Internet Explorer bug, I'll write it in more detail). IE 5.5, 6, 7, 8 (Q) in the inline element to achieve the effect of Inline-block just set this property value directly or use zoom:1 and so on.

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

• Inline element Display:inline-block
  You only need to display:inline-block or zoom:1 the inline element, and you can trigger the haslayout, and then you can set the width height of the element in the row.
  Display:inline-block;
  * zoom:1;
  Add * in front of zoom to make this property only recognized for IE browser. There are other ways. Here, the

• Block-level element Display:inline-block
  Block-level elements trigger haslayout through Display:inline-block, and do not allow the block-level element to have a non-newline feature. This is the embodiment of support incomplete, remedy method:
  display:inline; Zoom:1; The
  is first converted to inline elements and then has the layout.

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

  ' Display:inline-block; '/* Compatible with modern browsers, IE6, 7 inline elements */' *display:inline; '/* Compatible with IE6, 7 block level elements */

  *zoom:1;
  "Another problem raised by inline elements" is that there is a certain amount of padding between inline elements, which is why.
  I did not understand when I wrote a note, but I did see the blog I had just recommended. The browser renders the inline element as if it were rendering a word in a paragraph, or a word ,
  We're writing a space between Hello and Buddy,

         <p>hello buddy</p>

  When you write inline elements, each element in the line is habitually wrapped.

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

  Typically, for multiple contiguous whitespace characters (spaces, newline characters, carriage returns, and so on), the browser merges them into a single whitespace character.

• How to remove whitespace gaps between elements in a row

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

   font-size:0px; 

  The

  Remove IE6, 7, and SAFRI5 versions use this method to remove whitespace gaps in the elements in the row.

• Letter-spacing The parent element of an in-row element
  This method removes the white space gap between the elements in the line before the SAFRI5 version. The white space between the elements in the
  line is related to the font size, the larger the size, the greater the gap, and the inner inline elements overlap when the absolute value of the letter-spacing negative is greater than the void size.

   letter-spacing:-2px;//this 2px equals the gap between elements 

• White-space the parent element of the inline element

   font-size:0;/* all browsers */letter-spacing:-5px;/* Browsers such as Safari, which do not support font size 0 */' *letter-spacing:normal; ' word-spacing:-1px;/* IE6, 7 */

  are basically compatible with each browser.
  It is important to note that in IE6, 7, in order to avoid conflicts between letter-spacing and word-spacing, you need to hack out letter-spacing.

• Because these text properties inherit, causing the text content inside the inline elements to be affected, you need to reset the Font property values inside the inline elements.

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

  The article that I just recommended, summarizes the code as follows:
  . Dib-wrap modifies the parent element of the inline element, the. dib modifies the inline element, and it is important to note that because Inline-block has the properties of the inline element, many times in the vertical direction we do not want the element to "vertical-align:baseline" way to render, so a unified reset to "vertical-align:top" in the ".dib-wrap" can be

   Dib-wrap {font-size:0;/* all browsers */*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 will cause the element to move out of the normal stream horizontally */. DIB -wrap{letter-spacing:-5px;/* Safari is not supported for browsers with a font size of 0, and N is adjusted by the parent font */}}. dib {DISPLAY:INLINE-BL      Ock; ' *display:inline; ' *zoom:1; '}