HTML之元素分類（HTML基礎知識）

本文轉載於:猿2048網站➪HTML之元素分類（HTML基礎知識）

HTML之元素分類

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

塊級元素（block-level）和行內元素（inline-level，也叫做「內聯」元素）。

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

塊級元素：其最明顯的特徵就是它默認在橫向充滿其父元素的內容區域，並且在其左右兩邊沒有其餘元素，即塊級元素默認是獨佔一行的。 典型的塊級元素有：<div>，<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。

 

做者：Ry-yuan

如需轉載請標明出處：原文地址：http://www.cnblogs.com/Ry-yuan/p/6694189.html