Home > Article > Web Front-end > How to use css display attribute

How to use css display attribute

silencementOriginal: 2019-05-26 16:45:493781browse

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use css font attributeNext article：How to use css font attribute

See more

How to use css display attribute

Related articles