探究行內(nèi)元素和塊級(jí)元素-創(chuàng)新互聯(lián)

在html中元素主要分為行內(nèi)元素和塊級(jí)元素

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

行內(nèi)元素

• 不獨(dú)占一行
• 書(shū)寫(xiě)完成后不會(huì)自動(dòng)換行
• 沒(méi)有寬和高

塊級(jí)元素

• 獨(dú)占一行
• 書(shū)寫(xiě)完會(huì)自動(dòng)換行
• 寬和高可以修改

還有一種特殊的元素叫作行內(nèi)塊級(jí)元素；

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

塊級(jí)元素和行內(nèi)元素的分類

html中的塊級(jí)元素：

---

標(biāo)簽	描述
<address>	定義地址。
<article>	定義文章。
<aside>	定義頁(yè)面內(nèi)容之外的內(nèi)容。
<audio>	定義聲音內(nèi)容。
<blockquote>	定義長(zhǎng)的引用。
<canvas>	定義圖形。
<caption>	定義表格標(biāo)題。
<dd>	定義定義列表中項(xiàng)目的描述。
<div>	定義文檔中的節(jié)。
<dl>	定義定義列表。
<dt>	定義定義列表中的項(xiàng)目。
`<details> 定義元素的細(xì)節(jié)。
&lt;fieldset&gt;	定義圍繞表單中元素的邊框。
&lt;figcaption&gt;	定義 figure 元素的標(biāo)題。
&lt;figure&gt;	定義媒介內(nèi)容的分組，以及它們的標(biāo)題。
&lt;footer&gt;	定義 section 或 page 的頁(yè)腳。
&lt;form&gt;	定義供用戶輸入的 HTML 表單。
&lt;h2&gt; to &lt;h7&gt;	定義 HTML 標(biāo)題。
&lt;header&gt;	定義 section 或 page 的頁(yè)眉。
&lt;hr&gt;	定義水平線。
&lt;legend&gt;	定義 fieldset 元素的標(biāo)題。
&lt;li&gt;	定義列表的項(xiàng)目。
&lt;menu&gt;	定義命令的列表或菜單。
&lt;meter&gt;	定義預(yù)定義范圍內(nèi)的度量。
&lt;nav&gt;	定義導(dǎo)航鏈接。
&lt;noframes&gt;	定義針對(duì)不支持框架的用戶的替代內(nèi)容。
&lt;noscript&gt;	定義針對(duì)不支持客戶端腳本的用戶的替代內(nèi)容。
&lt;ol&gt;	定義有序列表。
&lt;output&gt;	定義輸出的一些類型。
&lt;p&gt;	定義段落。
&lt;pre&gt;	定義預(yù)格式文本。
&lt;section&gt;	定義 section。
&lt;table&gt;	定義表格。
&lt;tbody&gt;	定義表格中的主體內(nèi)容。
&lt;td&gt;	定義表格中的單元。
&lt;tfoot&gt;	定義表格中的表注內(nèi)容（腳注）。
&lt;th&gt;	定義表格中的表頭單元格。
&lt;thead&gt;	定義表格中的表頭內(nèi)容。
&lt;time&gt;	定義日期/時(shí)間。
&lt;tr&gt;	定義表格中的行。
&lt;ul&gt;	定義無(wú)序列表。

html中的行內(nèi)元素：

---

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

實(shí)例

我們書(shū)寫(xiě)幾個(gè)span標(biāo)簽

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

我們?cè)贂?shū)寫(xiě)幾個(gè)div標(biāo)簽

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

此時(shí)div會(huì)變成行內(nèi)塊級(jí)元素，同時(shí)寬和高也在
因此 inline-block既有行內(nèi)元素水平排列的特點(diǎn)，也有塊級(jí)元素設(shè)置寬高的特點(diǎn)

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

關(guān)于行內(nèi)元素和塊級(jí)元素先談這么多，聽(tīng)說(shuō)認(rèn)真閱讀并點(diǎn)贊的你，代碼敲的最6哦~
有興趣的小伙伴可以加我微信，一起討論；V-x: dandanshen987

有一天，當(dāng)你明白"小白" +"勤奮"的時(shí)候，你就會(huì)成為大牛

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

名稱欄目：探究行內(nèi)元素和塊級(jí)元素-創(chuàng)新互聯(lián)
URL網(wǎng)址：http://bm7419.com/article16/ijddg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、網(wǎng)站內(nèi)鏈、靜態(tài)網(wǎng)站、外貿(mào)建站、用戶體驗(yàn)、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)