前端面试---块级元素和行内元素的区别

1、块级元素和行内元素的区别

常见块级元素

div,p,table,form,ul,h1-h6

常见行内元素

a,span,img,input,label

块级元素特性：

1. 独占一行
2. 高度宽度margin，padding设置有效
3. 宽度没有设置时，默认100%
4. 块级元素可以包含块级和行内元素

行内元素特性：

1. 和其他元素占一行显示
2. 高度和宽度无法设置，padding可以设置，margin的top和bottom无法设置
3. 行内元素不能包含块级元素

行内块元素特性

1. 不自动换行
2. 高度宽度padding和margin设置有效

块级元素和行内元素转换

转换为块级元素：display:block

转换为行内元素：display:inline

转换为行内块元素：display:inline-block