元素的顯示模式（display）
HTML的顯示模式有很多種，常見的有block、inline、inline-block、table、form等，HTML5又新增了flex；
| 值 | 描述 |
|---|---|
| none | 此元素不會被顯示。 |
| block | 此元素將顯示為塊級元素，此元素前后會帶有換行符。 |
| inline | 默認。此元素會被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符。 |
| inline-block | 行內(nèi)塊元素。（CSS2.1 新增的值） |
| list-item | 此元素會作為列表顯示。 |
| run-in | 此元素會根據(jù)上下文作為塊級元素或內(nèi)聯(lián)元素顯示。 |
| compact | CSS 中有值 compact，不過由于缺乏廣泛支持，已經(jīng)從 CSS2.1 中刪除。 |
| marker | CSS 中有值 marker，不過由于缺乏廣泛支持，已經(jīng)從 CSS2.1 中刪除。 |
| table | 此元素會作為塊級表格來顯示（類似 <table>），表格前后帶有換行符。 |
| inline-table | 此元素會作為內(nèi)聯(lián)表格來顯示（類似 <table>），表格前后沒有換行符。 |
| table-row-group | 此元素會作為一個或多個行的分組來顯示（類似<tbody>）。 |
| table-header-group | 此元素會作為一個或多個行的分組來顯示（類似 <thead>）。 |
| table-footer-group | 此元素會作為一個或多個行的分組來顯示（類似 <tfoot>）。 |
| table-row | 此元素會作為一個表格行顯示（類似 <tr>）。 |
| table-column-group | 此元素會作為一個或多個列的分組來顯示（類似 <colgroup>）。 |
| table-column | 此元素會作為一個單元格列顯示（類似 <col>） |
| table-cell | 此元素會作為一個表格單元格顯示（類似 <td> 和 <th>） |
| table-caption | 此元素會作為一個表格標題顯示（類似 <caption>） |
| inherit | 規(guī)定應(yīng)該從父元素繼承 display 屬性的值。 |
其中，使用最多的為block、inline、和inline-block，以及flex，flex的顯示模式較為復(fù)雜暫且不表，這里我們詳細說一下前三種。
block（塊級元素）
- 元素可以直接設(shè)置寬度和高度
- 元素默認寬度100%，默認高度自適應(yīng)
- 元素獨占一整行
常見的塊級元素有：
- address - 地址
- blockquote - 塊引用
- center - 舉中對齊塊
- dir - 目錄列表
- div - 常用塊級容易，也是css layout的主要標簽
- dl - 定義列表
- fieldset - form控制組
- form - 交互表單
- h1 - 大標題
- h2 - 副標題
- h3 - 3級標題
- h4 - 4級標題
- h5 - 5級標題
- h6 - 6級標題
- hr - 水平分隔線
- isindex - input prompt
- menu - 菜單列表
- noframes - frames可選內(nèi)容，（對于不支持frame的瀏覽器顯示此區(qū)塊內(nèi)容
- noscript - ）可選腳本內(nèi)容（對于不支持script的瀏覽器顯示此內(nèi)容）
- ol - 排序表單
- p - 段落
- pre - 格式化文本
- table - 表格
- ul - 非排序列表
inline（行內(nèi)元素）
- 元素不可以直接設(shè)置寬度和高度
- 元素默認寬度自適應(yīng)，默認高度自適應(yīng)
- 元素可以和其他元素共處一行
- a - 錨點
- abbr - 縮寫
- acronym - 首字
- b - 粗體(不推薦)
- bdo - bidi override
- big - 大字體
- br - 換行
- cite - 引用
- code - 計算機代碼(在引用源碼的時候需要)
- dfn - 定義字段
- em - 強調(diào)
- font - 字體設(shè)定(不推薦)
- i - 斜體
- img - 圖片
- input - 輸入框
- kbd - 定義鍵盤文本
- label - 表格標簽
- q - 短引用
- s - 中劃線(不推薦)
- samp - 定義范例計算機代碼
- select - 項目選擇
- small - 小字體文本
- span - 常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊
- strike - 中劃線
- strong - 粗體強調(diào)
- sub - 下標
- sup - 上標
- textarea - 多行文本輸入框
- tt - 電傳文本
- u - 下劃線
- var - 定義變量
inline-block（行塊元素）
- 元素可以直接設(shè)置寬度和高度
- 元素默認寬度自適應(yīng)，默認高度自適應(yīng)
- 元素可以和其他元素共處一行
- input
- textarea
為什么（什么情況下）要使用display轉(zhuǎn)換顯示模式
- 元素本身是行內(nèi)元素，但是需要給他設(shè)置寬高的時候，需要轉(zhuǎn)換為
block或者inline-block - 元素本身是塊級元素，但是現(xiàn)在有多個同等級元素想要同一排顯示時，需要轉(zhuǎn)換為
inline或者inline-block - 元素內(nèi)部的結(jié)構(gòu)較為復(fù)雜（如一個a標簽內(nèi)部需要放一個無序列表）時，需要轉(zhuǎn)換為
block或者inline-block - 元素需要設(shè)置
margin或者padding時，最好將這個元素轉(zhuǎn)為塊級元素。
為什么要轉(zhuǎn)換顯示模式？
在大多數(shù)情況下，布局通常使用塊級元素，少部分需要橫排顯示且需要設(shè)置寬高的小型元素需要使用行塊元素，同一行內(nèi)需要有特殊樣式顯示的文字使用行內(nèi)元素。
image.png
如圖分為上下兩個模塊。
這兩種模塊均為頁面的主體結(jié)構(gòu)且獨占一行，所以使用塊級元素搭建；
第一行內(nèi)有網(wǎng)頁、新聞、貼吧等選項，由于是幾個相同的元素放在同一行顯示，所以可以使用行塊元素，也可以使用塊級元素然后浮動；
下半部分一段文字中有幾個文字是和其他文字顯示顏色不同的，所以為了不影響整體排版，這種特殊標出的文字需要使用行內(nèi)元素標注，然后單獨設(shè)置樣式。
display的用法
- 通過直接給元素設(shè)置
display:block即可將這個元素轉(zhuǎn)換成塊級元素，絕大多數(shù)元素可以直接通過這種方式轉(zhuǎn)換，少部分元素不可轉(zhuǎn)換。
<a href="">點擊跳轉(zhuǎn)</a>
我的頁面中寫入了一個a標簽，在頁面中的顯示如上圖所示。
現(xiàn)在我想將這個a標簽轉(zhuǎn)換為圓形，所以我需要給他設(shè)置這樣的樣式：
a{
width: 100px;
height: 100px;
border: 1px solid red;
border-radius: 50%;
}
這時，在頁面中顯示出的效果是這樣的：
a標簽
這是由于a標簽是一個行內(nèi)元素，雖然我們給他設(shè)置了寬度和高度，但是它還是會依照自己的內(nèi)容尺寸算出當前標簽的大小，所以我們需要再將它轉(zhuǎn)成塊級元素，才能正常設(shè)置寬度和高度，從而實現(xiàn)我們想要的排版效果
a{
width: 100px;
height: 100px;
border: 1px solid red;
border-radius: 50%;
display: block;
line-height: 100px;
text-align: center;
}
image.png
