CSS 数据类型 - display-legacy

CSS 2 中的 display 属性使用了单关键字语法，这需要为同一布局模型的块级和内联级变体使用单独的关键字。本章将讨论这些值。

可能的值

数据类型 <display-legacy> 具有以下有效值：

inline-block：元素生成一个块元素框，该框将与周围的内容一起流动。等效于内联流根。
inline-table：HTML 中没有直接映射。在行为上，它类似于 <table> 元素，作为内联框而不是块级框。等效于内联表。
inline-flex：内容按照 flexbox 模型进行布局，其中元素的行为类似于内联元素。等同于内联 flex。
inline-grid：内容根据网格模型进行布局，其中元素的行为类似于内联元素。等同于内联网格。

语法


<display-legacy> = inline-block | inline-table | inline-flex | inline-grid

CSS <display-legacy> - 内联网格

以下示例演示了一个带有旧关键字 inline-grid 的内联网格容器：


<html>
<head>
<style>	
	 	.container-legacy {
	 	 	 display: inline-grid;
	 	 	 border: 2px solid black;
	 	 	 background-color: yellow;
	 	 	 padding: 5px;
	 	 	 margin: 5px;
	 	}

	 	.container-new {
	 	 	 display: inline grid;
	 	 	 border: 2px dashed green;
	 	 	 background-color: peachpuff;
	 	 	 margin: 5px;
	 	 	 padding: 5px;
	 	}
</style>
</head>
<body>
	 	<h2>inline-grid example</h2>
	 	<h3>legacy keyword - inline-grid</h3>
	 	<div class="container-legacy">
	 	 	 <div>Grid Item 1</div>
	 	 	 <div>Grid Item 2</div>
	 	</div>
	 	<hr>
	 	<h3>new keyword - inline grid</h3>
	 	<div class="container-new">
	 	 	 <div>Grid New 1</div>
	 	 	 <div>Grid New 2</div>
	 	</div>
</body>
</html>

CSS <display-legacy> - 内联弹性

以下示例演示了一个带有旧关键字 inline-flex 的内联 flex 容器：


<html>
<head>
<style>	
	 	.container-legacy {
	 	 	 display: inline-flex;
	 	 	 border: 2px solid black;
	 	 	 background-color: yellow;
	 	 	 padding: 5px;
	 	 	 margin: 5px;
	 	}

	 	.container-new {
	 	 	 display: inline flex;
	 	 	 border: 2px dashed green;
	 	 	 background-color: peachpuff;
	 	 	 margin: 5px;
	 	 	 padding: 5px;
	 	}
</style>
</head>
<body>
	 	<h2>inline-flex example</h2>
	 	<h3>legacy keyword - inline-flex</h3>
	 	<div class="container-legacy">
	 	 	 <div>Flex Item 1</div>
	 	 	 <div>Flex Item 2</div>
	 	</div>
	 	<hr>
	 	<h3>new keyword - inline flex</h3>
	 	<div class="container-new">
	 	 	 <div>Flex New 1</div>
	 	 	 <div>Flex New 2</div>
	 	</div>
</body>
</html>

打印本页