關於塊級元素與行內元素

2022-07-13 18:12:10 字數 1148 閱讀 5371

塊級元素擁有以下的幾個特徵:

如果寬度未設定,則元素會自動適應父元素的寬度

可以擁有外邊距與內邊距

如果高度未設定,則元素會自動適應子元素的高度(假設它們沒有設定浮動與定位)

預設情況下,將放置在html標記裡前一元素之後(假設沒有浮動或定位)

忽略vertical-align屬性

所以,對於塊級元素來說,我們沒有必要設定width:100%來讓它的寬度撐滿父元素,而且那樣做的話還有可能會對日後的維護帶來麻煩。

而且,對於上述第四點來說,我們沒有必要對塊級元素設定"clear",假設沒有浮動來影響,塊級元素將自動會在新啟的一行裡出現。

塊級元素:

,,,,,,,

行內元素擁有以下的幾個特徵:

不會像塊級元素一樣占用一行

支援white-space屬性

忽略上下外邊距,但是擁有左右外邊距以及所有內邊距

忽略widthheight屬性

如果設定浮動,則會變成乙個塊級元素,將會擁有塊級元素的所有特性

支援vertical-align屬性

行內元素的表現會像乙個文字框。它們將會乙個挨著乙個出現。

行內元素標籤:

,,,,,,,.

我們可以注意到,其實區分行內元素與塊級元素還是比較容易的,塊級元素通常可以包含其他的元素,而行內元素一般來說都是基於文字的。

通常來講,你可以讓塊級元素包含於另乙個塊級元素中。也可以讓行內元素包含於塊級元素或者是行內元素中。但你不可以讓乙個塊級元素包含於行內元素裡。但是有乙個裡例外:你可以在標籤裡包含塊級或者是行內元素。

我們可以通過使用display屬性來實現塊級元素與行內元素的互換。

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

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

行內元素與塊級元素

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

塊級元素與行內元素

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