塊級標籤和行內標籤的測試總結

2022-02-09 03:33:15 字數 1612 閱讀 1803

總結

1.塊級標籤可以設定寬高(width、height)和text-align;

行標籤由內容撐開,不能設定寬高和text-align;

需要注意:行標籤

、、單獨使用的(讀者不必了解,沒有實際應用場景)和系列標籤可以設定寬高;

並且可以設定text-align,系列標籤

除了type為checkbox、radio、file、hideen的標籤不可以設定text-align,其他標籤都可以(內容預設是垂直居中)。

2.所有標籤都可以設定左右margin;

塊級標籤可以設定上下margin;

行內標籤不可以設定上下margin;

需要注意:行標籤

、、單獨使用的、系列標籤可以設定上下margin並有效果。

3.所有標籤都可以設定左右padding;

塊級標籤可以設定上下padding;

行內標籤不可以設定上下padding;

需要注意:

a.type為checkbox、radio屬性標籤不能設定上下、左右padding。

b.行標籤

、、單獨使用的、系列標籤可以設定上下padding;

c.特別要注意

可以設定上下、左右padding,但是不會像背景一樣填充padding,詳見以上測試效果;

d.type為reset、button、submit標籤可以設定上下、左右padding,但是其padding會包含在元素本身的width和height中,為了避免這類不可控的情況,我們一般不會在此類標籤中設定padding,或者我們一般會用其他標籤模擬實現標籤的功能,但能夠更好的控制其樣式。

4.塊標籤和行內標籤在任何情況下都可以設定border屬性,並有相應的效果。

說明:塊標籤

標籤和行標籤標籤不需考慮設定屬性,因為其在頁面中沒有效果。

1.所有標籤都可以設定寬高和text-align;

相關注意事項同預設情況一樣。

2.所有標籤都可以設定上下、左右margin;

3.所有標籤都可以設定上下、左右padding;

相關注意事項

同預設情況一樣。

三、所有標籤轉換為行內標籤

1.所有標籤表現為行標籤屬性,不能設定寬高和text-align,由內容撐開。

相關注意事項

同預設情況一樣。

2.所有標籤可以設定左右margin,不能設定上下margin。

相關注意事項

同預設情況一樣。

3.所有標籤都可以設定左右padding,不能設定上下padding。

相關注意事項

同預設情況一樣。

四、所有標籤浮動

1.所有標籤都可以設定寬高和text-align。

相關注意事項

同預設情況一樣。

2.所有標籤都可以設定上下、左右margin。

3.所有標籤都可以設定上下、左右padding;

相關注意事項同預設情況一樣。

五、所有標籤絕對定位

1.所有標籤都可以設定寬高和text-align。

相關注意事項同預設情況一樣。

2.所有標籤都可以設定上下、左右margin。

3.所有標籤都可以設定上下、左右padding

相關注意事項同預設情況一樣。

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

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

塊級標籤 行內標籤 和基本巢狀規則

塊級標籤 大標籤 特點 獨佔一行 div 無意義的標籤,一般作為容器 p 段落 h1 h6 h1 h3對搜尋引擎友好 h1 logo 1次 h2 3次 h3 反覆使用 行內標籤 小標籤 特點 左右排列 img alt src title 超連結 a href target blank 在新頁面中開啟...

前端之標籤分類塊標籤和行內標籤

一 塊級元素 1 塊級元素的特徵 1 塊級元素獨佔一行,之後的元素也只能另起一行,相鄰的兩個塊級元素不能共用一行。2 塊級元素其元素的高度,寬度,行高和頂部底部邊距都是可以設定的。3 元素的寬度如果不設定的話,預設為父元素的寬度。4 塊級元素對應的屬性為display block 2 常見塊級元素 ...