非替換元素和替換元素 塊級元素和行內元素

非替換元素和替換元素 塊級元素和行內元素

HTML瀏覽器


1. 替換和不可替換元素

從元素自己的特色來說,能夠分爲替換和不可替換元素。
  • 替換元素
替換元素就是瀏覽器根據元素的標籤和屬性,來決定元素的具體顯示內容。

例如瀏覽器會根據 <img> 標籤的 src 屬性的值來讀取圖片信息並顯示出來,而若是查看 HTML 代碼,則看不到圖片的實際內容;又例如根據 <input> 標籤的 type 屬性來決定是顯示輸入框,仍是單選按鈕等。spa

HTML 中的 <img><input><textarea><select><object> 都是替換元素。這些元素每每沒有實際的內容,便是一個空元素,例如:code

<img src=」cat.jpg」 />
<input type="submit" name="submit" value="提交" />

瀏覽器會根據元素的標籤類型和屬性來顯示這些元素。可替換元素也在其顯示中生成了框。圖片

  • 不可替換元素

HTML 的大多數元素是不可替換元素,即其內容直接表現給用戶端(例如瀏覽器)。例如:input

<p>段落的內容</p>

段落 <p> 是一個不可替換元素,文字「段落的內容」全被顯示。it


2. 顯示元素

除了可替換元素和不可替換元素的分類方式外,CSS 2.1 中元素還有另外的分類方式:塊級元素( block-level )和行內元素(
inline-level ,也譯做「 內聯 」元素)。
  • 塊級元素
在視覺上被格式化爲塊的元素,最明顯的特徵就是它默認在橫向充滿其
父元素的內容區域,並且在其左右兩邊沒有其餘元素,即塊級元素默認是獨佔一行的。

典型的塊級元素有:<div><p><h1><h6> ,等等。object

經過 CSS 設定了浮動( float 屬性,可向左浮動或向右浮動)以及設定顯示( display )屬性爲「 block 」或「 list-item 」的元素都是塊級元素。select

可是浮動元素比較特殊,因爲浮動,其旁邊可能會有其餘元素的存在。而「 list-item 」(列表項 <li> ),會在其前面生成圓點符號,或者數字序號。float

  • 行內元素
行內元素不造成新內容塊,即在其左右能夠有其餘元素,例如 <a><span><strong> 等,都是典型的行內級元素。

display 屬性等於「inline」的元素都是行內元素。幾乎全部的可替換元素都是行內元素,例如 <img><input> 等等。im

不過元素的類型也不是固定的,經過設定 CSS 的 display屬性,可使行內元素變爲塊級元素,也可讓塊級元素變爲行內元素。

License

  • 能夠拷貝、轉發,可是必須提供原做者信息,同時也不能將本項目用於商業用途
相關文章