html标签分类及行内元素、块级元素、行内块元素对比

先来区分一下html常用标签默认显示类型,初学者特别容易混淆:
html标签分类及行内元素、块级元素、行内块元素对比

然后重点来了,html行内元素、块级元素、行内块元素各自有什么特点呢?
了解清楚它们的特性对以后的编程非常重要!!!

行内元素特性:(inline)

1.与其他元素处于同一行

2.不支持宽高

3.上下外边距无效,auto无效(不支持auto居中)

4.内边距只对内联元素产生影响,无视块元素

5.标签之间的空格解析

特殊的行内元素: a标签能包裹块级元素


块级元素特性:(block)

1.独占一行,宽度默认100%(继承父元素宽度)

2.高度由里面的元素撑开

3.可以设置内外边距

4.可以包裹其他任意元素

特殊的块级元素:p标签不可包裹块级元素(只存放文本)

行内块元素特性:(inline-block)

1.本质上是行内元素,具有行内元素性质

2.支持宽高

3.上下外边距有效,auto无效(不支持auto居中)

4.内边距只对内联元素产生影响,无视块元素

5.标签之间的空格解析

img标签不是行内块元素,是行内元素,但可以设置宽高,这源于历史…