行內元素,塊元素,置換元素(替換元素,非替換元素) img屬於什麼元素

html元素分類

部分初學者估計是和我同樣,剛開始只注意到了html元素分爲塊元素(block)和行內元素(inline).這裏先簡單的說下行內元素和塊元素的特性:

block:(div/p/dl/form/h1-h6/ol/ul):

1. 獨佔一行
2. 高度有裏面的元素撐開
3. 寬度默認100%(繼承父元素寬度)
4. 能夠設置外邊距/內邊距
5. 能夠包裹其餘任意元素
6. p標籤比較特殊: 不可包裹塊元素(只存放文本)

這裏要說下p元素中放個塊元素會發生什麼:

<p>
    <div></div>
</p>

這個在瀏覽器中就會被解析爲

<p></p>
<div></div>
<p></p>

行內元素特性:(a/b/em/i/img/span)

1. 和其餘行內元素處於同一行
2. 不支持寬高
3. 上下外邊距無效,auto無效(不支持auto居中)
4. 內邊距只對內聯元素產生影響,無視塊元素
5. 標籤中間的空格解析
6. a 比較特殊 能包裹塊元素(區域連接)

看到這裏,一些動手寫過code的同窗估計就會有疑問????行內元素不能設置上下外邊距(margin-top, margin-bottom), 可是他竟然對<img src="" alt="">生效了.
好吧,這個問題同時也讓我頭疼一陣子.有些人會說能夠把img看做是擁有inline-block(行內塊元素)的特性,可是是inline(行內元素),是否是有點繞口, 也就跟着只知其一;不知其二的這麼記了記,會用就行.根據我查的資料,我是這麼理解的(fllowing):
<img>是替換內聯元素replaced inline element.

行內元素同時也分爲替換內聯元素和非替換內聯元素:

不可替換元素

HTML的大多數元素是不可替換元素,即內容直接表現給用戶端(直接呈現給瀏覽器界面).
<p>段落內容</p>
段落<p>是一個不可替換元素,文字"段落內容"所有被顯示出來

可替換元素

替換元素就是瀏覽器根據元素的標籤和屬性,來決定元素具體顯示內容.
先用簡單的input便籤來講明下

<input type="text">

在更改type 的賦值時, input樣式也會隨之更改,eg:<input type="radio">,<input type="password">等等, 不一樣的type值 呈現的樣子會不同.

img

瀏覽器會根據<img>標籤的src屬性的值來讀取圖片信息而且顯示出來,若是隻是查看html代碼就看不到圖片的實際內容.

行內非替換元素特性

行內替換元素聽從上面的行內元素的特性

行內替換元素特性

width,height,margin的四個方向,padding的四個方向 都正常顯示,而且遵循標準的css盒模型

哪些是替換元素,那些事非替換元素

具體哪些元素是替換元素呢?
<img>`<object>videotextarea`inout,還有一些元素只在特殊狀況下表現爲可替換元素:audio canvas,經過CSScontent屬性插入的對象北辰作匿名可替換元素(anonymous replaced elements).