了解HTML 元素分類

2022-07-17 03:30:17 字數 918 閱讀 3186

html中包含大量的標籤, 這些標籤在我們使用中發現會有小小的差別, 有的標籤用了之後不會有太大的布局變化, 只是語義化, 而有的標籤卻會重起一行, 相當於自己回車了一次, 這就是不同標籤元素的分類不同造成的結果.

在html中, , , , , , , 等標籤就是塊級元素, 每個塊級元素一般都具有相同的特點.

1, 每個塊級元素都從新的一行開始, 並且其後的元素也另起一行. (也就是塊級元素就要自己佔一行, 後面的也得讓路)

2, 元素的高度, 寬度, 行高以及頂和底邊距都可設定.

3, 元素寬度在不設定的情況下, 是它本身父容器的100%, 也可以單獨進行的設定.

區別於塊狀元素, , , ,, 就是典型的內聯標籤(行內元素)元素, 大家在使用過程中其實在布局上面是沒太大的變化的, 它們修改的只是行內的一些視覺或者點選效果等等.

當然, 內聯元素也有自己的一些特點, 這些和塊級元素都是一一對應的.

1, 內聯元素和其他元素都是在一行上, 而不會排擠其他的元素, 

2, 元素的高度, 寬度以及頂部底部邊距不可設定(因為元素都是行內緊挨著, 你如果設定這些, 那麼元素不就都亂了).

3, 元素的寬度就是它包含的文字或的寬度, 不可改變.

這種元素非常少, 它們同時具備兩種元素的特點,

, 這兩個標籤就是內聯塊狀元素. 就不多做介紹了.

這三種元素是可以互相轉化的, 也就是說可以通過css強制修改其元素型別, 只需要設定display的屬性即可, 假如想要將內聯元素型別修改為塊級元素, **如下

span{

display:block;

同理其他的也是一樣的屬性值不同而已, 修改為塊級元素:block, 修改為內聯元素:inline, 修改為內聯塊狀元素:inline-block.

這三種元素一定要非常準確的掌握, 因為在div + css布局中, 它們佔了舉足輕重的地位.

HTML元素分類

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

HTML 元素分類

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

HTML元素分類

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