display屬性詳解

display屬性定義了元素的展示類型，常用的屬性有block、inline、inline-block、flex等，通過修改display屬性，我們可以方便的控制元素的布局和顯示方式。

  /* 修改 div 元素的展示類型為 inline */
  div {
    display: inline;
  }

上述代碼將會把一個原本是塊級元素的 div 元素變成一個行內元素，從而改變它的布局方式。

display屬性的值還可以是 none，這種情況下元素會從頁面流中移除，不會再佔據空間，也不會對文檔流產生任何影響。可以通過 JavaScript 動態地控制元素的顯示和隱藏。

  /* 隱藏某一個 div 元素 */
  div {
    display: none;
  }

display屬性的值是比較多的，我們來詳細的了解一下每一個取值的意義和應用場景。

block類型的元素會在頁面上單獨佔據一行，例如 div、h1、p 等元素。這種元素最明顯的特徵是：總是從新行開始。

當僅僅設置display: block; 時，元素寬度默認佔據其父容器的 100%。

  /* 將列表元素 ul 改為塊級元素 */
  ul {
    display: block;
  }

inline元素通常沒有設置寬度和高度，其寬度和高度是由內容決定的，例如 span、a、img 等元素。這種元素通常是行內元素。

  /* 將一個 div 元素的展示屬性改為行內元素 */
  div {
    display: inline;
  }

inline-block 元素是行內塊元素，與行內元素類似，但是可以設置寬度和高度等屬性，和塊級元素一樣可以佔據多行的空間。

  /* 將表單按鈕改為行內塊元素 */
  button {
    display: inline-block;
  }

flex布局是CSS3中的一種新特性，它使得我們可以更方便的創建複雜的布局，得到更加靈活的盒模型。

flex屬性是對容器設置的，用於指定當前容器使用flex布局，而不是block或者其他類型的布局。

  /* 將容器的布局方式改為flex */
  .container {
    display: flex;
  }

display屬性的取值還有很多，下面列出一些常見的值和對應的特徵。

下面是常見的 display 屬性值及其解釋：

block 元素最常見的是 div 元素，通過 block 元素使得具有相同語義的元素能夠聚集起來，形成了網頁中的一個個區塊。block 元素默認寬度佔據父元素的全部寬度。

  /* div 塊級元素 */
  div {
    display: block;
  }

display 屬性用於控制元素的布局和顯示方式。不同類型的元素採用不同的布局方式和顯示形式，通過修改 display 屬性，可以方便的控制元素的表現。

原創文章，作者：ERGYW，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/325039.html