HTML之元素分類

一.按照塊級元素還是行內元素分類

塊級元素（block-level）和行內元素（inline-level，也叫作“內聯”元素）。

a.塊級元素（獨占一行）

塊級元素：其最明顯的特征就是它默認在橫向充滿其父元素的內容區域，而且在其左右兩邊沒有其他元素，即塊級元素默認是獨占一行的。典型的塊級元素有： p ， p ， h1 ~ h6 ， ul 等等。

b.行內元素（可以與其他元素共享一行）

行內元素：行內元素不形成新內容塊，即在其左右可以有其他元素，例如 a 、 span 、 strong 等，都是典型的行內級元素。display屬性等于“inline”的元素都是行內元素。幾乎所有的可替換元素都是行內元素，例如 img 、 input 等等。

PS：（塊級和行內可以相互轉換）：通過設定CSS的display屬性，可以使行內元素變為塊級元素:display:block;也可以讓塊級元素變為行內元素:display:inline。

*塊級元素和行內元素的區別：

1.塊級元素會獨占一行，其寬度自動填滿其父元素寬度;行內元素不會獨占一行，相鄰的行內元素會排列在同一行里，知道一行排不下，才會換行，其寬度隨元素的內容而變化

2.一般情況下，塊級元素可以設置 width,height屬性，行內元素設置width,height無效。

3.塊級元素可以設置margin 和 padding. 行內元素的水平方向的padding-left,padding-right,margin-left,margin-right 都產生邊距效果，但是豎直方向的padding-top,padding-bottom,margin-top,margin-bottom都不會產生邊距效果。（水平方向有效，豎直方向無效）。

二. 按照替換和不可替換元素分類

當然除按照塊級和行內元素來分，也可以用是否為可替換元素來分。

a.替換元素（該元素可以根據某屬性的改變而產生不同的顯示效果）

替換元素：瀏覽器根據元素的標簽和屬性，來決定元素的具體顯示內容。

舉個栗子：瀏覽器會根據 img 標簽的src屬性的值來讀取圖片信息并顯示出來，而如果查看(X)HTML代碼，則看不到圖片的實際內容；又例如根據 input 標簽的type屬性來決定是顯示輸入框，還是單選按鈕等。

(X)HTML中的 img 、 input 、 textarea 、 select 、 object 都是替換元素。這些元素往往沒有實際的內容，即是一個空元素

b.不可替換元素

不可替換元素：(X)HTML 的大多數元素是不可替換元素，即其內容直接表現給用戶端。

ps：一般行內元素設置寬和高是沒用的，那為什么input或者是img等一些行內元素可以設置width，height？

因為input，img等都是替換元素，替換元素有一般有內在尺寸，所以具有width和height，可以設定，是比較特殊的。當我們不設置它們的寬度和高度時，瀏覽器會給出默認的寬高。舉個栗子： input type= text input的文本輸入框形式就會給出默認的寬高。但我們可以改變他的width，height。

以上就是HTML之元素分類的詳細介紹的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。