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

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

总结

一、默认情况

 

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


相关推荐

  • URL 字符编码建议收藏

    URL编码会将字符转换为可通过因特网传输的格式。URL-统一资源定位器Web浏览器通过URL从web服务器请求页面。URL是网页的地址,比如http://www.cnblogs.co

    2021年12月20日
    45
  • Makefile missing separator. Stop.怎么解决「建议收藏」

    Makefile missing separator. Stop.怎么解决「建议收藏」现象:在makefile中写入:all:cleancompclean:./clean.cshcomp:./run_tc命令行的背景显示为红色。运行ma

    2022年4月26日
    69
  • 树莓派开发笔记(一): 入手树莓派3b,成功运行树莓派系统

    树莓派开发笔记(一): 入手树莓派3b,成功运行树莓派系统若该文为原创文章,未经允许不得转载原博主博客地址:https://blog.csdn.net/qq21497936本文章博客地址:https://blog.csdn.net/qq21497936/article/details/79659992目录前话树莓派3b外包装与配置基础配件清单树莓派系统下载给树莓派刷系统运行树莓派系统供电不足安装树莓派中文环境…

    2022年6月25日
    20
  • Delphi 2007安装问题[通俗易懂]

    Delphi 2007安装问题[通俗易懂]
    安装前提是你已经下载了Delphi2007forWin32的ISO。
      Delphi2007安装程序根据不同的序列号(许可文件)来判断安装版本,一般ISO中自带的许可文件是专业版的。
      企业版和专业版的许可文件下载:delphi2007_slip.zip
      C++Builder2007的企业版许可文件(slipfileforC++Builder2007):cb2007_ent.zip
      新装方法:
      1、下载D2

    2025年6月7日
    0
  • 解读Take-Two新财报:营收、利润增长均不及预期,游戏巨头如何迎来第二春?

    解读Take-Two新财报:营收、利润增长均不及预期,游戏巨头如何迎来第二春?5月14日,美国发行商Take-Two对外发布了2019财年第四季度的新财报。根据财报内容来看,Take-Two在营收、净利润等核心数据上保持了一定同比增速,但均没有超出市场期待。受财报发布后的影响,Take-Two的股价一度下跌超6%。回顾Take-Two前几个季度的财报来看,整体股价表现并不是很稳定,这也说明Take-Two的营收表现并没有让投资者很满意。随着全球游戏市场的竞争加剧,尤其是移…

    2022年6月6日
    54
  • 动态规划算法解01背包问题(思路及算法实现)

    动态规划算法解01背包问题(思路及算法实现)说明:算法源自教材。本文相当于对教材做的一个笔记(动态规划与贪心算法解01背包必须先对背包按照单位重量的价格从大到小排序,否则拆分的子问题就不具备最优子结构的性质)动态规划算法:动态规划就是一个填表的过程。该表记录了已解决的子问题的答案。求解下一个子问题时会用到上一个子问题的答案。{比如01背包问题:假如有1个背包,背包容量是10,有5个物品,编号为1,2,3,4,5,他们都有各自的…

    2022年7月26日
    4

发表回复

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

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