块级标签和行内标签的测试总结

总结

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

相关注意事项同默认状况同样。