在 CSS 中，`display`屬性用于控制元素的顯示方式，它具有多種常見的值，每個值都決定了元素在頁面中的呈現(xiàn)方式和布局行為。以下是一些常見的`display`屬性值及其詳細(xì)介紹：

`block`

這是`display`屬性的默認(rèn)值之一。當(dāng)元素的`display`屬性設(shè)置為`block`時，元素會以塊級元素的形式顯示，占據(jù)其父元素的全部寬度，并自動換行。塊級元素可以設(shè)置寬度、高度、邊距和填充等屬性，并且會獨(dú)占一行。常見的塊級元素如`div`、`h1` - `h6`、`p`等。

例如：

```css

div {

display: block;

width: 200px;

height: 100px;

background-color: lightblue;

}

```

上述代碼中，`div`元素被設(shè)置為`block`顯示類型，寬度為 200 像素，高度為 100 像素，背景顏色為淺藍(lán)色，并獨(dú)占一行。

`inline`

當(dāng)`display`屬性為`inline`時，元素會以行內(nèi)元素的形式顯示，不會自動換行，其寬度僅取決于內(nèi)容的寬度，并且相鄰的行內(nèi)元素會在同一行排列。行內(nèi)元素的邊距和填充屬性只會影響元素自身的布局，不會影響其他元素的布局。常見的行內(nèi)元素如`a`（超鏈接）、`span`等。

例如：

```css

span {

display: inline;

background-color: pink;

padding: 10px;

}

```

這里的`span`元素設(shè)置為`inline`顯示類型，背景顏色為粉色，內(nèi)邊距為 10 像素，它會與其他行內(nèi)元素在同一行顯示。

`inline-block`

`inline-block`值結(jié)合了`inline`和`block`的特性。元素以行內(nèi)元素的方式顯示，即在同一行排列，但可以設(shè)置寬度、高度等塊級元素的屬性。

例如：

```css

.image {

display: inline-block;

width: 150px;

height: 150px;

background-image: url('image.jpg');

}

```

此代碼中，`.image`元素被設(shè)置為`inline-block`顯示類型，寬度和高度為 150 像素，背景圖像為指定的`image.jpg`，它會在同一行顯示，但可以設(shè)置尺寸等塊級屬性。

`none`

將`display`屬性設(shè)置為`none`時，元素會完全隱藏，不占據(jù)頁面空間，也不會影響布局。

例如：

```css

.hidden {

display: none;

}

```

這里的`.hidden`元素將不會在頁面中顯示。

`flex`

`flex`用于創(chuàng)建彈性布局，使父元素的子元素能夠靈活地分配空間。父元素使用`display: flex;`后，其子元素會自動成為彈性容器的一部分，并可以通過`flex`屬性來控制它們的排列方式和大小。

例如：

```css

.container {

display: flex;

}

.item {

flex: 1;

}

```

上述代碼中，`.container`元素設(shè)置為`flex`顯示類型，其子元素`.item`會平均分配容器的空間。

`grid`

`grid`用于創(chuàng)建網(wǎng)格布局，允許更精細(xì)地控制元素的布局和定位。通過`display: grid;`定義一個網(wǎng)格容器，然后可以使用`grid-template-rows`和`grid-template-columns`等屬性來定義網(wǎng)格的行和列。

例如：

```css

.grid-container {

display: grid;

grid-template-rows: 100px 200px;

grid-template-columns: 150px 150px;

}

```

這里的`.grid-container`元素設(shè)置為`grid`顯示類型，定義了兩行兩列的網(wǎng)格，行高分別為 100 像素和 200 像素，列寬均為 150 像素。

`display`屬性的不同值為網(wǎng)頁開發(fā)者提供了豐富的布局選項(xiàng)，可以根據(jù)具體的需求選擇合適的顯示類型來創(chuàng)建各種復(fù)雜的頁面布局和元素顯示效果。