行內元素與區塊層級元素的區別詳細介紹

首先，CSS規範規定，每個元素都有display屬性，確定該元素的類型，每個元素都有預設的display值，分別為塊級（block）、行內（inline）。

區塊層級元素：（以下列舉比較常用的區塊層級元素，詳情可在w3cschool查詢）

<p>定義文檔中的分區或節   <h1>定義最大的標題   <h2>定義副標題   <h3>定義標題   <h4>定義標題   <h5>定義標題   <h6>定義最小的標題   <ul>定義無序列表   <ol>定義有序列表   <li>定義有序列表或無序列表的清單項目   <dl>定義自訂欄表   <dd>定義自訂欄表中的條目   <dt>定義自訂欄表中的項目   <hr>建立一條水平線   <p>定義段落   <table>定義表格   <td>表格中的標準儲存格   <th>定義表頭儲存格   <thead>標籤定義表格的表頭   <tr>定義表格中的行

行內元素：（以下列舉比較常用的行內元素，詳情可在w3cschool查詢）

<a>定義超連結   <b>字型加粗   <span>定義在文檔中的行內元素   <img>向網頁中插入題映像   <input>輸入框   <small>小號字型效果   <br>換行   <big>字型加大加粗   <strong>強調的語氣   <select>建立單選或多選菜單   <textarea>定義文本域，多行的文本輸入控制項

行內元素與區塊層級元素的區別：

1.行內元素與塊級函數可以相互轉換，通過修改display屬性值來切換區塊層級元素和行內元素，行內元素display：inline，區塊層級元素display：block。

2.行內元素和其他行內元素都會在一條水平線上排列，都是在同一行的；

　區塊層級元素卻總是會在新的一行開始排列，各個區塊層級元素獨佔一行，垂直向下排列，若想使其水平方向排序，可使用左右浮動（float：left/right）讓其水平方向排列。

3.行內元素不可以設定寬高，寬度高度隨常值內容的變化而變化，但是可以設定行高（line-height），同時在設定外邊距margin上下無效，左右有效，內填充padding上下無效，左右有效；

　區塊層級元素可以設定寬高，並且寬度高度以及外邊距，內填充都可隨意控制。

4.區塊層級元素可以包含行內元素和區塊層級元素，還可以容納內嵌元素和其他元素；

　行內元素不能包含區塊層級元素，只能容納文本或者其他行內元素。

以上這篇全面瞭解行內元素與區塊層級元素的區別就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援topic.alibabacloud.com。