display屬性的多方位應用

一、display屬性概述

display屬性是CSS中常用的一個屬性，它定義了一個元素的盒模型類型，以及其在頁面上的布局形式。在HTML文檔中，每個HTML標籤都有一個默認的display值，具體值隨標籤而異。除了設置這個默認的內部樣式，也可以用CSS來設置 display 屬性進行樣式覆蓋，可以將一個元素的display屬性設置為“none”來使它從文檔流中完全刪除，或者將所有的元素設置為inline-block，可以將它們變成行內塊元素。display屬性在建立布局的過程中扮演着重要的角色。

二、display值詳解

1. block

該值使元素成為一個塊級元素，即該元素會新起一行並且儘可能撐滿容器。通常用於頁面布局的容器元素，如div, p等。

div {
  display: block;
}

2. inline

該值使元素成為一個內聯元素，即元素會在一行內，儘可能佔據自身內容的寬度空間。通常用於文字、鏈接等行內元素。

span {
  display: inline;
}

3. inline-block

該值使元素既具有內聯元素的特性，又具有塊級元素的特性，既可以設置寬高，又可以保持在一行內顯示。通常用於菜單、按鈕等元素。

button {
  display: inline-block;
}

4. none

該值使元素不顯示在頁面上，相當於在頁面中刪除該元素。通常用於實現某些交互效果、動態控制元素顯示/隱藏等。

.hidden {
  display: none;
}

5. flex

該值使元素成為一個伸縮容器，可以通過flex容器中的flex項目的伸縮來改變其尺寸來填充可用空間。通常用於實現複雜的頁面布局。

.container {
  display: flex;
}

三、display屬性在頁面布局中的應用

1. 列表布局

利用display屬性，我們可以很方便地實現列表布局。比如，將一些按鈕放在一行中，並通過設置inline-block的display值，使它們在同一行顯示。或者，將一個元素列表放在一列中，並通過設置block的display值，使它們一個下一個地垂直排列。

/* 列表按鈕 */
ul {
  padding: 0;
  margin: 0;
}
li {
  display: inline-block;
  margin-right: 20px;
}
/* 列表元素 */
ul {
  padding: 0;
  margin: 0;
}
li {
  display: block;
  margin-bottom: 10px;
}

2. 頁面布局

除了列表布局，我們還可以利用display屬性進行頁面布局。比如，使用block的display值，設置容器元素的寬度，並通過margin屬性使其水平居中。再使用inline-block的display值，設置該容器中的每個元素，使這些元素水平排列。

.container {
  width: 960px;
  margin: 0 auto;
}
.item {
  display: inline-block;
  width: 200px;
  height: 200px;
}

3. 彈性布局

display:flex屬性提供了一種彈性布局的模式，使得我們可以更便捷地實現完整的頁面布局。在一個父元素被賦予display:flex之後，它的子元素自身布局就可以隨着彈性容器的伸展方便地對齊，並且可以根據需要重新進行布局以適應不同的屏幕尺寸。

.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.item {
  width: 200px;
  height: 200px;
}

四、不同display值的特性

1. block

塊級元素會佔據父元素的全部寬度，並且它們會預留一定的空間讓其後續元素能夠放置在新起的一行上。

2. inline

行內元素不會換行，只會繼續填充空餘的位置。

3. inline-block

行內塊級元素有和行內元素相同的特點，但其也可以控制自身的寬度和高度。

4. none

該元素不會佔據任何空間，並且它會完全從文檔流中刪除，無法再渲染出來。

5. flex

在彈性盒模型中，元素可以在任何方向中進行伸縮，並且它們可以沿着一個軸線進行排列。

五、總結

display屬性是CSS中一個非常重要的屬性，它決定了網頁中元素的布局方式。掌握不同display值的特點和使用方法，能夠幫助我們更好地實現各種網頁布局。