一、简介
1.行内元素:span、strong、em、br、img、input、label、select、textarea
2.块级元素:div、p、ul、li、ol、dl、form、table
3.内联元素:a、cite
二、区别:
1.块级元素会占一行,其宽度会自动填满父元素的宽度,而行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下时,才会换行,其宽度随着元素的内容而变化。
2.块级元素可以设置width、height属性,行内元素设置width、height无效。
3.块级元素可以设置margin和padding,行内元素水平方向的padding-left、padding-right、margin-left、margin-right都会产生边距效果,但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom都不会产生边距效果,即水平方向有效,竖直方向无效。
三、互相转换
1.行内元素转块级元素:display:block;
2.块级元素转行内元素:display:inline;
3.行内块级元素:display:inline-block;
注:行内元素设置成display:inline-block就可以设置竖直方向的属性了(padding-top、margin-bottom等等)。