CSS 数据类型 - display-inside_CSS 菜鸟教程

CSS <display-inside>数据类型确定元素的内部显示，该元素指定了未替换元素的格式上下文类型。这些关键字定义 display 属性的值。它们可以用作旧版本浏览器的单个关键字，也可以与 <display-outside> 关键字的值一起使用。

可能的值

flow-root - 它为元素创建新的块格式上下文。
table − 元素本身成为一个块级容器，其行为类似于HTML表。
flex - 该元素作为块级元素工作，并根据 flexbox 模型排列其内容。
grid - 元素作为块级元素工作，并根据网格模型排列其内容。

语法

<display-inside>: flow-root | table | flex | grid;

CSS <display-inside> - flow-root

以下示例演示了 display： flow-root 属性创建一个块格式设置上下文并包含浮动元素 -

<html>
<head>
<style>
	 	.container {
	 	 	 display: flow-root;
	 	 	 border: 2px solid blue;
	 	 	 padding: 10px;
	 	}
	 	.float-left {
	 	 	 float: left;
	 	 	 height: 30px;
	 	 	 width: 50%;
	 	 	 background-color: pink;
	 	}
	 	.float-right {
	 	 	 float: right;
	 	 	 height: 30px;
	 	 	 width: 50%;
	 	 	 background-color: yellow;
	 	}
</style>
</head>
<body>
	 	<div class="container">
	 	 	 <div class="float-left">Floating Left</div>
	 	 	 <div class="float-right">Floating Right</div>
	 	</div>
</body>
</html>

CSS <display-inside> - table

以下示例演示了 display： table 属性将元素定义为表 -

<html>
<head>
<style>
	 	.table-container {
	 	 	 display: table;
	 	 	 width: 100%;
	 	 	 border-collapse: collapse;
	 	 	 background-color: pink;
	 	}
	 	.row {
	 	 	 display: table-row;
	 	}
	 	.column {
	 	 	 display: table-cell;
	 	 	 border: 2px solid blue;
	 	 	 padding: 5px;
	 	}
</style>
</head>
<body>
	 	<div class="table-container">
	 	 	 <div class="row">
	 	 	 	 	<div class="column">Row 1, Column 1</div>
	 	 	 	 	<div class="column">Row 1, Column 2</div>
	 	 	 	 	<div class="column">Row 1, Column 3</div>
	 	 	 </div>
	 	 	 <div class="row">
	 	 	 	 	<div class="column">Row 2, Column 1</div>
	 	 	 	 	<div class="column">Row 2, Column 2</div>
	 	 	 	 	<div class="column">Row 2, Column 3</div>
	 	 	 </div>
	 	</div>
</body>
</html>

CSS <display-inside> - flex

以下示例演示了 display： table 属性将元素定义为 table 元素 -

<html>
<head>
<style>
	 	.flex-container {
	 	 	 display: flex;	
	 	 	 align-items: center;	
	 	 	 height: 50px;	
	 	 	 padding: 5px;
	 	 	 gap: 5px;
	 	 	 background-color: red;
	 	}
	 	.flex-item {
	 	 	 padding: 10px;
	 	 	 border: 2px solid green;
	 	 	 background-color: yellow;
	 	}
</style>
</head>
<body>
	 	<div class="flex-container">
	 	 	 <div class="flex-item">Flex Item 1</div>
	 	 	 <div class="flex-item">Flex Item 2</div>
	 	 	 <div class="flex-item">Flex Item 3</div>
	 	</div>
</body>
</html>

CSS <display-inside> - grid

以下示例演示了 display： grid 属性创建具有三列和两行的基本网格布局 -

<html>
<head>
<style>
	 	.grid-container {
	 	 	 display: grid;
	 	 	 grid-template-columns: 100px 100px 100px;	
	 	 	 grid-template-rows: 50px 50px;	
	 	 	 gap: 5px;	
	 	 	 align-items: center;
	 	 	 background-color: pink;
	 	 	 padding: 5px;
	 	}
	 	.grid-item {
	 	 	 background-color: yellow;
	 	 	 padding: 10px;
	 	 	 text-align: center;
	 	 	 border: 3px solid red;
	 	}
</style>
</head>
<body>
	 	<div class="grid-container">
	 	 	 <div class="grid-item">Grid Item 1</div>
	 	 	 <div class="grid-item">Grid Item 2</div>
	 	 	 <div class="grid-item">Grid Item 3</div>
	 	 	 <div class="grid-item">Grid Item 4</div>
	 	 	 <div class="grid-item">Grid Item 5</div>
	 	 	 <div class="grid-item">Grid Item 6</div>
	 	</div>
</body>
</html>

<< CSS 数据类型 - resolution CSS 数据类型 - display-listitem >>