display 屬性是 CSS 中最重要的屬性之一，主要用來控制元素的布局，通過 display 屬性您可以設(shè)置元素是否顯示以及如何顯示。
一、display 屬性的作用
1. display 屬性可以設(shè)置元素的 內(nèi)部和 外部 顯示類型
（1）外部顯示類型：
a.元素的外部顯示類型有 block塊、inline內(nèi)聯(lián)等。
b.外部顯示類型將決定該元素在流式布局中的表現(xiàn)。
（2）內(nèi)部顯示類型：
內(nèi)部顯示類型flex 布局、grid 網(wǎng)格布局、流式布局等。
元素的內(nèi)部顯示類型可以控制其子元素的布局方式。
2. 流式布局（文檔流 或 常規(guī)流）：
“文檔流” 或 “流式布局” 是在對(duì)布局進(jìn)行任何更改之前（默認(rèn)情況下），在頁面上顯示 “塊” 和 “內(nèi)聯(lián)” 元素的方式。
簡(jiǎn)單直白點(diǎn)來說，他是一種排版方式，這種排版方式規(guī)定了塊級(jí)和內(nèi)聯(lián)元素在頁面中如何排版顯示。
（1）流式布局中 - 塊級(jí)元素排版方式：
塊級(jí)盒子會(huì)從包含塊的頂部開始，按序垂直排列。
同級(jí)盒子間的垂直距離會(huì)由“margin”屬性決定。
相鄰兩個(gè)塊級(jí)盒子之間的垂直間距會(huì)遵循外邊距折疊原則被折疊
（2）流式布局中 - 內(nèi)聯(lián)元素排版方式：
盒子會(huì)從包含塊的頂部開始，按序水平排列。
只有水平外邊距、邊框和內(nèi)邊距會(huì)被保留。
這些盒子可以以不同的方式在垂直方向上對(duì)齊：可以底部對(duì)齊或頂部對(duì)齊，或者按文字底部進(jìn)行對(duì)齊
二、元素外部顯示類型
1. splay 通過以下屬性值來指定元素的顯示類型
（1）block 塊級(jí)
（2）inline-block 行內(nèi)塊
（3）inline 行內(nèi)
2. 元素顯示類型分為：塊級(jí) 和 內(nèi)聯(lián) 等
3. 內(nèi)聯(lián)（行內(nèi)）元素又分為：inline 內(nèi)聯(lián)元素和 inline-block 行內(nèi)塊元素
（一）diblock 塊級(jí)元素
1. 常見的塊級(jí)元素有：
<p>、<div>、<ul>、<ol>、<li>、<h1>~<h6>、<dl> 等
2. 塊級(jí)元素的特點(diǎn)：
（1）獨(dú)占一行
（2）可以設(shè)置 width、height 屬性。
（3）在不設(shè)置寬情況下，寬默認(rèn)為父元素內(nèi)容區(qū)寬。
（4）塊級(jí)元素里可以放任意類型元素，但是文字類元素標(biāo)簽內(nèi)不能放其它塊元素
（5）p 標(biāo)簽里不能放 p 和 div 標(biāo)簽。
（6）h1-h6 標(biāo)簽里不能放 p 和 div 標(biāo)簽。
（二）inline-block 行內(nèi)塊元素
1. 以下元素具有行內(nèi)塊元素的特性：
<img>、表單類元素、<video>、<audio> 等，這些元素本質(zhì)上叫 可替換元素（歸類歸到行內(nèi)元素）
2. 行內(nèi)塊元素的特點(diǎn)：
（1）相鄰的行內(nèi)塊（或行內(nèi)）元素會(huì)在一行顯示，放不下會(huì)換行。
（2）相鄰的行內(nèi)塊元素之間會(huì)有空白間隙。
（3）可設(shè)置 width、height 屬性，元素默認(rèn)寬為它本身內(nèi)容寬
（三）inline 內(nèi)聯(lián)（行內(nèi)）元素
1. 常見的行內(nèi)元素有：
<a>、<strong>、<span>、<i>、<del> 等
2. 行內(nèi)元素特點(diǎn)：
相鄰的行內(nèi)元素會(huì)在一行顯示，放不下時(shí)會(huì)換行顯示
設(shè)置 width、height 屬性是無效的。其寬高隨其內(nèi)容大小而撐開。
行內(nèi)元素里只能放文本或其它行內(nèi)元素
3. 注意：
<a>標(biāo)簽中不能再放<a>標(biāo)簽，但<a>標(biāo)簽中可以放塊級(jí)元素
實(shí)際開發(fā)中，在某些情況下會(huì)把<a>標(biāo)簽轉(zhuǎn)換為塊級(jí)元素
三種元素類型對(duì)比
| 元素類型 | 排列方式 | 設(shè)置寬高效果 | 內(nèi)容 |
| 塊級(jí)(block) | 獨(dú)占一行 | width、height 有效 | 任意元素 |
| 行內(nèi)塊(inline-block) | 一行可顯示多個(gè) | width、height 有效 | 行內(nèi)或行內(nèi)塊元素 |
| 內(nèi)聯(lián)（inline） | 一行可顯示多個(gè) | width、height 無效 | 行內(nèi)或文本元素 |
三、行內(nèi)元素和塊級(jí)元素的互相轉(zhuǎn)換
我們只需要給對(duì)應(yīng)的元素添加對(duì)應(yīng)display屬性值，就可以把元素轉(zhuǎn)換為對(duì)應(yīng)的元素類型。
（1）使用 display: block; 即可將元素轉(zhuǎn)換為塊級(jí)元素。
舉例：
<!DOCTYPE html>
<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>
<a href="">dotcpp編程鏈接</a>
</body>
</html>運(yùn)行結(jié)果：
（2）使用 display: inline; 即可將元素轉(zhuǎn)換為行內(nèi)元素。不過將元素轉(zhuǎn)換為行內(nèi)元素的應(yīng)用不多見
（3）使用 display: inline-block; 即可將元素轉(zhuǎn)換為 行內(nèi)塊元素
四、隱藏元素方法
| 屬性 | 功能 | 描述 |
| display:none; | 隱藏元素 | 可以將元素隱藏，子孫元素全部隱藏不可見，并且沒有任何辦法可見。元素隱藏后不會(huì)占空間。 |
| visibility:hidden; | 隱藏元素 | 將元素隱藏，子孫元素全部不可見，但是給子孫加上 visibility: visible;時(shí)，子孫可見。 隱藏后仍占其位置，會(huì)留下空白的一塊區(qū)域。（基本不用） |
補(bǔ)充：
（1）display 除 none 以外的值，均為顯示元素。
（2）visibility:visible; 為顯示元素
舉例：
display 的屬性值 none 可以用來隱藏元素，與visibility: hidden;功能相似，不同的是display: none;在隱藏元素的同時(shí)，它還會(huì)將元素所占的位置一并隱藏。display: none;通常會(huì)與 JavaScript 結(jié)合使用來隱藏或顯示某個(gè)元素，下面通過一個(gè)示例來演示一下：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 350px;
height: 100px;
background-color: #AAA;
}
</style>
</head>
<body>
<div id="box"> </div>
<button onclick="change_box(this)">隱藏</button>
<script>
function change_box(obj){
var box = document.getElementById('box');
if(box.style.display == 'none'){
box.style.display = "";
obj.innerHTML = "隱藏";
}else{
box.style.display = "none";
obj.innerHTML = "顯示";
}
}
</script>
</body>
</html>運(yùn)行結(jié)果：
五、兩種隱藏方法的區(qū)別
| 區(qū)別 | display: none | visibility: hidden |
| 空間占據(jù)性 | 不占據(jù)空間 | 占據(jù)原空間 |
| 回流與渲染性 | 會(huì)產(chǎn)生回流與重繪 | 不會(huì)產(chǎn)生回流，只會(huì)產(chǎn)生重繪 |
| 對(duì)子元素影響 | 子孫元素全部隱藏不可見。并且只要父元素隱藏，子孫沒有任何辦法可見 | 子孫元素全部不可見，但是給子孫加上 visibility: visible;時(shí)，子孫可見。 |
六、去掉行內(nèi)塊元素默認(rèn)的空白間隙
行內(nèi)塊元素間會(huì)默認(rèn)產(chǎn)生空隙。
產(chǎn)生間隙原因：
（1）元素被當(dāng)成行內(nèi)元素排版的時(shí)候，元素之間的空白符（空格、回車換行等）都會(huì)被瀏覽器處理
（2）根據(jù) white-space 的處理方式（默認(rèn)是 normal，合并多余空白），原來 HTML 代碼中的回車換行被轉(zhuǎn)成一個(gè)空白符，所以元素之間就出現(xiàn)了空隙。
（3）這些元素之間的間距會(huì)隨著字體的大小而變化
解決辦法：
（1）給父元素添加 font-size: 0px; 同時(shí)子元素重寫 font-size
font-size 屬性有繼承性，所以父元素 font-size:0; 會(huì)繼承到子元素 span，則子元素需要重新設(shè)置 font-size 大小
（2）給元素添加 float
元素添加 float 后，會(huì)脫離文檔流，父元素未添加高度時(shí)，會(huì)出現(xiàn)高度塌陷問題，則需要清除浮動(dòng)造成的問題。
（3）圖片間空隙，給圖片添加 display:block;
加了 display:block 之后，圖片成為塊級(jí)元素，獨(dú)占一行
C語言網(wǎng)提供由在職研發(fā)工程師或ACM藍(lán)橋杯競(jìng)賽優(yōu)秀選手錄制的視頻教程，并配有習(xí)題和答疑，點(diǎn)擊了解：
一點(diǎn)編程也不會(huì)寫的：零基礎(chǔ)C語言學(xué)練課程
解決困擾你多年的C語言疑難雜癥特性的C語言進(jìn)階課程
從零到寫出一個(gè)爬蟲的Python編程課程
只會(huì)語法寫不出代碼？手把手帶你寫100個(gè)編程真題的編程百練課程
信息學(xué)奧賽或C++選手的 必學(xué)C++課程
藍(lán)橋杯ACM、信息學(xué)奧賽的必學(xué)課程：算法競(jìng)賽課入門課程
手把手講解近五年真題的藍(lán)橋杯輔導(dǎo)課程