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

标签的分类及相互转换

我们在学习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

行内块级标签 inline-block

• 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,label，p设置宽度为500，高度为300，并且同行显示（要求，默认没有间隔距离）
3. 把table、tr、p、div、ul、ol、li、h1-h6 div标签 设置宽高为250px 并且默认同行显示。