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

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

总结

一、默认情况

 

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


相关推荐

  • 如何用photoshop做24色环_【PS教你快速绘制超漂亮的色环】 24色环图绘制

    如何用photoshop做24色环_【PS教你快速绘制超漂亮的色环】 24色环图绘制这个圆环中的格子是36*11,顺时针方向是36个,横向是11个,当然包括中间的白色。白色也算一个格子。最终效果:按照上面的长宽比数据,我新建了一个画布,尺寸放大20倍,也就是720*220。新建一层,填充PS自带的彩虹渐变。对照原图的外黑里白的效果,添加一个黑白渐变,混合模式使用”强光”。马赛克,这是很关键的一步。之前我说了我把长宽比放大20倍,所以这里马赛克的大小也设为20像素。这一步也很重要,…

    2025年8月12日
    3
  • 我是一个Java class(以小说的方式,叙述完我的一生,很精彩)

    我是一个Java class(以小说的方式,叙述完我的一生,很精彩)

    2021年8月2日
    72
  • Linux面试题整理[通俗易懂]

    Linux面试题整理[通俗易懂]Linux概述什么是LinuxLinux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和Unix的多用户、多任务、支持多线程和多CPU的操作系统。它能运行主要的Unix工具软件、应用程序和网络协议。它支持32位和64位硬件。Linux继承了Unix以网络为核心的设计思想,是一个性能稳定的多用户网络操作系统。什么是Linux内核?Linux系统的核心是内核。内核控制着计算机系统上的所有硬件和软件,在必要时分配硬件,并根据需要执行软件。系统内存管理 应用

    2022年5月7日
    50
  • linux查看端口是否被占用的命令是,Linux如何查看端口是否被占用

    linux查看端口是否被占用的命令是,Linux如何查看端口是否被占用Linux如何查看端口是否被占用Linux如何查看端口是否被占用?下面为大家推荐两种检测方法,对Linux系统不熟悉的小伙伴可以看看。1、使用lsof命令lsof是一个非常强大的linux工具,她被用来查找哪些程序使用了那些文件。在linux系统下,基本上所有的东西都可以被当作文件来用。socket当然也是一种文件了。所以lsof可以用来查找谁用了某一个端口。具体方法:lsof-i:port_…

    2025年7月15日
    2
  • vrrp的配置实例_十宗罪案例简介

    vrrp的配置实例_十宗罪案例简介一、背景二、VRRP概念介绍三、实验操作一、背景局域网中的用户终端通常采用配置一个默认网关的形式访问外部网络,如果此时默认网关设备发生故障,将中断所有用户终端的网络访问,这很可能会给用户带来

    2022年8月5日
    3
  • 分布式存储系统考虑因素-分区容错性[通俗易懂]

    分布式存储系统考虑因素-分区容错性[通俗易懂]分布式存储系统中的多台服务器通过网络进行连接。但是我们无法保证网络是一直通畅的,分布式系统需要具有一定的容错性来处理网络故障带来的问题。

    2022年7月25日
    5

发表回复

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

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