Home >Web Front-end >CSS Tutorial >How to use css display attribute
How to use css display attribute
- silencementOriginal
- 2019-05-26 16:45:493891browse
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>display属性的none属性值</title>
<style type="text/css">
body{background-color: #aaa;}
.div{width:400px;height:60px;border:1px solid;margin-top:10px;}
.none{display:none;}
</style>
</head>
<body>
<div class="div">元素1</div>
<div class="div none">元素2</div>
<div class="div">元素3</div>
</body>
</html>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!