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

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

总结

一、默认情况

 

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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 【转载】关于Hash

    【转载】关于Hash

    2021年11月20日
  • cad注释比例和打印比例不一样_CAD中的打印比例,绘图比例和注释全局比例详解…

    cad注释比例和打印比例不一样_CAD中的打印比例,绘图比例和注释全局比例详解…如上图同一条线段,在不同的标准格式如下(线宽设置相同,字高度都是3.5):第一个尺寸是测量因子为1,标注全局因子为2;第二个尺寸测量因子为2,标注全局因子为2;第三个尺寸测量因子为1,标注全局因子为1可见:1、测量因子影响的是标准尺寸的大小,2、标注全局因子影响的是字体和箭头的大小,3、他们的变化对线宽是没有影响的。关于他们对字体的大小的影响:打印比例和标注全局因子对打印出来的蓝图的字体会有影响。…

    2022年5月14日
  • 最全Python学习路线图【2020最新版】

    最全Python学习路线图【2020最新版】2020年最新的python学习大纲,专为python高薪打造另外很多人在学习Python的过程中,往往因为没有好的教程或者没人指导从而导致自己容易放弃,为此我建了个Python交流.裙:一久武其而

    2022年7月5日
  • byte转string字符

    byte转string字符开发过程中从数据库拿出来的数据用tostring会显示为System.Byte[]查了下资料要发现网上的都不适用记录下自己的foreach(DataRowrowinds.Tables[0].Rows){    byte[]datbytes=(byte[])row["dat"];    for(inti=0;i&lt;datbytes.Length;i++)…

    2022年6月29日
  • SSM整合——简单的小项目实战[通俗易懂]

    SSM整合——简单的小项目实战[通俗易懂]文章目录:1.SSM整合思路1.1两个容器的创建1.2SSM整合开发的步骤2.SSM整合开发2.1项目的大体结构2.2使用Navicat创建一个表(student2)2.3IDEA中使用maven创建一个web项目2.4在pom.xml文件中添加相关依赖2.5在web.xml文件中。声明容器对象2.6创建项目中特定的包(entity、dao、service、controller)2.7编写mybatis、spring、springmvc的…

    2022年5月27日
  • DOM笔记2

    DOM笔记2

    2022年1月7日

发表回复

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

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