Usage of DIV CSS display (block none inline) attribute_html/css_WEB-ITnose

1. CSS display usage
The following is DIV CSS using display, indicating that the display value here is arbitrary
CSS code:
.divcss5{display:none}
Html corresponding Application:

I am testing content

According to the above, you can use DIV CSS by yourself to see the results

2. The value of display What are the
Css display values ​​​​and explanations - (For details, please see the CSS display manual of the CSS manual)
Parameters:

block: The default value of the block object. Add a new line after the object with this value
none: hide the object. Unlike the hidden value of the visibility attribute, it does not retain its physical space for hidden objects
inline: the default value of inline objects. Use this value to delete rows from the object
compact: assign the object as a block object or an inline object based on the content
marker: specify the content before or after the container object. To use this parameter, the object must be used together with the :after and :before pseudo-elements
inline-table: display the table as an inline object or inline container without line breaks
list-item: specify the block object as a list item. And you can add optional project flags
run-in: allocate the object as a block object or an inline object based on the content
table: display the object as a block element-level table
table-caption: will Display the object as a table title
table-cell: Display the object as a table cell
table-column: Display the object as a table column
table-column-group: Display the object as a table column group
table-header-group: Display the object as a table header group
table-footer-group: Display the object as a table footer group
table-row: Display the object as a table row
table-row- group: Display the object as a table row group

3. css display block
Display: block is what we commonly use, and block is also the default value of Display.
Explanation: The subsequent content of this object wraps automatically.
css display block example
CSS code:
.divcss5{display:block}

Html corresponding application code:
My back The text will wrap I was wrapped by the previous divcss5 corresponding CSS attribute.
will not be wrapped because I have not set display:block

Corresponding result screenshot:

Explanation that span is used as an example here, and one is set CSS style, if it is not set, can be compared to the object whose DIV display:block style is set. The subsequent content is wrapped.

4. css display none
The none value of this display is also often used by us to hide object content. The hidden object will not occupy its own inherent width and height space.
For details, see CSS hidden explanation: http://www.divcss5.com/jiqiao/j55.html

5. css display inline
Display:inline, we often use it in li. The function is to line up li in a row (called: delete rows).
Next we will demonstrate the comparison between an unset li list and a set css Display inline style.

Css code
ul.divcss5 li{display:inline}
Explanation: The corresponding li css style attribute of ul.divcss5 is display:inline

Html corresponding code:

• My parent ul does not have divcss5 style


• I am alone


• I am alone
  

• My parent ul has divcss5 style

< ;li>I stood in a row

• I stood in a row under dicss5

Demonstration result picture:

Note: Set the css to the li object of display:inline, and the li objects will be arranged in a row, while the unset li list object still inherits the original CSS style of its own line.