html元素分類及盒子特性分析

2021-10-01 18:44:05 字數 800 閱讀 2005

分類方式:

一、替換元素和不可替換元素

(1)替換元素

瀏覽器根據元素的標籤和屬性,來決定元素的具體顯示內容。

例如:瀏覽器會根據

(2)不可替換元素

內容直接展示給使用者端,如段落,文字內容被全部展示,且html中大多數元素是不可替換元素。

二、顯示元素

(1)行內元素

左右可以有其它元素,不形成新的內容塊,如、、等。幾乎所有的可替換元素都是行內元素,例如

(2)塊級元素

預設在橫向充滿其父元素的內容區域,而且在其左右兩邊沒有其他元素,獨佔一行。如、、到等。

css設定了浮動(由於浮動,其旁邊可能會有其他元素的存在)、display設定block或list-item,這些元素都是塊級元素。

三、元素的width height margin padding 特性

(1)塊級元素:

width、 height、 margin的四個方向、 padding的四個方向都正常顯示,遵循標準的css盒模型。例如:div

(2)行內替換元素:

width、 height、 margin的四個方向、 padding的四個方向都正常顯示,遵循標準的css盒模型。 例如:img

(3)行內非替換元素

width、 height不起作用,用line-height來控制高度。padding左右起作用,上下不會影響行高,但是對於有背景色和內邊距的行內非替換元素,背景可以向元素上下延伸,但是行高沒有改變。因此視覺效果就是與前面的行重疊。margin左右起作用,上下不起作用,原因在於:行內非替換元素的外邊距不會改變乙個元素的行高。

HTML元素分類

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

HTML 元素分類

一般 html 元素分為兩種,即塊級元素和行內元素。每個塊級元素預設佔一行高度,一行內新增乙個塊級元素後一般無法新增其他元素 float浮動後除外 兩個塊級元素連續編輯時,會在頁面自動換行顯示。塊級元素一般可巢狀塊級元素或行內元素 塊級元素一般作為容器出現,用來組織結構,但並不全是如此。有些塊級元素...

HTML元素分類

html元素分類 根元素標籤 id屬性 以id形式選取元素 class屬性 以class形式選取元素 title屬性 滑鼠懸停的時候顯示的描述文字 style屬性 行內樣式 contentedtable屬性 可編輯的內容區域,一般用來製作富文字編輯器 data 臨時在標籤元素上儲存資料 hidden...