內容：
1.display介紹
2.display分類
3.塊級標簽和內聯標簽
4.inline-block應用
1.display介紹
display：display屬性設置元素如何被顯示
2.display分類
(1)display分類
- display: none; -- 讓標簽消失(隱藏元素並脫離文檔流)
- display: inline; -- 內聯元素(內聯表簽)
- display: block; -- 塊級元素(塊級標簽)
- display: inline-block; -- 既有inline的屬性也有block屬性
(2)塊級元素和內聯元素
block元素：
- block元素會獨占一行，多個block元素會各自新起一行。默認情況下，block元素寬度自動填滿其父元素寬度
- block元素可以設置width和height屬性。塊級元素即使設置了寬度,仍然是獨占一行
- block元素也可以設置margin和padding屬性
inline元素：
- inline元素不會獨占一行，多個相鄰的行內元素會排列在同一行里，直到一行排列不下，才會新換一行
- inline元素的寬度是自身內容的寬度(默認有多少占多少)
- inline元素設置width和height屬性無效
- inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。
inline-block元素：
簡單來說就是將對象呈現為inline對象，但是對象的內容作為block對象呈現。之后的內聯對象會被排列在同一行內。比如我們可以給一個link（a元素）設置inline-block屬性，使其既具有block的可設置寬度和高度特性又具有inline的同行特性
3.塊級標簽與內聯標簽(塊級元素和內聯元素)
(1)塊級標簽與內聯標簽實例
1 <!--__author__ = "wyb"-->
2 <!DOCTYPE html>
3 <html lang="en">
4 <head>
5 <meta charset="UTF-8">
6 <title>塊級標簽和內聯標簽</title>
7 <style>
8 div, p, span{
9 width: 100px;
10 height: 100px;
11 }
12 div{
13 background: red;
14 }
15 p{
16 background: #747F8C;
17 }
18 span{
19 background: #41db50;
20 }
21 </style>
22 </head>
23 <body>
24 <div>div(塊級標簽) </div>
25 <p>p(塊級標簽)</p>
26 <span>span(內聯標簽)</span>
27 </body>
28 </html>
(2)塊級標簽和內聯標簽通過display轉換
1 <!--__author__ = "wyb"-->
2 <!DOCTYPE html>
3 <html lang="en">
4 <head>
5 <meta charset="UTF-8">
6 <title>塊級標簽和內聯標簽通過display轉換</title>
7 <style>
8 .inline{
9 background: red;
10 display: inline;
11 }
12 .block{
13 background: red;
14 display: block;
15 }
16 </style>
17 </head>
18 <body>
19 <!--將塊級標簽變成行內標簽-->
20 <div class="inline">div</div>
21 <!--將行內標簽變成塊級標簽-->
22 <span class="block">span</span>
23 </body>
24 </html>
4.inline-block應用
display:inline-block可做列表布局，其中的類似於圖片間的間隙小bug可以通過如下設置解決：
1 #outer{
2 border: 3px dashed;
3 word-spacing: -6px;
4 }