替換元素與非替換元素

非替換元素和替換元素

元素是文檔結構的基礎,在css裏面,每個元素生成了包含內容的框(box),大家都叫“盒子”。但是不同的元素顯示方式是不同的,有佔據一整行的,有水平一個挨着一個的。比如:div 與span的方式不一樣。

什麼是替換元素與非替換元素

替換元素:

替換元素是瀏覽器根據其標籤的元素與屬性來判斷顯示具體的內容。

比如:<input /> type="text" 的是,這是一個文本輸入框,換一個其他的時候,瀏覽器顯示就不一樣

(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替換元素,這些元素都沒有實際的內容。

非替換元素:

(X)HTML 的大多數元素是不可替換元素,他們將內容直接告訴瀏覽器,將其顯示出來。

比如<p>wanmei.com</p>

瀏覽器將把這段內容直接顯示出來。

除了這兩字,還有兩種非常屬性的元素,顯示元素,他分爲兩種情況,一種是‘塊及元素’ ‘block’,還有一種是“行內元素”inline,大家也叫“內聯元素”。

塊及元素

他最明顯的特徵就是獨自佔領一行,自動充滿父級元素的內容區域,絕不會讓別人“侵略”(當然可以通過其他方式去改變他)。

常見的有:div,p..等等。

通過CSS設定了浮動(float屬性,可向左浮動或向右浮動)以及設定顯示(display)屬性爲“block”或“list-item”的元素都是塊級元素。這個地方浮動是一個比較特殊的情況,可以詳查浮動這個知識

行內元素:

上面說塊及元素獨自佔領一行,行內元素就沒這麼霸道了,他可以左右都允許有元素,最常見的就是<a></a>

通過display:'inline'設置以後都會變成行內元素。

發佈了35 篇原創文章 · 獲贊 48 · 訪問量 8萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章