MENU

HTML-行级、块级、行内块标签及各种标签之间的转换

February 7, 2023 • PHP

一、块级标签

  1. 独占一行,不和其他元素在同一行
  2. 能设置宽高

常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd

二、行级标签

  1. 能和其他元素在同一行
  2. 不能设置宽高

常见的行级标签:a ,span,strong,u,em

三、行内块标签

  1. 能和其他元素待在一行

2 能设置宽高

常见的行内块标签:img,input,textarea

总结

一、标签之间的转换

1、块级标签转换为行内标签:display:inline;

2、行内标签转换为块级标签:display:block;

3、转换为行内块标签:display:inline-block;

二、标签之间的区别

块标签:独自占领一行、可以进行宽高的数值的设定;

行标签:在一行内显示、不可以进行宽高的数值设定;

行内块标签:能和其他元素待在一行,能设置宽高;

三、标签间的嵌套规则

块标签可以套行标签,行标签不可以套块标签。

Last Modified: February 9, 2023