我们在学习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对齐即可