To detail the display property in CSS

believe that most of the fighting in front, especially in the front of the siege of the process, there is a deeper and deeper feeling, good, as the front-end deep like the sea, from the sister is a cloud ah, the front-end easy to get started, deep difficult ah! Below I will be in the CSS display properties of my own accumulation, and share with you, the great God do not spray, I just passing by.

The display properties in CSS are briefly explained in the world of http://www.w3school.com.cn/cssref/pr_class_display.asp: Yes, of course I don't think it's detailed enough, and some of them may not have been used in depth.

The display property values are: Block,inline-block;table;inline-table,table-row,table-cell,table-caption;list-item and so on, this is the basic usage, I believe that when you write some pop-up box effect, the most used is to show and hide the popup through the Display:block and none properties.

For example: In jquery, you can:

$ ("#p"). CSS ("display": "Block") to show hidden Doc objects;

1, block and Inline-block properties are actually block-level elements, but Inline-block is a block-level element in the row;

2, Table,table-row,table-cell,table-caption,list-item;

I believe that most of the values of these properties are rarely understood, but these are the corresponding items in the table table and the Li item in the UL tag, where display:table is actually a table form. and Table-row and Table-cell respectively corresponding to the table table in the TR and TD label, List-item is the Li tag, in fact, these properties in the mobile front-end development with a lot of, and corresponding to some of the table tag properties, As in TD Vertical-align with P Display:table-cell can also be implemented, this can help us to solve some of the more avant-garde browser to reduce a lot of unnecessary trouble.

PS: if it is stipulated! DOCTYPE, Internet Explorer 8 (and later) supports the attribute value "Inline-table", "run-in", "table", "Table-caption", "Table-cell", " Table-column "," Table-column-group "," Table-row "," Table-row-group ", and" inherit ".

Also: Today's classmate asked me in the table element to realize the table in a row of the hidden and display, the result he used the above jquery code, the results of the page is messy, and later I used $ ("#p"). CSS ("display": "Table-row"); Achieve the desired effect.

Of course there are some values, the first time so much, the next update, we look at some code and:

Source:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< HTML xmlns= "http://www.w3.org/1999/xhtml" xml:lang= "en" >