Analysis on the display property of CSS

This article mainly and everyone analysis of CSS display properties, the need for friends can refer to, hope to help everyone. Let's take a look at the small series below.

What are the more commonly used values for display?

The values that are more easily used in common project development are:

None (the element will not be displayed);
Block (elements will be displayed as block-level elements with newline characters before and after the elements);
Inline (the element will be displayed as an inline element with no newline character before or after the element);
Inline-block (inline block element. CSS2.1 new value);
Table (elements are displayed as block-level tables, similar to <table> with line breaks before and after the table);
Table-row (elements are displayed as a table row, similar to <tr>);

Table-cell (elements are displayed as a table cell, similar to <td> and <th>).

What's the difference between display= "none" and visibility= "hidden"?

At a glance, they are all elements of the hidden meaning; Yes, they are indeed elements hidden! But they still make a difference!

visibility= "hidden" means (only) hidden and unrecoverable. When visibility is set to "hidden", the element is hidden and still occupies its original position. Visibility retains the position of the element. After the element is hidden, it can no longer receive other events, and can no longer receive the response to the event, so it can not be displayed by JS.

Display= "None" hidden (element disappears), recoverable. When display is set to "none", in addition to element concealment, it is the opposite of visibility= "hidden".

The setting of the property values of display and visibility, as well as the difference between reflow and redraw! To find out more about Reflow and repainting, click here:page reflow and page redraw

What is the difference between JQuery and Dispaly:none in Zepto?

The difference between jquery and Zepto in Dispaly:none! Presumably the majority of beginners still don't understand it! Want to know the difference between jquery and zepto in Dispaly:none, Hey, then click: "jquery and Zepto dispaly:none difference"

Related recommendations:

Display Properties Daquan

Displays the display element Common Properties collation

CSS Display Properties