簡答:
因為<img>
、<input>
屬於替換元素,替換元素一般有內在尺寸和寬高比(auto時起作用),所以具有width和height,可以設定。
細答:
元素是文件結構的基礎,在CSS中,每個元素生成了一個包含了元素內容的框(box,也譯為“盒子”)。但是不同的元素顯示的方式會有所不同,例如<div>
和<span>
就不同,而<strong>
和 <p>
也不一樣。
1. 替換和不可替換元素
從元素本身的特點來講,可以分為替換和不可替換元素。
a) 替換元素
替換元素 : 瀏覽器根據元素的標籤和屬性,來決定元素的具體顯示內容。複製程式碼
例如瀏覽器會根據<img>
標籤的src屬性的值來讀取圖片資訊並顯示出來;根據<input>
標籤的type屬性來決定是顯示輸入框,還是單選按鈕等。HTML中的<img>
、<input>
、<textarea>
、<select>
都是替換元素。這些元素往往沒有實際的內容,即是一個空元素,瀏覽器會根據元素的標籤型別和屬性來顯示這些元素。
b) 不可替換元素
HTML 的大多數元素是不可替換元素,即其內容直接表現給使用者端(例如瀏覽器)。複製程式碼
例如<p>段落的內容</p>
,段落<p>
是一個不可替換元素,文字“段落的內容”全被顯示。
2. 塊級和行內元素
除了可替換元素和不可替換元素的分類方式外,CSS2.1中元素還有另外的分類方式:塊級元素(block-level)和行內元素(inline-level,也譯作“內聯”元素)。
a) 塊級元素
在視覺上被格式化為塊的元素,最明顯的特徵就是預設在橫向充滿其父元素的內容區域,而且在其左右兩邊沒有其他元素,即獨佔一行。複製程式碼
典型的塊級元素有:<div>
、<p>
、<h1>
到<h6>
,等等;通過CSS設定了浮動(float屬性)以及設定顯示(display)屬性為“block”或“list-item”的元素都是塊級元素。但是浮動元素比較特殊,由於浮動,其旁邊可能會有其他元素的存在。而“list-item”(列表項<li>
),會在其前面生成圓點符號,或者數字序號。
b) 行內元素
行內元素不形成新內容塊,即在其左右可以有其他元素。複製程式碼
例如<a>
、<span>
、<strong>
等,都是典型的行內級元素。display屬性等於“inline”的元素都是行內元素。
結語
- 幾乎所有的替換元素都是行內元素,例如
<img>
、<input>
等等。不過元素的型別也不是固定的,通過設定CSS 的display屬性,可以使行內元素變為塊級元素,也可以讓塊級元素變為行內元素。 - 替換元素一般有內在尺寸,所以具有width和height,可以設定。例如你不指定img的width和height時,就按其內在尺寸顯示,也就是圖片被儲存的時候的寬度和高度。對於表單元素,瀏覽器也有預設的樣式,包括寬度和高度。
補充知識點
inline元素預設是基線對齊的 vertical-align=baseline
from juicyangxj 2017-11-27複製程式碼