block element and inline element

標籤：and   cap   空格   資料   art   style   oom   table   out   

1. HTML 區塊層級元素（block element）

區塊層級元素總是在新的行上開始，並儘可能地佔據本行全部可用的寬度。

下面是咱學過的和沒學過的區塊層級元素的集合：
<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>~<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <output> <p> <pre> <section> <table> <tfoot> <ul> <video>

1. HTML 行內元素（inline element）

相反，行內元素不會另起一行，它也只佔用必要的寬度。

一言以蔽之：區塊層級元素講究排場，行內元素勤儉節約！（當然，也不是說誰好誰壞，元素無貴賤，存在即合理）

下面是咱學過的和沒學過的行內元素的集合：
<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>

2. 行內元素與區塊層級元素對比

一般情況下，行內元素只能包含資料和其他行內元素。

而區塊層級元素可以包含行內元素和其他區塊層級元素。

這種結構上的包含繼承區別可以使區塊層級元素建立比行內元素更”大型“的結構。


3. 為什麼要將內容分為塊級和行內？

多敲幾行代碼的朋友可能就會發現，無論你在 p 元素中敲了多少個空格和換行，在瀏覽器上都只顯示一個：

 1 …… 2     <p>黑夜給了我黑色的           3  4  5  6  7  8         <span>眼睛</span>，</p> 9     <p>我卻用它尋找     <span>光明</span>。</p>10 ……

 

這是因為 HTML 要求瀏覽器將連續的空白字元合并為一個空格，這種做法其實很有道理，因為這樣可以把 HTML 文檔的布局和文檔內容自身的布局給區別開來。

相當於你文檔中使用空格換行來達到所謂的美觀需求的布局，HTML 是不予理會的，如果你想要內容在網頁上以美美噠的形式展現出來，那好，請使用 HTML 的文法來實現。

block element and inline element