Div CSS display (Block, none, inline)

Div CSS display (Block none inline) attribute usage

In general CSS layout, we often use three values, block, none, and inline, corresponding to the display value. Next, let's identify and learn when to use the value. Here, we use CSS display knowledge plus examples and graphic demonstration methods to learn and understand Div CSS display.

Directory Use CSS display What are the display values? CSS display block CSS display none CSS display inline

1. Use CSS display

Use dispaly for div CSS

CSSCode:

. Divcss {display: None}

HTML application:

<Div class = "divcss"> test content </div>

2. What are the display values?

CSS display values and explanations

Parameters:

Block: The default value of the block object. Use this value to add a new row after the object. Add a row before.

None: Hide objects. Unlike the hidden value of the visibility attribute, it does not reserve its physical space for hidden objects.

Inline: Default Value of the inline object. This value is used to delete rows from an object. If both the front and back are inline, then the same row

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 the: After and: Before pseudo elements.

Inline-table: displays a table as an inline object or an inline container without line breaks.
List-item: specify a block object as a list item. You can also add optional project logos.
Run-in: allocate objects as block objects or Inline Objects Based on Content
Table: displays an object as a table at the block element level.
Table-caption: displays objects as table titles.
Table-cell: displays objects as table cells.
Table-column: displays objects as table columns.
Table-column-group: displays objects as table column groups.
Table-header-group: displays an object as a table title group.
Table-footer-group: displays objects as table footer groups.
Table-row: displays objects as table rows.
Table-row-group: displays objects as table row groups.

3. CSS display: Block

Display: block is commonly used. Block is also the default value of display.

BlockElement(DefaultDisplay: Block)Features: 

· Always start on a new line;

· The subsequent content of this object is automatically wrapped;

· Height, row height, and top and bottom margins can be controlled;

· The default width is 100% of its container, unless a width is set.

<Div>, <p>,

Instance1.

CSS code:

 
. Divcss {display: block}
 

Code used for HTML:

 
<SPAN class = "divcss"> the text next to me is wrapped in a line </span> I was wrapped by the CSS attribute corresponding to divcss. <Span> no line breaks, because I have not set display: block </span>
 

Result:

Instance2.

<Div style = "width: 200px; margin: 0; Background-color: # cccccc"> <P style = "display: block; margin: 0; "> the first line </P> <P style =" display: block; margin: 0; width: 40% "> the second line </P> <Div style =" margin-top: 2px; margin-bottom: 2px; margin-left: 10px; margin-Right: 10px; height: 20px; "> test Div </div>
 

We can see that there are three rows. We can see that the width is set to 100% of its container by default, or it can be set to other percentages.

4. CSS display:None

We often use the none value of this display to hide the object content. The hidden object does not occupy its inherent width and height.

For example, this attribute is used to display and hide the level-2 menu in the navigation bar.

5. CSS display:Inline

Display: inline, which is often used in Li. The function is to arrange Li in a row (delete a row ).

Next, we will demonstrate how to compare an unspecified Li list with a CSS display inline style.

CSS code

 
Ul. divcss Li {display: inline}
 

Explanation: The Li CSS style attribute corresponding to Ul. divcss is display: inline.

InlineElement(DefaultDisplay: inline)Features:

· And other elements are on one row;

· High: the Row Height and top and bottom margins cannot be changed;

· The width of a text or image cannot be changed.

<Span>, <A>, <label>, <input>, , <strong>, and <em> are examples of inline elements.

HTML code:

 
<Ul> <li> my parent ul does not have a divcss5 style </LI> <li> I am alone </LI> </ul> <ul class = "divcss5"> <li> my parent ul has a divcss5 style </LI> <li> I stand in one row </LI> <li> I work in divcss5 station Li in a row </LI> </ul>
 

Demo result diagram:

Note: When CSS is set to display: inline, the Li object is arranged in a row, and the unspecified Li list object still inherits the CSS style of the original exclusive row.

Inline and block can control the high row width of an element. The switchover is as follows:

1. Start an inline element from a new line;

Set the display of the new element to block.

2. Keep the block element and other elements in one row;

Set the display attribute of the block element to inline.

3. Control the width of the inline element (especially useful for navigation bars );

4. Control the height of the inline element;