探究行內元素和塊級元素

標籤（空格分隔）： CSS

---

在html中元素主要分爲行內元素和塊級元素

行內元素

• [x] 不獨佔一行
• [x] 書寫完成後不會自動換行
• [x] 沒有寬和高

塊級元素

• [x] 獨佔一行
• [x] 書寫完會自動換行
• [x] 寬和高能夠修改

還有一種特殊的元素叫做行內塊級元素；

值	描述
none	此元素不會被顯示。
block	此元素將顯示爲塊級元素，此元素先後會帶有換行符。
inline	默認。此元素會被顯示爲內聯元素，元素先後沒有換行符。
inline-block	行內塊元素。（CSS2.1 新增的值）
list-item	此元素會做爲列表顯示。

塊級元素和行內元素的分類

html中的塊級元素：

---

標籤	描述
<address>	定義地址。
<article>	定義文章。
<aside>	定義頁面內容以外的內容。
<audio>	定義聲音內容。
<blockquote>	定義長的引用。
<canvas>	定義圖形。
<caption>	定義表格標題。
<dd>	定義定義列表中項目的描述。
<div>	定義文檔中的節。
<dl>	定義定義列表。
<dt>	定義定義列表中的項目。
`<details> 定義元素的細節。
<fieldset>	定義圍繞表單中元素的邊框。
<figcaption>	定義 figure 元素的標題。
<figure>	定義媒介內容的分組，以及它們的標題。
<footer>	定義 section 或 page 的頁腳。
<form>	定義供用戶輸入的 HTML 表單。
<h1> to <h6>	定義 HTML 標題。
<header>	定義 section 或 page 的頁眉。
<hr>	定義水平線。
<legend>	定義 fieldset 元素的標題。
<li>	定義列表的項目。
<menu>	定義命令的列表或菜單。
<meter>	定義預約義範圍內的度量。
<nav>	定義導航連接。
<noframes>	定義針對不支持框架的用戶的替代內容。
<noscript>	定義針對不支持客戶端腳本的用戶的替代內容。
<ol>	定義有序列表。
<output>	定義輸出的一些類型。
<p>	定義段落。
<pre>	定義預格式文本。
<section>	定義 section。
<table>	定義表格。
<tbody>	定義表格中的主體內容。
<td>	定義表格中的單元。
<tfoot>	定義表格中的表注內容（腳註）。
<th>	定義表格中的表頭單元格。
<thead>	定義表格中的表頭內容。
<time>	定義日期/時間。
<tr>	定義表格中的行。
<ul>	定義無序列表。

html中的行內元素：

---

標籤	描述
<a>	定義錨。
<abbr>	定義縮寫。
<acronym>	定義只取首字母的縮寫。
<b>	定義粗體字
<bdo>	定義文字方向。
<big>	定義大號文本。
<br>	定義簡單的折行。
<button>	定義按鈕 (push button)。
<cite>	定義引用(citation)。
<code>	定義計算機代碼文本。
<command>	定義命令按鈕。
<dfn>	定義定義項目。
<del>	定義被刪除文本。
<em>	定義強調文本。
<embed>	定義外部交互內容或插件。
<i>	定義斜體字。
<img>	定義圖像。
<input>	定義輸入控件。
<kbd>	定義鍵盤文本。
<label>	定義 input 元素的標註。
<map>	定義圖像映射。
<mark>	定義有記號的文本。
<objec>	定義內嵌對象。
<progress>	定義任何類型的任務的進度。
<q>	定義短的引用。
<samp>	定義計算機代碼樣本。
<select>	定義選擇列表（下拉列表）。
<small>	定義小號文本。
<span>	定義文檔中的節。
<strong>	定義強調文本。
<sub>	定義下標文本。
<sup>	定義上標文本。
<textarea>	定義多行的文本輸入控件。
<time>	定義日期/時間。
<tt>	定義打字機文本。
<var>	定義文本的變量部分。
<video>	定義視頻。
<wbr>	定義可能的換行符。

實例

咱們書寫幾個span標籤

能夠看到幾個span都出如今了一行內

咱們再書寫幾個div標籤

能夠看到div已經垂直了(不在一行內)
繼續：咱們給div添加一個剛纔提到的特殊元素：行內塊級元素inline-block

此時div會變成行內塊級元素，同時寬和高也在
所以 inline-block既有行內元素水平排列的特色，也有塊級元素設置寬高的特色

• 仔細看上圖，會發現水平方向有一個bug，有一個間隔 空閒時間能夠去百度下hack~
• 解決辦法：
• ①margin:-3px ②position：relitive;left:-3px;

關於行內元素和塊級元素先談這麼多，據說認真閱讀並點讚的你，代碼敲的最6哦~
有興趣的小夥伴能夠加我微信，一塊兒討論；V-x: dandanshen987

有一天，當你明白"小白" +"勤奮"的時候，你就會成爲大牛