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

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

总结

一、默认情况

 

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

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Visual Studio 2012 Ultimate旗舰版序列号

    Visual Studio 2012 Ultimate旗舰版序列号VisualStudio2012Ultimate旗舰版序列号:YKCW6-BPFPF-BT8C9-7DCTH-QXGWCYQ7PR-QTHDM-HCBCV-9GKGG-TB2TM转载于:https://www.cnblogs.com/jiayue360/p/3166844.html

  • Linux下修改配置文件内容

    Linux下修改配置文件内容文件操作之修改配置文件内容在一些系统或者游戏运行时经常遇到一些情况需要修改一下配置文件的内容,比如游戏中任务升级了,需要修改人物等级,那么这是怎么完成的呢?好,我还是老规矩先来介绍一个函数,strstr一样的查看手册可以看到,该函数有两个参数,第一个参数要查询的字符串,第二个参数是目标子字符串,返回值是一个指针,指向子字符串的开头,如果没有那么返回NULL,什么意思呢,举个例子,比如CHINAENGLISH字符串,我要查找ENGLISH,使用strstr后,返回一个字符指针,指到E位置。好,介绍完

  • sshd服务设定root登陆配置项PermitRootLogin的解析「建议收藏」

    sshd服务设定root登陆配置项PermitRootLogin的解析「建议收藏」首先看一下sshd_config中关于PermitRootLogin的配置信息:#grepPermitRootLogin/etc/ssh/sshd_configPermitRootLoginyes#thesettingof”PermitRootLoginwithout-password”.那么PermitRootLoginwithout-password又是什么意义呢?PermitRootLogin配置项都有哪些配置参数?常见:yes,no比较陌生:withou

  • 大数据分析在职业体育应用

    大数据分析在职业体育应用大数据分析在职业体育应用(NBA)什么是大数据?举个例子,都说骑士队依赖詹姆斯,当詹姆斯在场上时,骑士队每100回合净胜对手6.9分;詹姆斯不在场,骑士队净负对手2.9分,两者之间差值为9.8分。而勇士队的库里在场上和在场下时,勇士队每100回合净胜分的差值为17分,可以说勇士队对库里的依赖甚至要更强。这样的数据才可以叫大数据,相比而言,像得分、篮板、助攻这样的技术统计简直弱爆了。大数据在N…

  • python海龟绘图画圆_Python启蒙之海龟作图「建议收藏」

    python海龟绘图画圆_Python启蒙之海龟作图「建议收藏」今天我要向大家介绍一下如何使用Python进行绘图,学会了基本绘图后,你就可以使用电脑绘制出很多漂亮的图形了,先给大家展示几幅使用Python绘图完成的精美图案吧。这副图形电脑是如何绘制出来的呢?试想一下,如果现在给你一张纸和一支笔,你如何做出这幅图形。你可以从中心点开始,然后一条条线开始绘制,直到完成最边缘的线条。电脑作图的方式就是充分模拟了你手工绘画的流程,通过程序控制了手工的作图。那既…

  • Windows环境下进行mysql数据库备份[通俗易懂]

    Windows环境下进行mysql数据库备份[通俗易懂]备份功能使用mysqldump进行数据库备份跨主机备份还原数据库Windows定时执行脚本任务使用mysqldump进行数据库备份mysql数据库自带备份命令mysqldump,可对数据库进行备份操作最简单的备份是将数据库备份至本地,生成**.sql文件编写备份脚本文件(创建一个txt文件,写入批处理脚本,再将文件的后缀改为.bat变为批处理脚本文件)remautherBeginnerXiaoremdate:20200814rem******BackupMySQLStart***

发表回复

您的电子邮箱地址不会被公开。

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