How to use css display attribute

display attribute definition and usage

The display attribute is used a lot in web page layout, and it has many attribute values, but The most commonly used attribute values are block, inline-block, inline and none. Other attribute values are rare. So here we will focus on the usage of these commonly used attribute values;

In css , the display attribute is used to define the type of box that an element should generate. It is often used to convert block elements to inline elements, inline elements to block elements, or block elements/inline elements to inline- block element and inline-block element have both the characteristics of block elements and the characteristics of inline elements.

display attribute syntax format

1.css syntax: display:none/inline/block/inline-block/list-item/run-in/table/inline -table/table-row-group/table-header-group/table-footer-group/table-row/table-colume-group/table-column/table-cell/table-caption/inherit

2. JavaScript syntax: object.style.display="inline"

display attribute value description

none: Set the element not to display

block: Set the element as a block-level element

inline: Set the element as an inline element

inline-block: Inline block element, which has the characteristics of block elements and inline elements Features

list-item: Set element to be a list

run-in: Display as a block-level element or inline element depending on context

compact/marker: Already removed from CSS2. Delete

table in 1: Set the element to a block-level table (similar to f5d188ed2c074f8b944552db028f98a1), with line breaks before and after the table

inline-table: Set the element to an inline table (similar to < ;table>), there are no line breaks before and after the table

table-row-group: Set the element to a group of one or more rows (similar to 92cee25da80fac49f6fb6eec5fd2c22a)

table-header-group : similar to ae20bdd317918ca68efdc799512a9b39 tag

table-footer-group: similar to 06669983c3badb677f993a8c29d18845 tag; table-row : similar to a34de1251f0d9fe1e645927f19a896e8 tag

none attribute of display attribute When the attribute value of the display attribute of the value

element is set to none, the element will be hidden and not displayed, and it will be separated from the document flow and will not occupy the web page space; very related: display and css hidden elements Usage notes of visibility attribute

Example

      
  
元素1
 
元素2
 
元素3
  

The above is the detailed content of How to use css display attribute. For more information, please follow other related articles on the PHP Chinese website!