行內元素:a、b、span、img、input、strong、select、label、em、button、textarea
區塊級元素:p、ul、li、dl、dt、dd、p 、h1-h6、blockquote
空元素:br、meta、hr、link、input、img
區塊級元素的特徵:
# 1.總在新行上開始,佔據一整行
2.預設情況下,其寬度自動填滿其父元素寬度
3.寬度始終是與瀏覽器寬度一樣,與內容無關
4.它可以容納內聯元素和其他區塊元素
5.display屬性為block
區塊層級元素的垂直相鄰外邊距margin會合併。
行內元素的特點:
1.和其他元素都在一行上
2.高,行高及外邊距和內邊距部分可改變
3.寬度只與內容有關
4.行內元素只能容納文字或其他行內元素
5.display屬性為inline
水平方向的padding-left、padding- right、margin-left、margin-right都產生邊距效果,
但垂直方向的padding-top、padding-bottom、margin-top、margin-bottom卻不會產生邊距效果。
不可以設定寬高,其寬度隨著內容增加,高度隨字體大小而改變,內聯元素可以設定外邊界,但是外邊界不對上下起作用,只能對左右起作用。
空白元素的特點:
沒有內容的 HTML 內容稱為空白元素。空元素是在開始標籤中關閉的。
是沒有關閉標籤的空元素(
標籤定義換行)。
在 XHTML、XML 以及未來版本的 HTML 中,所有元素必須關閉。
在開始標籤中加入斜杠,例如
,是關閉空元素的正確方法,HTML、XHTML 和 XML 都接受這種方式。
即使
在所有瀏覽器中都是有效的,但使用
其實是更長遠的保障。
以上是行內元素,塊級元素與空元素的差異詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!