HTML元素分類

面試的時候被問了乙個問題，塊級元素和內聯元素的區別。我想這不是很簡單嗎，就說塊級元素是佔據一整行而內聯元素是乙個乙個緊挨著（用通俗的語言說的，感覺不太專業），然後面試官又問我內聯元素可以使用padding和margin嗎，我就懵了。頓時覺得自己學的東西很不紮實，深入一點的都不是很了解。

就表現形式來看

內聯元素/行內元素（inline）前後不產生換行，相鄰的內聯元素在同一行，其寬度隨元素的內容而變化。

塊級元素（block）前後都產生換行，所以塊級元素總是獨佔一行。

其實還有一種內聯塊元素（inline-block）,將物件呈現為inline物件，但是物件的內容作為block物件呈現。

常見的塊級元素有：

address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

常見的內聯元素有：

a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup

內聯塊元素：只有在css中通過display:inline-block對乙個物件指定inline-block屬性，可以將物件呈遞為內聯物件。

就標籤是否閉合來看

沒有閉合標籤的標籤被稱作空標籤。xhtml強調空標籤也要被正確的關閉，方法就是在最後加「/」。比如

標籤要寫成

。但是.在最新的html5規範中,官方是不建議空標籤帶上「/」的。也就是說

和沒有實質區別。詳情可以看這篇

常見空標籤：

br,hr,img,input,link,meta

不太常見的有：

area,base,col,command,embed,keygen,param,source,track,wbr

從元素本身的特點來看

從元素本身的特點來講，可以分為替換和不可替換元素。

替換元素是瀏覽器根據其標籤的元素與屬性來判斷顯示具體的內容。如根據標籤的type屬性來決定是顯示輸入框，還是單選按鈕等。這些元素往往沒有實際的內容，即是乙個空元素。一般來說替換元素是內聯元素。

不可替換元素的內容直接表現給使用者端。如是乙個不可替換元素，標籤裡的內容全被顯示。(x)html 的大多數元素是不可替換元素。詳情可以看這裡

常見替換元素：

img、input、textarea、select、object

這個時候回到面試時遇到的那個問題，內聯元素可以使用padding和margin嗎？又或者可以設定width和height嗎？內聯元素是否具有盒模型？

然後我又遇到了乙個問題，內聯元素不能設定寬高，那為什麼img可以設定寬高呢？

簡單來說，行內替換元素一般有內在尺寸（替換元素比較特殊），所以具有width和height，可以設定。所以除了那幾個替換元素，其他的行內元素還是不可以設定寬高哦~還是這個鏈結

*以上是我自己的一些理解，如果有不對的地方，請多多指教。

補充乙個問題，內聯元素絕對定位後可以設定width和height了？

額……試了下好像是可以的。這是由於display,position和float屬性都能影響元素的顯示及其位置，它們之間會相互影響。此處display在內聯元素絕對定位後被重新計算，也就是說內聯元素絕對定位後變成了塊級元素。詳情參見

omg竟然有這個規範。

HTML元素分類

HTML 元素分類

HTML元素分類

HTML元素分類

相關推薦