一、简介
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等等）。
网友评论