How to use css display attribute-CSS Tutorial-php.cn

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

), 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

)

table-header-group : similar to

tag

table-footer-group: similar to

tag; table-row : similar to 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>

Copy after login

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!

Related labels：

display attribute

source：php.cn

Previous article：How to use css font attribute Next article：How to use css transform-origin attribute

Statement of this Website

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