display 屬性是CSS 中最重要的屬性之一，主要用來控制元素的佈局，透過display 屬性您可以設定元素是否顯示以及如何顯示。
一、display 屬性的作用
1. display 屬性可以設定元素的內部和外部顯示類型
（1）外部顯示類型：
a.元素的外部顯示類型有block區塊、inline內聯等。
b.外部顯示類型將決定該元素在串流佈局中的表現。
（2）內部顯示類型：
內部顯示類型flex 佈局、grid 網格佈局、流式佈局等。
元素的內部顯示類型可以控制其子元素的佈局方式。
2. 串流佈局（文件流程或常規串流）：
「文件流程」 或「串流佈局」 是在對佈局進行任何變更之前（預設），在頁面上顯示「區塊」 和「內聯」 元素的方式。
簡單直白點來說，他是一種排版方式，這種排版方式規定了區塊級和內聯元素在頁面中如何排版顯示。
（1）串流佈局中- 區塊級元素排版方式：
塊級盒子會從包含塊的頂部開始，按序垂直排列。
同等級盒子間的垂直距離會由「margin」屬性決定。
相鄰兩個塊級盒子之間的垂直間距會遵循外邊距折疊原則被折疊
（2）串流佈局中- 內嵌元素排版方式：
盒子會從包含塊的頂部開始，按序水平排列。
只有水平外邊距、邊框和內邊距會保留。
這些盒子可以以不同的方式在垂直方向上對齊：可以在底部對齊或頂部對齊，或按文字底部進行對齊
二、元素外部顯示類型
1. splay 透過下列屬性值來指定元素的顯示類型
（1）block 區塊級
（2）inline-block 行內塊
（3）inline 行內
2. 元素顯示類型分為：區塊級和內聯等
3. 內嵌（行內）元素又分為：inline 內嵌元素與inline-block 行內區塊元素
（一）diblock 區塊級元素
1. 常見的區塊級元素有：
<p>、<div>、<ul>、<ol>、<li>、<h1>~<h6>、<dl> 等
2. 塊級元素的特徵：
（1）獨佔一行
（2）可以設定width、height 屬性。
（3）在不設定寬情況下，寬預設為父元素內容區寬。
（4）區塊級元素裡可以放任意型別元素，但是文字類別元素標籤內不能放其它塊元素
（5）p 標籤裡不能放p 和div 標籤。
（6）h1-h6 標籤裡不能放p 和div 標籤。
（二）inline-block 行內塊元素
1. 下列元素具有行內塊元素的特性：
<img>、表單類別元素、<video>、<audio> 等，這些元素本質上叫可替換元素（歸類歸到行內元素）
2. 行內塊元素的特徵：
（1）相鄰的行內塊（或行內）元素會在一行顯示，放不下會換行。
（2）相鄰的行內塊元素之間會有空白間隙。
（3）可設定width、height 屬性，元素預設寬為它本身內容寬
（三）inline 內嵌（行內）元素
1. 常見的行內元素有：
<a>、<strong>、<span>、<i>、<del> 等
2. 行內元素特點：
相鄰的行內元素會在一行顯示，放不下時會換行顯示
設定width、height 屬性是無效的。其寬高隨其內容大小而撐開。
行內元素裡只能放文字或其它行內元素
3. 注意：
<a>標籤中不能再放<a>標籤，但<a>標籤中可以放區塊級元素
實際開發中，在某些情況下會把<a>標籤轉換為區塊級元素
三種元素類型對比
三、行內元素和區塊級元素的互相轉換
我們只需要給對應的元素加入對應display屬性值，就可以把元素轉換成對應的元素類型。
（1）使用display: block; 即可將元素轉換為區塊級元素。
舉例：
<!DOCTYPEhtml><html><head><style>a{display:block;width:150px;height:50px;background-color:#ACC;line-height:50px;text-align:center;text-decoration: none;}</style></head><body><ahref=>dotcpp程式設計連結</a></body></html>運行結果：
（2）使用display: inline; 即可將元素轉換為行內元素。不過將元素轉換為行內元素的應用不多見
（3）使用display: inline-block; 即可將元素轉換為行內塊元素
四、隱藏元素方法
補充：
（1）display 除none 以外的值，均為顯示元素。
（2）visibility:visible; 為顯示元素
舉例：
display 的屬性值none 可以用來隱藏元素，與visibility: hidden;功能相似，不同的是display: none;在隱藏元素的同時，它也會將元素所佔的位置一併隱藏。 display: none;通常會與JavaScript 結合使用來隱藏或顯示某個元素，下面透過一個範例來示範：
<!DOCTYPEhtml><html><head><style>div{width:350px;height:100px;background-color:#AAA;}</style></head><body><divid=box></div ><buttononclick=change_box(this)>隱藏</button><script>functionchan ge_box(obj){varbox=document.getElementById('box');if(box.style.display=='none'){box.style.display=;obj.innerHTML=隱藏;}else{box.style. display=none;obj.innerHTML=顯示;}}</script></body></html>運行結果：
五、兩種隱藏方法的差別
六、去掉行內塊元素預設的空白間隙
行內塊元素間會預設產生空隙。
產生間隙原因：
（1）元素被當成行內元素排版的時候，元素之間的空白符號（空格、回車換行等）都會被瀏覽器處理
（2）根據white-space 的處理方式（預設是normal，合併多餘空白），原來HTML 程式碼中的回車換行被轉成一個空白符，所以元素之間就出現了空隙。
（3）這些元素之間的間距會隨著字體的大小而變化
解決辦法：
（1）為父元素新增同時子元素重寫font-size
font-size 屬性有繼承性，所以父元素font-size:0; 會繼承到子元素span，則子元素需要重新設定font-size 大小
（2）為元素添加float
元素加入float 後，會脫離文件流，父元素未新增高度時，會出現高度塌陷問題，則需要清除浮動造成的問題。
（3）圖片間空隙，為圖片加上display:block;
加上了display:block 之後，圖片成為區塊元素，獨佔一行