html中内联元素和块级元素的区别（整理版）
塊級元素和內聯元素的主要區別
| 塊級元素 | 內聯元素（即行內元素） |
| 總是在新行上開始，獨占一行默認情況下，寬度自動填滿其父元素 | 相鄰的行內元素會排列再同一行里，直到一行排不下，才會換行，寬度隨元素的內容而變化 |
| 可以設置width,height屬性 | 設置width，height屬性無效 |
| 可以設置magin,padding屬性 | 邊距起作用的以下幾個，其它不會起作用 margin-left|right|padding-left| right |
| 對應于display block | 對應于display:inline |
通過display屬性對行內元素和塊級元素進行切換?
| block | 此元素將顯示為塊級元素，此元素前后會帶有換行符。 |
| inline | 默認。此元素會被顯示為內聯元素，元素前后沒有換行符。 |
| inline-block | 行內塊元素。（CSS2.1 新增的值） |
?
塊級元素-按字母順序排列
| <address> | 定義地址。 |
| <area> | 圖像區域 |
| <article> | 定義文章。 |
| <aside> | 定義頁面內容之外的內容。 |
| <audio> | 定義聲音內容。 |
| <br> | 換行 |
| <blockquote> | 定義長的引用。 |
| <canvas> | 定義圖形。 |
| <caption> | 定義表格標題。 |
| <dd> | 定義定義列表中項目的描述。 |
| <div> | 定義文檔中的節。 |
| <dl> | 定義定義列表。 |
| <dt> | 定義定義列表中的項目。 |
| <details> | 定義元素的細節。 |
| <fieldset> | 定義圍繞表單中元素的邊框。 |
| <figcaption> | 定義 figure 元素的標題。 |
| <figure> | 定義媒介內容的分組，以及它們的標題。 |
| <footer> | 定義 section 或 page 的頁腳。 |
| <form> | 定義供用戶輸入的 HTML 表單。 |
| <h1> to <h6> | 定義 HTML 標題。 |
| <header> | 定義 section 或 page 的頁眉。 |
| <hr> | 定義水平線。 |
| <keygen> | 定義生成密鑰。 |
| <legend> | 定義 fieldset 元素的標題。 |
| <li> | 定義列表的項目。 |
| <menu> | 定義命令的列表或菜單。 |
| <meter> | 定義預定義范圍內的度量。 |
| <map> | 圖像區域 |
| <nav> | 定義導航鏈接。 |
| <noframes> | 定義針對不支持框架的用戶的替代內容。 |
| <noscript> | 定義針對不支持客戶端腳本的用戶的替代內容。 |
| <ol> | 定義有序列表。 |
| <output> | 定義輸出的一些類型。 |
| <p> | 定義段落。 |
| <pre> | 定義預格式文本。 |
| <progress> | 定義任何類型的任務的進度。 |
| <section> | 定義 section。 |
| <source> | 媒介源 |
| <table> | 定義表格。 |
| <tbody> | 定義表格中的主體內容。 |
| <td> | 定義表格中的單元。 |
| <tfoot> | 定義表格中的表注內容（腳注）。 |
| <th> | 定義表格中的表頭單元格。 |
| <thead> | 定義表格中的表頭內容。 |
| <time> | 定義日期/時間。 |
| <track> | 定義用在媒體播放器中的文本軌道。 |
| <tr> | 定義表格中的行。 |
| <ul> | 定義無序列表。 |
?
內聯元素有
| <a> | 定義錨。 |
| <abbr> | 定義縮寫。 |
| <acronym> | 定義只取首字母的縮寫。 |
| <b> | 定義粗體字 |
| <bdo> | 定義文字方向。 |
| <big> | 定義大號文本。 |
| <br> | 定義簡單的折行。 |
| <button> | 定義按鈕 (push button)。 |
| <cite> | 定義引用(citation)。 |
| <code> | 定義計算機代碼文本。 |
| <command> | 定義命令按鈕。 |
| <dfn> | 定義定義項目。 |
| <del> | 定義被刪除文本。 |
| <em> | 定義強調文本。 |
| <embed> | 定義外部交互內容或插件。 |
| <i> | 定義斜體字。 |
| <img> | 定義圖像。 |
| <input> | 定義輸入控件。 |
| <kbd> | 定義鍵盤文本。 |
| <label> | 定義 input 元素的標注。 |
| <map> | 定義圖像映射。 |
| <mark> | 定義有記號的文本。 |
| <objec> | 定義內嵌對象。 |
| <q> | 定義短的引用。 |
| <samp> | 定義計算機代碼樣本。 |
| <summary> | 定義 details 元素的標題。 |
| <select> | 定義選擇列表（下拉列表）。 |
| <small> | 定義小號文本。 |
| <span> | 定義文檔中的節。 |
| <strong> | 定義強調文本。 |
| <sub> | 定義下標文本。 |
| <sup> | 定義上標文本。 |
| <textarea> | 定義多行的文本輸入控件。 |
| <time> | 定義日期/時間。 |
| <tt> | 定義打字機文本。 |
| <var> | 定義文本的變量部分。 |
| <video> | 定義視頻。 |
| <wbr> | 定義可能的換行符。 |
替換元素就是瀏覽器根據元素的標簽和屬性，來決定元素的具體顯示內容。
?例如瀏覽器會根據<img>標簽的src屬性的值來讀取圖片信息并顯示出來，而如果查看html代碼，則看不到圖片的實際內容；又例如根據<input>標簽的type屬性來決定是顯示輸入框，還是單選按鈕等。?html中的<img>、<input>、<textarea>、<select>、<object>都是替換元素。這些元素往往沒有實際的內容，即是一個空元素，例如：?<img src=”cat.jpg” /> <input type="submit" name="submit" value="提交" />?瀏覽器會根據元素的標簽類型和屬性來顯示這些元素。可替換元素也在其顯示中生成了框。?
不可替換元素?html 的大多數元素是不可替換元素，即其內容直接表現給用戶端（例如瀏覽器）。
例如：?<p>段落的內容</p>?段落<p>是一個不可替換元素，文字“段落的內容”全被顯示。
demo
<html> <head> <style>#div1{background-color: red; border: 1px solid black;display: inline;margin: 100px;//內聯元素只有左右外邊距有效width: 100px;//內聯元素寬高是有內容決定的height: 100px;//內聯元素寬高是有內容決定的，line-height也可以設置高度}#div2{width: 100px;height: 100px;background-color: green;margin: 100px;} </style> </head><body><div id="div1">12345</div><div id="div2">122</div></body></html>?
總結
以上是生活随笔為你收集整理的html中内联元素和块级元素的区别（整理版）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 苹果手机长截屏_涨知识了！原来苹果手机也
- 下一篇： nicescroll.js滚动条错位