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

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

总结

一、默认情况

 

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”>标签不需考虑设置属性,因为其在页面中没有效果。

 

二、所有标签转换为块级标签

 

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

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

 

转载于:https://www.cnblogs.com/TimJs/p/3259204.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/110047.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 还原对于服务器失败 备份集中的数据库备份与现有数据库不同

    还原对于服务器失败 备份集中的数据库备份与现有数据库不同还原对于服务器失败备份集中的数据库备份与现有数据库不同    今天在SQLServer2008R2中还原一个数据库备份,遇到错误。还原对于服务器失败备份集中的数据库备份与现有数据库不同。    解决方案有以下几种,一般能够成功:在恢复新建数据库时,没有选中“覆盖原数据库”。    解决方法:选中用于还原的备份集,在选项中,勾选“覆盖现有数据库”

    2022年6月5日
    45
  • 安全网站推荐

    安全网站推荐

    2021年9月10日
    78
  • springboot:cannot resolve symbol @MapperScan[通俗易懂]

    springboot:cannot resolve symbol @MapperScan[通俗易懂]给mybatis的依赖添加版本号就可以了。

    2022年5月16日
    36
  • 风控模型指标详解「建议收藏」

    风控模型指标详解「建议收藏」目录:1.P-R曲线2.ROC,AUCP-R曲线和ROC曲线的区别3.WOE.IV值4.K-S值KS曲线与ROC曲线的区别5.PSI,CSIPSICSIPSI和CSI的区别6.Lift曲线1.P-R曲线  首先,明确两个概念,精确率§和召回率®。下表中,1代表正例,0代表负例。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img…

    2022年4月30日
    85
  • 易语言解析html实例,易语言解析JSON教程

    易语言解析JSON教程本文由applek于2015-7-717:25发布在易语言教程现在很多数据都是为json返回,如果用正则的话显得太麻烦,下面果核源码网就带来json解析教程首先需要用到工具:精易模块3.6以上版本:json解析工具:首先我们要有一段json,这儿拿QQ留言json测试。下载地址:下面将代码复制到工具,如图所示然而右边并没有解析出来原因是这个不是标准的json,标…

    2022年4月9日
    533
  • 大数阶乘算法实现及优化

    大数阶乘算法实现及优化题目:求N!TimeLimit:10000/5000MS(Java/Others)MemoryLimit:65536/32768K(Java/Others)TotalSubmission(s):63958AcceptedSubmission(s):18171ProblemDescription:Givenaninteger

    2022年7月24日
    9

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号