在html中,存在這許許多多的元素(同:」html標籤」),這些元素最終可分為三類,分別是塊級元素,內聯元素(同:」行內元素」),塊級內聯元素(同:」行內塊元素」)。
你對這些元素是否真的了解呢?
我們來看看這三類元素的特點:
1.每個塊級元素都從新的一行開始顯示(塊級元素獨佔一行)
2.元素的寬度,高度,內邊距(padding),邊框(border),外邊框(margin)都能隨意設定
3.塊級元素在網頁中所佔面積=內容區(content)+內邊距(padding)+邊框(border)+外邊距(margin)
4.塊級元素本身未設定寬度的情況下,寬度=父元素寬度-該元素的左右外邊距-該元素的左右邊框-該元素的左右內邊距
5.塊級元素未設定padding和border的情況下,padding和border的數值為0
6.塊級元素未設定寬度和外邊距的情況下,margin的值為0,寬度為100%(即與父元素寬度一致)
7.塊級元素設定寬度但未設定外邊距的情況下,左外邊距的值為0
8.塊級元素設定寬度,未設定padding和border,同時設定margin: 0 auto的情況下,左右外邊距平分 父元素寬度-該元素寬度所剩餘的空間
9.塊級內聯元素不受父元素的line-height以及自身的vertical-align影響
1.display:block
2.float:left或right
3.position:absolute或fixed
4.父元素使用display:flex,子元素會變為塊級元素
,,...,,,,,,
1.當父元素寬度足以放下多個內聯元素時,一行內可以顯示多個內聯元素,否則放不下的內聯元素將另起一行(一行存放多個內聯元素)
2.內聯元素的寬度,高度由該元素的內容撐開
3.內聯元素的寬度/高度/padding-top/border-top/margin-top/margin-bottom設定無效
4.如果padding/border/margin未設定的情況下,全部為0
5.內聯元素受父元素的line-height以及自身的vertical-align影響
使用display:inline
,,,,,
1.當父元素寬度足以放下多個塊級內聯元素時,一行內可以顯示多個塊級內聯元素,否則放不下的塊級內聯元素將另起一行(一行存放多個塊級內聯元素)
2.塊級內聯元素的寬度,高度,內邊距(padding),邊框(border),外邊框(margin)都能隨意設定
3. 塊級內聯元素的寬度,高度未設定的情況下,由該元素的內容撐開
4.塊級內聯元素受父元素的line-height以及自身的vertical-align影響
使用display:inline-block
HTML元素分類
面試的時候被問了乙個問題，塊級元素和內聯元素的區別。我想這不是很簡單嗎，就說塊級元素是佔據一整行而內聯元素是乙個乙個緊挨著 用通俗的語言說的，感覺不太專業 然後面試官又問我內聯元素可以使用padding和margin嗎，我就懵了。頓時覺得自己學的東西很不紮實，深入一點的都不是很了解。就表現形式來看 ...
HTML 元素分類
一般 html 元素分為兩種，即塊級元素和行內元素。每個塊級元素預設佔一行高度，一行內新增乙個塊級元素後一般無法新增其他元素 float浮動後除外 兩個塊級元素連續編輯時，會在頁面自動換行顯示。塊級元素一般可巢狀塊級元素或行內元素 塊級元素一般作為容器出現，用來組織結構，但並不全是如此。有些塊級元素...
HTML元素分類
html元素分類 根元素標籤 id屬性 以id形式選取元素 class屬性 以class形式選取元素 title屬性 滑鼠懸停的時候顯示的描述文字 style屬性 行內樣式 contentedtable屬性 可編輯的內容區域，一般用來製作富文字編輯器 data 臨時在標籤元素上儲存資料 hidden...