HTML-标签的分类及相互转换

标签的分类及相互转换

在学习HTML标签的时候，我们发现有些标签独占一行显示内容，有些标签同行显示

问题：哪些标签可以在一行显示？哪些标签独占一行?

行级标签inline

主要用于组织文本内容

特点：

• 不支持宽，高的设置，宽和高由内容来决定
• 在同行显示，除非宽度不够才换行
• 对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间

例如：a、span、label、em、strong、i 一般文本标签都是行标签

块级标签block

一般块标签用来布局或者组织行标签显示内容。

特点：

• 支持宽和高
• 默认时独占一行，后面的标签被挤压换行
• margin和padding的上下左右均对其有效

例如：table、tr、p、div、ul、ol、li、h1-h6 div是我们用得最多的

行内块级标签 inline-block

特点：

• 支持宽和高
• 默认在同行显示，除非宽度不够才换行 默认有5px间距
• margin和padding的上下左右均对其有效

例如：input、img、button、select、textarea、td

标签之间的相互转换

• display设置标签应该生成的框的类型。

  • inline转换为行内元素
  • block转换为块状元素
  • inline-block转换为行内块状元素
  • none隐藏元素

• display:none;和visibility:hidden;区别

  1. display:none;：隐藏元素，原来空间不再占用
  2. visibility:hidden;：隐藏元素，原来空间还占用

注意：

行内块级元素不能转换为行级元素。

当两个元素均设置为display:inline-block后，会改变两个元素的基线位置，所有使用display:inline-block来设置div布局会导致错位现象。解决方法：同时给两个div设置中线对齐 vertical-align: middle; 即可。

练习：

1. 把input，img，button,select标签设置边框 并且转换为块级元素
2. 把 a,span，p设置宽度为200，高度为300，并且同行显示（要求，默认没有间隔距离）
3. 把table、p、div、ul、ol、li、h1-h6 标签 设置宽高为250px 并且默认同行显示。