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

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

总结

一、默认情况

 

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


相关推荐

  • python图像多层小波分解_Python中图像小波分解与重构以及灰度图加噪

    python图像多层小波分解_Python中图像小波分解与重构以及灰度图加噪Python中图像小波分解与重构以及灰度图加噪Python中图像小波分解与重构以及灰度图加噪最近需要做小波分解相关的东西,博客这里做一个简单的记录灰度图的小波分解与重构:fromPILimportImageimportmatplotlib.pyplotaspltfrommatplotlib.pyplotimportimshowimportnumpyasnp#小波库impo…

    2022年10月21日
    4
  • android开发股票数据接口,股票数据接口-股票数据接口api「建议收藏」

    原标题:股票数据接口-股票数据接口api量亿数据专注金融领域API数据接口,其中包括期货、股票、期权、外汇等,只需要注册即可申请使用。免费申请网址:http://www.liangyee.com/如何获取股票数据,股票数据接口-股票数据接口api,以美股API数据接口为例。5分钟K线接口地址:http://stock.liangyee.com/bus-api/USStock/marketData/…

    2022年4月7日
    49
  • CCriticalSection类的使用「建议收藏」

    CCriticalSection类的使用「建议收藏」当多个线程访问一个独占性共享资源时,可以使用“临界区”对象。任一时刻只有一个线程可以拥有临界区对象,拥有临界区的线程可以访问被保护起来的资源或代码段,其他希望进入临界区的线程将被挂起等待,直到拥有临界区的线程放弃临界区时为止,这样就保证了不会在同一时刻出现多个线程访问共享资源。      CCriticalSection类的用法非常简单,步骤如下:      定义CCrit

    2022年7月20日
    21
  • charles打断点有什么用_charles打断点后 如何执行

    charles打断点有什么用_charles打断点后 如何执行前言Charles是收费软件,可以免费试用30天。试用期过后,未付费的用户仍然可以继续使用,但是每次使用时间不能超过30分钟,并且启动时将会有10秒种的延时。此时,我们只需网上找一个注册码即可解

    2022年7月29日
    14
  • 不要再走弯路了,最全的黑客入门学习路线在这[通俗易懂]

    不要再走弯路了,最全的黑客入门学习路线在这[通俗易懂]在大多数的思维里总觉得学习网络安全得先收集资料、学习编程、学习计算机基础,这样不是不可以,但是这样学效率太低了!你要知道网络安全是一门技术,任何技术的学习一定是以实践为主的。也就是说很多的理论知识其实是可以在实践中去验证拓展的,这样学习比起你啃原理、啃书本要好理解很多。所以想要学习网络安全选对正确的学习方法很重要,这可以帮你少走很多弯路。因为如果你选择了一个低效的方法,也许别人都已经彻底学会了,你还停留在入门阶段。对于小白来说,有个人引导会比自学要高效的多,尤其是容易坚持不下去的小伙伴。学姐

    2022年6月3日
    43
  • CSRF攻击与防御(写得非常好)「建议收藏」

    转载地址:http://www.phpddt.com/reprint/csrf.htmlCSRF概念:CSRF跨站点请求伪造(Cross—SiteRequestForgery),跟XSS攻击一样,存在巨大的危害性,你可以这样来理解:攻击者盗用了你的身份,以你的名义发送恶意请求,对服务器来说这个请求是完全合法的,但是却完成了攻击者所期望的一个操作,

    2022年4月14日
    40

发表回复

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

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