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

創(chuàng)新互聯(lián)建站是網(wǎng)站建設技術企業(yè)，為成都企業(yè)提供專業(yè)的成都做網(wǎng)站、成都網(wǎng)站制作，網(wǎng)站設計，網(wǎng)站制作，網(wǎng)站改版等技術服務。擁有十余年豐富建站經(jīng)驗和眾多成功案例，為您定制適合企業(yè)的網(wǎng)站。十余年品質，值得信賴！

行內元素

• 不獨占一行
• 書寫完成后不會自動換行
• 沒有寬和高

塊級元素

• 獨占一行
• 書寫完會自動換行
• 寬和高可以修改

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

值	描述
none	此元素不會被顯示。
block	此元素將顯示為塊級元素，此元素前后會帶有換行符。
inline	默認。此元素會被顯示為內聯(lián)元素，元素前后沒有換行符。
inline-block	行內塊元素。（CSS2.1 新增的值）
list-item	此元素會作為列表顯示。

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

html中的塊級元素：

---

標簽	描述
<address>	定義地址。
<article>	定義文章。
<aside>	定義頁面內容之外的內容。
<audio>	定義聲音內容。
<blockquote>	定義長的引用。
<canvas>	定義圖形。
<caption>	定義表格標題。
<dd>	定義定義列表中項目的描述。
<div>	定義文檔中的節(jié)。
<dl>	定義定義列表。
<dt>	定義定義列表中的項目。
` 定義元素的細節(jié)。
<fieldset>	定義圍繞表單中元素的邊框。
<figcaption>	定義 figure 元素的標題。
<figure>	定義媒介內容的分組，以及它們的標題。
<footer>	定義 section 或 page 的頁腳。
<form>	定義供用戶輸入的 HTML 表單。
<h2> to <h7>	定義 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>	定義文檔中的節(jié)。
<strong>	定義強調文本。
<sub>	定義下標文本。
<sup>	定義上標文本。
<textarea>	定義多行的文本輸入控件。
<time>	定義日期/時間。
<tt>	定義打字機文本。
<var>	定義文本的變量部分。
<video>	定義視頻。
<wbr>	定義可能的換行符。

實例

我們書寫幾個span標簽

可以看到幾個span都出現(xiàn)在了一行內

我們再書寫幾個div標簽

可以看到div已經(jīng)垂直了(不在一行內)
繼續(xù)：我們給div添加一個剛才提到的特殊元素：行內塊級元素inline-block

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

• 仔細看上圖，會發(fā)現(xiàn)水平方向有一個bug，有一個間隔 空閑時間可以去百度下hack~
• 解決辦法：
• ①margin:-3px ②position：relitive;left:-3px;

關于行內元素和塊級元素先談這么多，聽說認真閱讀并點贊的你，代碼敲的最6哦~
有興趣的小伙伴可以加我微信，一起討論；V-x: dandanshen987

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

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

本文名稱：探究行內元素和塊級元素-創(chuàng)新互聯(lián)
文章鏈接：http://weahome.cn/article/ijddg.html