<div class="display"> <h1>CSS 中對 Display 屬性的詳解</h1>

在 CSS 中，Display 屬性用于定義元素的顯示方式。通過改變 Display 屬性的值，我們可以實(shí)現(xiàn)不同的布局效果。本文將詳細(xì)介紹 C Div Display，即 C 語言中使用 Div 元素來定義不同的顯示屬性。

</div>
<div class="example">

案例一：塊級元素和內(nèi)聯(lián)元素的區(qū)別

在 HTML 中，元素可以分為塊級元素和內(nèi)聯(lián)元素。塊級元素在默認(rèn)情況下會獨(dú)占一行，而內(nèi)聯(lián)元素則可以在同一行中顯示。以下是通過 C 語言中的 Div 元素來定義不同的顯示屬性的示例：

// CSS 代碼
div.block {
display: block;
background-color: lightblue;
}
<br>
  div.inline {
display: inline;
background-color: lightgreen;
}
<br>
  // HTML 代碼
<div class="block">這是一個(gè)塊級元素</div>
<div class="inline">這是一個(gè)內(nèi)聯(lián)元素</div>

在上述示例中，我們通過設(shè)置 Div 元素的 Display 屬性，將其分別定義為塊級元素和內(nèi)聯(lián)元素。塊級元素的背景顏色為淺藍(lán)色，而內(nèi)聯(lián)元素的背景顏色為淺綠色。

</div>
<div class="example">

案例二：Flex 布局

Flex 布局是一種彈性盒子布局模型，可以方便地實(shí)現(xiàn)自適應(yīng)的布局效果。以下是使用 C 語言中的 Div 元素來實(shí)現(xiàn)簡單 Flex 布局的示例：

// CSS 代碼
.flex-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
<br>
  .flex-item {
background-color: lightblue;
margin: 10px;
padding: 20px;
}
<br>
  // HTML 代碼
<div class="flex-container">
<div class="flex-item">Flex 項(xiàng)目 1</div>
<div class="flex-item">Flex 項(xiàng)目 2</div>
<div class="flex-item">Flex 項(xiàng)目 3</div>
</div>

在上述示例中，我們通過設(shè)置 Flex 容器的 Display 屬性為 flex，并利用其他的 Flex 屬性來實(shí)現(xiàn)對 Flex 項(xiàng)目的布局和對齊方式的控制。每一個(gè) Flex 項(xiàng)目的背景顏色都是淺藍(lán)色，并且之間有一定的外邊距和內(nèi)邊距。

</div>
<div class="example">

案例三：網(wǎng)格布局

網(wǎng)格布局是一種二維布局模型，可以將頁面劃分為網(wǎng)格，方便地進(jìn)行元素的排列和定位。以下是使用 C 語言中的 Div 元素來實(shí)現(xiàn)簡單網(wǎng)格布局的示例：

// CSS 代碼
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
align-items: center;
}
<br>
  .grid-item {
background-color: lightblue;
padding: 20px;
}
<br>
  // HTML 代碼
<div class="grid-container">
<div class="grid-item">網(wǎng)格項(xiàng)目 1</div>
<div class="grid-item">網(wǎng)格項(xiàng)目 2</div>
<div class="grid-item">網(wǎng)格項(xiàng)目 3</div>
<div class="grid-item">網(wǎng)格項(xiàng)目 4</div>
<div class="grid-item">網(wǎng)格項(xiàng)目 5</div>
<div class="grid-item">網(wǎng)格項(xiàng)目 6</div>
</div>

在上述示例中，我們通過設(shè)置 Grid 容器的 Display 屬性為 grid，并利用其他的 Grid 屬性來定義網(wǎng)格的列數(shù)、行距和元素的對齊方式。每一個(gè)網(wǎng)格項(xiàng)目的背景顏色為淺藍(lán)色，并且之間有一定的內(nèi)邊距。

</div>
<div class="reference">

參考文獻(xiàn)：

1. W3Schools. CSS Display Property. https://www.w3schools.com/cssref/pr_class_display.asp

2. MDN Web Docs. CSS Layout - The position Property. https://developer.mozilla.org/en-US/docs/Web/CSS/display

</div>