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

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

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

塊級元素 (block)

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

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

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

塊級元素適用于頁面的結構布局，作為內容的容器等。

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

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

效果如下：

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

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

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

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

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

<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>

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

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

效果如下：

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

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

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

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

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

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

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

效果如下：

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

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

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

總結

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

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

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