總結
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 常見塊級元素 ...