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

行内元素（不独占一行）：

a,button,big,small,datalist,em , i, input,mark,span,progress,s,strong,b,sub,sup,textarea u

(与文字相关的基本都是行内元素)

行内元素特点：

1. 不独占一行
2. 排列方式：从左往右
3. 通常使用行内元素进行文字、小图标、小结构的搭建
4. 设置宽高不起作用，想要设置宽高，需转换为块级元素/行内块元素：display:block/display:inline-block
5. 不设置宽高时：它本身内容宽高就是它的宽高
6. 天生自带display:inline属性
7. 行内元素里不能嵌套块级元素（特殊a标签除外）
8. a标签内不能嵌套a标签，即使我们嵌套了，最后浏览器也会解析为并列关系，而不是嵌套关系。

块级元素（独占一行）：

table,form,dl,dt,dd,figure,figcaption,div,h1~h6,hr,ul,ol,li,nav,p,

块级元素特点：

1. 独占一行
2. 排列方式：从上往下
3. 通常使用块级元素进行结构搭建
4. 可以设置宽高以及盒子模型的其他属性
5. 不设置宽高的情况下，它的宽度是父元素的宽度，它的高度是它本身内容的高度
6. 天生自带display:block;
7. 块级元素可以嵌套行内元素
8. ul , ol ,下面只能是li        dl下边只能是dt，dd
9. p元素里不能嵌套任何的块级元素 包括它本身 可以嵌套行内元素

行内块元素(天生自带display:inline-block)：

img ,input