标签的分类及相互转换

我们在学习HTML标签的时候，我们发现有的标签独占一行显示内容，其他标签页无法和他并排，有些标签又可以在一行显示

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

行级标签（inline）

主要用于组织文本内容

特点：1不支持宽高，宽和高由内容决定

           2可以在同行显示，除非宽度不够才换行

           3margin仅设置左右有效，上下无效，padding设置上下左右都有效，即会撑大空间

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

块级标签

块级标签支持宽和高，默认是独占一行，后面的标签会被挤压换行。一般块级标签用来布局或者组织行标签显示内容

特点：1支持宽高

           2 默认是独占一行，后面的标签被挤压换行

           3 margin和padding上下左右都有效

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

行内块级标签inline-block

行内块级标签综合了行内元素和块级元素的特性，但是各有取舍。因此行内块级元素在日常的使用中，由于其特性，使用的次数比较多

特点：1 支持宽高

           2 默认在同行显示，除非宽度不够才换行，默认有5px的间距

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

标签之间的相互转换

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

inline转换为行内元素

block转换为块级元素

inline-block转换为行内块级元素

none隐藏元素

display:none和visibility：hidden

display：none：隐藏元素，原来空间不再占用

visibility:none  隐藏元素，原来空间占用

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