寫在前面，作者首頁有前端專欄，詳細分享相關知識，有興趣的不妨點個收藏 ~~~~
CSS元素顯示模式display
標簽顯示模式是標簽以什么方式進行顯示，HTML標簽一般分為塊標簽和行內標簽兩種型別，它們也稱為塊元素和行內元素，
「1. 塊級元素(block-level)」
常見的塊元素有< h1>~< h6>、< p>、< div>、< ul>、 < ol>、< li>等，其中< div>標簽是最典型的塊元素，
- 塊級元素的特點
-
比較霸道，自己獨占一行
-
高度，寬度，外邊距以及內邊距都可以控制，
-
寬度默認是容器(父級寬度)的100%
-
是一個容器及盒子，里面可以放行內或者塊級元素
-
注意：
- 文字類的元素內不能使用塊級元素
<p>標簽主要用于存放文字，因此<p>里面不能放塊級元素，特別是不能放<div>- 同理，
<h1> ~ <h6>等都是文字類塊級標簽，里面也不能放其他塊級元素，
「2. 行內元素(inline-level)」
有的地方也稱為
行內元素常見的行內元素有< a>、< strong>、< b>、< em>、< i>、< del>、< s>、< ins>、< u>、< span>等，其中< span>標簽最典型的行內元素，
-
行內元素的特點
-
- 相鄰行內元素在一行上，一行可以顯示多個，
- 高度、寬度直接設定是無效的，
- 默認高度就是它本身內容的寬度，
- 行內元素只能容納文本或其他行內元素，
注意
- 鏈接里面不能再放鏈接
- 特殊情況a里面可以放塊級元素，但是給a轉換一下塊級模式最安全，
「3. 行內塊元素(inline-block)」
在行內元素中有幾個特殊的標簽——< img>、< input >、 < td>，同時具有塊元素和行內元素的屬性，有些資料可能會稱它們為行內塊元素，
-
行內塊元素的特點
-
- 和相鄰行內元素(行內塊)在一行上，但是之間會有空白縫隙，一行可以顯示多個（行內元素特點），
- 默認寬度就是它本身內容的寬度（行內元素特點），
- 高度，行高，外邊距以及內邊距都可以控制（塊元素特點），
三種模式總結
| 元素模式 | 元素排列 | 設定樣式 | 默認寬度 | 包含 |
|---|---|---|---|---|
| 塊級元素 | 一行只能放一個塊級元素 | 可以設定寬度高度 | 容器的100% | 容器級可以包含任何標簽 |
| 行內元素 | 一行可以放多個行內元素 | 不可以直接設定寬度高度 | 它本身內容的寬度 | 容納文本或則其他行內元素 |
| 行內塊元素 | 一行放多個行內塊元素 | 可以設定寬度和高度 | 它本身內容的寬度 |
標簽顯示模式轉換 display
一個模式的元素需要另外一種模式的特性，
- 塊轉行內：
display: inline; - 行內轉塊：
display: block; - 塊、行內元素轉換為行內塊：
display: inline-block;
小技巧：單行文字垂直居中的代碼
讓文字的行高等于盒子的高度，就可以實作文字在當前盒子里垂直居中，
a {
display: block;
height: 40px;
line-height: 40px;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/398441.html
標籤：其他
上一篇：計算噪聲影像中的物件
下一篇：R語言ggplot2可視化使用ggplotly(plotly version of R)可視化散點圖（scatter plot）