大多數(shù) HTML 元素被定義成 塊級元素(block) 、 內(nèi)聯(lián)元素(inline)以及內(nèi)聯(lián)塊級元素(inline-block)。

這些不同元素的定義，用于頁面內(nèi)容的設(shè)計(jì)呈現(xiàn)。

通過我們以元素 div 和 span 作為例子，來講述塊級元素(div)和內(nèi)聯(lián)元素(span)。

塊級元素 (block)

塊級元素 在瀏覽器呈現(xiàn)時(shí)，以新行來開始結(jié)束。簡單理解為，它與前面和后面的內(nèi)容之間有回車。

所以它獨(dú)占一行，并可以設(shè)置寬度，高度，邊距等樣式。這些樣式的設(shè)定，通常使用 CSS 實(shí)現(xiàn)。

在后面的示例中，我們都使用 CSS 來設(shè)置元素的樣式，以方展示它們的特性。

塊級元素適用于頁面的結(jié)構(gòu)布局，作為內(nèi)容的容器等。

除了 div，如下元素也是塊級元素，了解一下就好，需要時(shí)再查。

<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1> - <h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video>

塊級元素 div 示例

<div style="background-color: red; ">這是第一個(gè)塊狀元素。</div> <div style="background-color: red; ">這是第二個(gè)塊狀元素。</div> <br /> <div style="background-color: red; height: 40px; width: 300px;">   這是第三個(gè)塊狀元素, 指定了高度為40px. </div> 

效果如下：

這個(gè)示例使用了嵌入式 CSS，指定背景色(background-color)，寬度(width) 和高度 (height)。

可以清楚地看到，塊級元素，默認(rèn)占滿顯示寬度，所以第二個(gè)塊狀元素在第一個(gè)下面（新行，獨(dú)占一行。），且寬度和高度都可以通過 CSS 指定（第三個(gè)塊狀元素）。

內(nèi)聯(lián)元素 (inline)

內(nèi)聯(lián)元素 在瀏覽器呈現(xiàn)時(shí)，不會(huì)以新行開始。也稱為行內(nèi)元素，不會(huì)獨(dú)占一行，寬度由其內(nèi)容決定。不可設(shè)定寬度和高度。

內(nèi)聯(lián)元素除了典型的 span，其它的還有如下，同樣，了解一下即可，需要的時(shí)候查看。

<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <output> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>

內(nèi)聯(lián)元素 span 示例

<span style="background-color: green;">這是第一個(gè)內(nèi)聯(lián)元素.</span> <span style="background-color: green;">這是第二個(gè)內(nèi)聯(lián)元素.</span> <br /> <span style="background-color: green; height: 40px; width: 300px;"   >這是第三個(gè)內(nèi)聯(lián)元素, 指定了高度為40px.</span > 

效果如下：

同樣使用了 CSS 對背景色(background-color)，寬度(width) 和高度 (height)進(jìn)行指定。

和塊級元素不同，內(nèi)聯(lián)元素并沒有占滿一行，所以第二個(gè)內(nèi)聯(lián)元素顯示在了第一個(gè)后面，默認(rèn)有間距。

同時(shí)也能看到，即使為內(nèi)聯(lián)元素指定了寬度和高度，也沒有起作用（第三個(gè)內(nèi)聯(lián)元素）。

內(nèi)聯(lián)塊級元素 (inline-block)

內(nèi)聯(lián)塊級元素和內(nèi)聯(lián)元素類似，唯一的不同，是它可以指定寬度和高度。

這里我們拿 span 元素，通過 CSS 改變它的顯示，從 inline 到 inline-block，對比上面的示例，可以看到明顯的差別。

<span style="display: inline-block; background-color: green;"   >這是第一個(gè)內(nèi)聯(lián)塊級元素.</span > <span style="display: inline-block; background-color: green;"   >這是第二個(gè)內(nèi)聯(lián)塊級元素.</span > <br /> <span   style="display: inline-block; background-color: green; height: 40px; width: 400px;"   >這是第三個(gè)內(nèi)聯(lián)塊級元素, 指定了高度為40px. </span> 

效果如下：

上述代碼只是增加了 dipslay，把 span 從 inline 修改成了 inline-block。

這樣指定之后，可以看到第三個(gè) span 指定的高度和寬度都生效了。

同時(shí)也注意到，第三個(gè) span 與上面的之間沒有了間距。這些細(xì)節(jié)在后面的 CSS 里再講述。

總結(jié)

• ?? 塊級元素(block)總是開始新行并占據(jù)整個(gè)寬度，它的寬度和高度可以修改。

• ?? 內(nèi)聯(lián)元素(inline) 不獨(dú)占一行，且寬度取決于它的內(nèi)容，賽諾和高度不可修改。

• ?? 內(nèi)聯(lián)塊級元素(inline-block)與內(nèi)聯(lián)元素類似，唯一的區(qū)別是它的高度和寬度和 block 一樣可以修改。