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

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

总结

一、默认情况

 

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


相关推荐

  • Redis分布式锁的三种实现方式_分布式锁解决方案

    Redis分布式锁的三种实现方式_分布式锁解决方案总结写在前面:RLockrLock=redissonClient.getLock(“lbhTestLock”);使用tryLock无参方法时,redisson会自动添加一个定时任务,定时刷新锁的失效时间,如果unlock时失败,则会出现该锁一直不释放的情况。而当tryLock传释放时间时,则不会添加这个定时任务。测试如下:1、tryLock无参数@Testp…

    2022年10月15日
    3
  • latex 公式太长 自动换行「建议收藏」

    latex 公式太长 自动换行「建议收藏」\begin{equation}\begin{split}x=&a+b+c+\\&d+e+f+g\end{split}\end{equation}[latex]长公式换行_solidsanke54的专栏-CSDN博客_latex公式分行

    2022年5月11日
    126
  • 产品流量分析

    产品流量分析年底要接的数据需求好多,博客好久没更新了。这次和大家分享一下最近对流量分析的一些理解。流量是产品获得用户的第一步,没有流量就没有转化与营收。对于流量的分析在产品日常运营效果监控中有着非常重要意义。下面我们就流量的来源与流向分析中需要关注哪些指标,展开叙述。这里首先放一张对流量来源和去向的图:从流量来源角度来看,其来源包括直接访问、搜索访问、商务合作以及自媒体等方面:直接访问:用户直…

    2022年6月2日
    36
  • Java 审计之SSRF篇(续)

    Java审计之SSRF篇(续)0x00前言先来说说为啥会有该篇章,在刚刚码完上篇文章后,后来又去找了找在Java中的一些远程请求的类。果然翻到了一些有意思的东西,在这里就拿出来给大家分享一下。

    2021年12月12日
    53
  • redis的lettuce_redis客户端lettuce

    redis的lettuce_redis客户端lettuce1、Jedis优点:提供了比较全面的Redis操作特性的APIAPI基本与Redis的指令一一对应,使用简单易理解缺点:同步阻塞IO不支持异步线程不安全2、Lettuce优点:线程安全基于Netty框架的事件驱动的通信,可异步调用适用于分布式缓存缺点:API更抽象,学习使用成本高…

    2025年8月31日
    6
  • chrome下document.cookie为空

    chrome下document.cookie为空今天遇到一个待解决的问题:关于Chrome浏览器下,可设置cookie,但无法读取的问题!baidu.cookie.set(‘hideMask’,’1′);从这里可以看到chrome中相关的cookie存储情况,能找到已设置成功的cookie值:chrome://chrome/settings/cookies但是,通过document…

    2022年7月20日
    41

发表回复

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

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