Chrome调试模式下有Computed可以查看元素的显示模式。
1.块级元素(可独块)block
-
独占一行
-
宽度:父元素宽度(默认)
-
高度:由内容撑开(默认)
-
可设置宽高
eg:
hx(x=1~6),div , p , ul li , dl dt dd , form , header , nav , footer
2.行内元素(不可多行)inline
-
一行显多个,不换行
-
宽度由内容撑开
-
不可设宽高
-
(水平方向)padding和margin可以设置
eg:
a , span ,b , u , i , s , strong , ins , em ,del
3.行内块元素(可多行内块)inline-block
-
一行多个(中间存在间隙)
-
可设宽高
eg:
input , textarea , button ,select
img有行内块元素特点,但是Chrome显示为inline