Css 简明教程
CSS - display Property
CSS 中的 display 属性用于指定要在网页上如何显示元素。它控制元素的布局和显示。
The display property in CSS is used to specify how an element should be displayed on the webpage. It controls the layout and visibility of an element.
display 属性有助于设置元素的内部和外部显示类型。
The display property is useful in setting the inner and outer display types of an element.
Possible Values
传递给 display 属性的值是关键字。这些关键字值按六组进行分类，如下所示：
The value passed to the display property is a keyword. These keyword values are categorised in six different groups, which are as follows:
-
Outside Values (<display-outside>): Values under this head specify the outer display type of an element. inline: Makes the element behave like an inline element, allowing other elements to appear beside it on the same line. Examples: <span>, <img>, <a>, etc. block: Makes the element behave like a block-level element, taking up the entire width of its parent container and creating a new line before and after it. Examples: <div>, <form>, <p>, etc.
-
Inside Values (<display-inside>): Values under this head specify the inner display type of an element. flow: Element displays its contents using flow layout (block and inline layout) flow-root: Element displays a block box, referring to its formatting roots. table: Defines a block-level box, behaving like a HTML <table> elements. flex: Defines a block-level box, behaves as per the flexbox model. grid: Defines a block-level box, behaves as per the grid model. ruby: Defines an inline-level element and behaves as per ruby formatting model.
-
List Item Values (<display-listitem>): Makes the element behave like a list item marker, typically used with <li> elements. A single value represents a single list-item. Can be used along with list-style-type and list-style-position. The list-item can be paired with any outside display value and the flow or flow-root inside display values.
-
Internal Values (<display-internal>): Layouts with complex internal structure, such as, table and ruby use this property to display their content. table-row-group: Behaves like <tbody> HTML element. table-header-group: Behaves like <thead> HTML element. table-footer-group: Behaves like <tfoot> HTML element. table-row: Behaves like <tr> HTML element. table-cell: Behaves like <td> HTML element. table-column-group: Behaves like <colgroup> HTML element. table-column: Behaves like <col> HTML element. table-caption: Behaves like <caption> HTML element. ruby-base: Behaves like <rb> HTML element. ruby-text: Behaves like <rt> HTML element. ruby-base-container: Generated as anonymous boxes. ruby-text-container: Behaves like <rtc> HTML element.
-
Box Values (<display-box>): Defines whether a display box is generated by an element or not. contents: Display of the element is replaced by its contents, i.e. its children and pseudo-elements. none: Turns off the display of the element and its descendants.
-
Precomposed Values (<display-legacy>): A single-keyword value that is precomposed. Requires separate keyword for block and inline level elements. inline-block: Makes an element display as an inline-level block container. Same as inline flow-root. inline-table: Specifies that an element should behave like a table, but still be inline within a block-level context. Same as inline table. inline-flex: Allows an element to have a flexible box layout while participating in an inline-level context. Same as inline flex. inline-grid: Specifies that a grid container should be treated as an inline-level element. Same as inline grid.
CSS display - inline Value
以下是 display:inline 的示例：
Here is an example for display:inline:
<html>
<head>
<style>
li {
display: inline;
font-size: 2rem;
border: 1px solid red;
margin: 5px;
}
</style>
</head>
<body>
<h2>Display - Inline</h2>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</body>
</html>CSS display - block Value
以下是 display:block 的示例：
Here is an example for display:block:
<html>
<head>
<style>
li {
display: block;
font-size: 2rem;
border: 1px solid red;
margin: 5px;
background-color:aquamarine;
width: 200px;
}
</style>
</head>
<body>
<h2>Display - Block</h2>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</body>
</html>CSS display - inline-block Value
以下是 display:inline-block 的示例：
Here is an example for display:inline-block:
<html>
<head>
<style>
div {
display: inline-block;
font-size: 2rem;
border: 1px solid red;
margin: 5px;
background-color: aquamarine;
height: 100px;
width: 200px;
}
</style>
</head>
<body>
<h2>display: inline-block</h2>
<div>Inline-Block 1</div>
<div>Inline-Block 2</div>
<div>Inline-Block 3</div>
</body>
</html>CSS display - none Value
以下是 display:none 的示例：
Here is an example for display:none:
<html>
<head>
<style>
div {
font-size: 2rem;
border: 1px solid red;
margin: 5px;
background-color: aquamarine;
height: 100px;
width: 200px;
}
div.ib {
display: inline-block;
}
div.none {
display:none;
}
</style>
</head>
<body>
<h2>display: none (Block 2)</h2>
<div class="ib">Block 1</div>
<div class="none">Block 2</div>
<div class="ib">Block 3</div>
</body>
</html>CSS display - With table Values
以下是 display:table, display:table-cell, display:table-row, display:table-caption 的示例：
Here is an example for display:table, display:table-cell, display:table-row, display:table-caption:
<html>
<head>
<style>
div {
display: flex;
border: 1px solid black;
}
.table {
display: table;
}
.row {
display: table-row;
padding: 3px;
}
.cell {
display: table-cell;
padding: 3px;
}
.caption {
display: table-caption;
text-align: center;
}
</style>
</head>
<body>
<div class="table">
<div class="caption">Sample Table</div>
<div class="row">
<div class="cell">Row1-Cell1</div>
<div class="cell">Row1-Cell2</div>
<div class="cell">Row1-Cell3</div>
</div>
<div class="row">
<div class="cell">Row2-Cell1</div>
<div class="cell">Row2-Cell2</div>
<div class="cell">Row2-Cell3</div>
</div>
<div class="row">
<div class="cell">Row3-Cell1</div>
<div class="cell">Row3-Cell2</div>
<div class="cell">Row3-Cell3</div>
</div>
</div>
</body>
</html>CSS display - flex Value
以下是 display:flex 的示例：
Here is an example for display:flex:
<html>
<head>
<style>
div {
display: flex;
font-size: 2rem;
border: 1px solid red;
margin: 10px;
background-color: aquamarine;
height: 50px;
width: 200px;
}
</style>
</head>
<body>
<h2>display: flex</h2>
<div>Flex-Block 1</div>
<div>Flex-Block 2</div>
<div>Flex-Block 3</div>
</body>
</html>CSS display - inline-flex Value
以下是 display:inline-flex 的示例：
Here is an example for display:inline-flex:
<html>
<head>
<style>
div {
display: inline-flex;
font-size: 2rem;
border: 1px solid red;
margin: 10px;
background-color: aquamarine;
height: 50px;
width: 280px;
}
</style>
</head>
<body>
<h2>display: inline-flex</h2>
<div>Inline Flex-Block 1</div>
<div>Inline Flex-Block 2</div>
<div>Inline Flex-Block 3</div>
</body>
</html>CSS display - grid Value
以下是 display:grid 的示例：
Here is an example for display:grid:
<html>
<head>
<style>
div {
display: grid
font-size: 2rem;
border: 1px solid red;
margin: 10px;
background-color: aquamarine;
height: 50px;
width: 280px;
marg
}
</style>
</head>
<body>
<h2>display: grid</h2>
<div>grid-Block 1</div>
<div>grid-Block 2</div>
<div>grid-Block 3</div>
</body>
</html>CSS display - inline-grid Value
以下是 display:inline-grid 的示例：
Here is an example for display:inline-grid:
<html>
<head>
<style>
div {
display: inline-grid
font-size: 2rem;
border: 1px solid red;
margin: 10px;
background-color: aquamarine;
height: 50px;
width: 280px;
}
</style>
</head>
<body>
<h2>display: inline-grid</h2>
<div>inline grid-Block 1</div>
<div>inline grid-Block 2</div>
<div>inline grid-Block 3</div>
</body>
</html>CSS display - list-item Value
下面是 display:list-item 的一个示例：
Here is an example for display:list-item:
<html>
<head>
<style>
li {
display: list-item;
font-size: 2rem;
border: 1px solid red;
margin: 10px;
background-color: aquamarine;
height: 50px;
width: 280px;
}
</style>
</head>
<body>
<h2>display: list-item</h2>
<div>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
</div>
</body>
</html>