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

總結

1、默認狀況

 

1.塊級標籤能夠設置寬高(width、height)和text-align;

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

 

須要注意：行標籤<img>、<textarea>、單獨使用的<select>(讀者沒必要了解，沒有實際應用場景)和<input>系列標籤能夠設置寬高;

而且<textarea>能夠設置text-align，<input>系列標籤除了type爲checkbox、radio、file、hideen的標籤不能夠設置text-align，其餘標籤均可以(內容默認是垂直居中)。

 

2.全部標籤均可以設置左右margin;

塊級標籤能夠設置上下margin;

行內標籤不能夠設置上下margin;

 

須要注意：行標籤<img>、<textarea>、單獨使用的<select>、<input>系列標籤能夠設置上下margin並有效果。

 

3.全部標籤均可以設置左右padding；

塊級標籤能夠設置上下padding；

行內標籤不能夠設置上下padding；

 

須要注意：

a.<input>type爲checkbox、radio屬性標籤不能設置上下、左右padding。

b.行標籤<img>、<textarea>、單獨使用的<select>、<input>系列標籤能夠設置上下padding;

c.特別要注意<img>能夠設置上下、左右padding，可是圖片不會像背景同樣填充padding，詳見以上測試效果；

d.<input>type爲reset、button、submit標籤能夠設置上下、左右padding，可是其padding會包含在元素自己的width和height中，爲了不這類不可控的狀況，咱們通常不會在此類<input>標籤中設置padding，或者咱們通常會用其餘標籤模擬實現<input>標籤的功能，但可以更好的控制其樣式。

 

4.塊標籤和行內標籤在任何狀況下均可以設置border屬性，並有相應的效果。

說明：塊標籤<br>標籤和行標籤<input type="hidden">標籤不需考慮設置屬性，由於其在頁面中沒有效果。

 

2、全部標籤轉換爲塊級標籤

 

1.全部標籤均可以設置寬高和text-align；

相關注意事項同默認狀況同樣。

 

2.全部標籤均可以設置上下、左右margin；

 

3.全部標籤均可以設置上下、左右padding；

相關注意事項同默認狀況同樣。

 

3、全部標籤轉換爲行內標籤

 

1.全部標籤表現爲行標籤屬性，不能設置寬高和text-align，由內容撐開。

相關注意事項同默認狀況同樣。

 

2.全部標籤能夠設置左右margin，不能設置上下margin。

相關注意事項同默認狀況同樣。

 

3.全部標籤均可以設置左右padding，不能設置上下padding。

相關注意事項同默認狀況同樣。

 

4、全部標籤浮動

1.全部標籤均可以設置寬高和text-align。

相關注意事項同默認狀況同樣。

2.全部標籤均可以設置上下、左右margin。

3.全部標籤均可以設置上下、左右padding；

相關注意事項同默認狀況同樣。

 

5、全部標籤絕對定位

1.全部標籤均可以設置寬高和text-align。

相關注意事項同默認狀況同樣。

2.全部標籤均可以設置上下、左右margin。

3.全部標籤均可以設置上下、左右padding

相關注意事項同默認狀況同樣。