Css--display (Block none inline, etc.) property usage

In the general CSS layout, we often use the display corresponding to the value of block, none, inline three values. Let's come to know each other and learn when to use the values. Here, we will learn and understand the DIV CSS displayby using CSS display knowledge plus examples and diagrams to illustrate the way.

Directory

1. CSS Display uses
2. What is the value of display
3. CSS Display block displays
4. CSS Display none hidden
5. CSS Display inline

First, the CSS display uses-TOP

The following is a div CSS using dispaly, indicating here dispaly value arbitrary

CSS code:
. Divcss5{display:none}

HTML corresponding to the use:
<div class= "DIVCSS5" > I am Testing content </div>
According to the above can be self-div+css, see the use of results

Common display
1, Div{display:block} has a newline effect.
Case: Picture to do background, hide picture on text http://www.divcss5.com/jiqiao/j55.shtml

2, Div{display:none} hidden objects and object content.
Case: CSS hides HTML content http://www.divcss5.com/jiqiao/j55.shtml

3, Div{display:inline} in a row display.
Representative case, default row for Li list display li{display:inline}

Ii. what is the value of display-TOP

CSS display values and explanations-(CSS display manual for detailed CSS manuals)
Parameters:

Block: The default value of the Block object. Add a new row after the object with this value
None: Hides the object. Unlike the hidden value of the visibility property, it does not retain its physical space for objects that are hidden
Inline: The default value for inline objects. Use this value to delete rows from the object
Compact: Allocates objects as block objects or inline objects based on content
Marker: Specifies the content before or after the container object. To use this parameter, the object must be used with: after and: before pseudo-elements
Inline-table: Display table as inline object or inline container without front and back wrapping
List-item: Specifies the Block object as a list item. And you can add optional item flags
Run-in: Allocating objects as block objects or inline objects based on content
Table: Displaying objects as block-element-level tables
Table-caption: displaying objects as table headings
Table-cell: Display an object as a table cell
Table-column: Displaying an object as a table column
Table-column-group: Display an object as a table column group
Table-header-group: Display an object as a table header group
Table-footer-group: Display objects as table footer groups
Table-row: Displaying an object as a table row
Table-row-group: Display an object as a table row group

Third, CSS display block-TOP

Display:block is what we use, and block is the default value for display.
Explanation: The contents of the object are then wrapped automatically.
CSS Display block instance

CSS code:

1. . Divcss5{display:block}

HTML corresponding to the use of code:

1. <span class="DIVCSS5"> My back text wraps </span> I was wrapped by the previous divcss5 corresponding to the CSS property.
2. <span> won't be wrapped because I'm not set Display:block</span>

Corresponding results:

The description uses span as an instance, a CSS style is set, one is not set, and you can compare the contents of the object that is set to the Div display:block style to be wrapped later.

Four, CSS display none hidden content-TOP

The none value of this display, which we also use frequently, is used to hide object content, and objects that are hidden do not occupy their intrinsic width height space.
Details visible css hidden explanation: http://www.divcss5.com/jiqiao/j55.shtml

V, CSS Display inline-TOP

Display:inline, we often use it in Li. The function is to make Li into a row (called Delete row).
Next, we present a demo with an example of setting up the Li list with a CSS Display inline style comparison.

CSS Code
UL.DIVCSS5 Li{display:inline}
Explanation: Ul.divcss5 corresponds to the Li CSS style property of Display:inline

HTML corresponding code:

2. <ul>
4. <Li> My parent ul no divcss5 style </li>
6. <li> I am a lone </li>
8. <li> I am a lone </li>
10. </ul>
14. <ul class="DIVCSS5">
16. <Li> My parent ul has divcss5 style </li>
18. <li> I stand in a row </li>
20. <li> I divcss5 li stand in a row </li>
22. </ul>

Demo result diagram:

Description: Sets the Li object for CSS Display:inline, Li is lined up, and the Li list object that is not set still inherits the original CSS style of its own line.

The above is DIVCSS5 for you to organize and display the CSS display commonly used properties corresponding display none, display inline, display block value of the detailed explanations and examples, I hope to help you. At the same time have any questions or questions, please go to DIVCSS5 CSS Forum post discussion, help.

If you want to reprint, please indicate the source and origin of the article URL: http://www.divcss5.com/rumen/r291.shtml

Css--display (Block none inline, etc.) property usage