行標籤與塊標籤

2021-09-26 06:37:11 字數 1276 閱讀 1593

行標籤和塊標籤是html頁面標籤的兩種屬性,都是屬於css樣式。

行標籤:表示這種標籤在頁面中只佔其本身大小,而在樣式中對其寬和高的設定是無效的,這種標籤是可以在一行中排列顯示的,也叫做水平分布。

行標籤包括:a、span、label、button、input。

效果展示:

塊標籤:獨佔一行的,在樣式中對其設定的寬和高是有效的,垂直分布。

塊標籤包括:div、h1-h6、p、li。

**測試如下

div標籤

p標籤li標籤

頁面效果如下

大家可以看的出來,塊標籤獨佔一行,不管其內容多寬都會佔據一行。對於h2標籤我在這裡對其進行了寬高的樣式設定,可以看出代表h2標籤高和寬的藍色區域相對於h1標籤發生了改變。

上面說了,行標籤跟塊標籤是css樣式中的乙個部分,而某一標籤是行標籤或者塊標籤也只是其預設樣式是這樣設定的,所以我們是可以對其進行更改的。 方法就是在樣式中寫上

display:block;行轉塊或者

display:inline;塊轉行,這樣就可以讓標籤在兩種屬性間轉換。 **如下:

a標籤span標籤

label標籤

button標籤

頁面如下

可以看出span標籤獨佔一行,成功轉為塊標籤。

行內塊:具有行標籤的特性也有塊標籤的特性,寬高有效且水平分布。

**如下:

a標籤span標籤

label標籤

button標籤

頁面效果如下

無論是行標籤還是塊標籤都可以將其display屬性設定為行內塊,這樣我們即可以讓其水平分布也可以設定其的寬和高。之後我們還可以通過浮動來實現讓標籤元素水平分布的效果。

塊標籤和行標籤的區別

特點 總是在新行上開始。高度,寬度,內外邊距,都可以進行控制。寬度預設是他的容器的100 除非設定乙個寬度。它可以容納行內元素和其他塊元素。可以和其它元素共處一行,不用另起一行編寫。元素的高度,寬度以及頂部和底部的內外邊距不能進行設定,因為設定了不起作用 該行標籤的高度,寬度,是它包含的內容 文字 ...

塊級標籤與內聯標籤

學習的初期,我們就要知道,標準文件流等級森嚴。標籤分為兩種等級 比如h1標籤和span,同時設定寬高,來看瀏覽器效果,那麼你會發現 行內元素和塊級元素的區別 非常重要 行內元素 塊級元素 塊級元素和行內元素的分類 在以前的html知識中,我們已經將標籤分過類,當時分為了 文本級 容器級。從html的...

塊級標籤,行內標籤,行內塊標籤

行內元素 塊標籤行內塊標籤 巢狀規則 塊級元素 獨佔一行,對寬高的屬性值生效 如果不給寬度,塊級元素就預設為瀏覽器的寬度,即就是100 寬 行內元素 可以多個標籤存在一行,對寬高屬性值不生效,完全靠內容撐開寬高!行內塊元素 結合的行內和塊級的優點,不僅可以對寬高屬性值生效,還可以多個標籤存在一行顯示...