?
This document uses PHP Chinese website manual Release
在 HTML 中, 行內(nèi)元素是那些只占用定義元素的標(biāo)記所限定的空間, 而不是破壞內(nèi)容的流。在本文中, 我們將檢查 HTML 內(nèi)聯(lián)元素以及它們與塊級(jí)元素的區(qū)別。
行內(nèi)元素不會(huì)在新行上開始, 只需要盡可能多的寬度。
行內(nèi)元素與塊級(jí)元素對(duì)比
這是最容易用一個(gè)簡(jiǎn)單的例子來(lái)證明。首先,我們將使用一些簡(jiǎn)單的CSS:
.highlight {
background-color:#ee3;}行內(nèi)
首先,讓我們看看下面的示例,它演示了一個(gè)內(nèi)聯(lián)元素:
<p>The following span is an <span class="highlight">inline element</span>;its background has been colored to display both the beginning and end ofthe inline element's influence.</p>
在此示例中, <p> (段落) 塊級(jí)元素包含一些文本。在該文本中, 是一個(gè) <span> 元素, 它是一個(gè)內(nèi)聯(lián)元素。由于<span>元素是內(nèi)聯(lián)的,因此該段落正確呈現(xiàn)為單個(gè)完整的文本流,如下所述:
塊級(jí)別
現(xiàn)在,讓我們將該<span>更改為塊級(jí)元素,如<div>:
<p>The following div is an <div class="highlight">block-level element;</div>its background has been colored to display both the beginning and end ofthe block-level element's influence.</p>
使用與之前相同的CSS呈現(xiàn)，我們得到：
看到區(qū)別了嗎？<div> 元素完全更改文本的布局, 將其拆分為三段: 在 <div> 之前的文本, 然后是 <div> 的文本, 最后是后面的文本 <div>。
更改元素級(jí)別
您可以使用 "CSS 顯示" 屬性更改元素的級(jí)別。內(nèi)嵌塊, 通過(guò)將顯示的值從 "內(nèi)聯(lián)" 更改為 "block", 可以告訴瀏覽器在塊框中而不是在內(nèi)聯(lián)框中呈現(xiàn)內(nèi)聯(lián)元素。它不一定會(huì)使元素呈現(xiàn)出與原來(lái)的內(nèi)嵌塊完全一樣的效果, 因此請(qǐng)務(wù)必查看結(jié)果。
概念差異
簡(jiǎn)而言之,下面是內(nèi)聯(lián)和塊級(jí)元素之間的基本概念差異:
內(nèi)容模型。通常，內(nèi)聯(lián)元素可能只包含數(shù)據(jù)和其他內(nèi)聯(lián)元素。您不能將塊元素放在內(nèi)聯(lián)元素中.FormattingBy默認(rèn)情況下，內(nèi)聯(lián)元素不會(huì)強(qiáng)制在文檔流中開始一個(gè)新行。另一方面，塊元素通常會(huì)導(dǎo)致?lián)Q行（雖然像往常一樣，這可以使用CSS進(jìn)行更改）。
行內(nèi)元素列表
以下元素默認(rèn)為內(nèi)聯(lián)：
<a> <b> <big> <i> <small> <tt> <abbr> <acronym> <cite> <code> <dfn> <em> <kbd> <strong> <samp> <time> <var> <bdo> <br> <img> <map> <object> <q> <script> <span> <sub> <sup> <button> <input> <label> <select> <textarea>