行內元素,塊級元素與空元素

2022-02-01 10:19:06 字數 939 閱讀 6208

行內元素:a、b、span、img、input、strong、select、label、em、button、textarea

塊級元素:div、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 都接受這種方式。

即使 在所有瀏覽器中都是有效的,但使用

其實是更長遠的保障。

行內元素 塊級元素和行內塊級元素

而標籤的屬性是可以轉換的 display inline 轉換為行內元素 display linline block 轉換為行內塊元素 display block 轉換為塊級元素。行內元素 無法設定寬高 margin和padding上下無效,只有左右有效果 總是和相鄰的行內元素在同一行上,預設排列方式...

行內元素與塊級元素

1.行內元素與塊級元素直觀上的區別 行內元素會在一條直線上排列,都是同一行的,水平方向排列 塊級元素各佔據一行,垂直方向排列。塊級元素從新行開始結束接著乙個斷行。2.塊級元素可以包含行內元素和塊級元素。行內元素不能包含塊級元素。3.行內元素與塊級元素屬性的不同,主要是盒模型屬性上 行內元素設定wid...

塊級元素與行內元素

用法 塊級元素只能用於標籤中 塊級元素與行內元素 塊級元素與行內元素的幾個區別 格式 在預設情況下,塊級元素會從新起一行 內容模型 塊級元素可以包含其他的塊級元素和行內元素,這種模型會比行內元素有著更加大的結構 塊級元素列表 1.資訊 2.塊引用 3.定義列表中的條目描述 4.文件分割槽 5.定義列...