行内元素于块级元素的区别，以及display：block；和display：inline的区别

常见的行内元素于块级元素：

 <!-- 常见的行内元素 -->
    <span>   <img >  <input >  <select>  <strong> <a>  <label>

 <!--常见的块级元素  -->
    <div> <ul> <ol> <dl> <dt> <dd> <h1>~<h6> <p> <table> <form> <hr> 等~~

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

1.行内元素不可以设置宽高，宽高由内容撑开，不独占一行

2.块级元素可以设置宽高，宽高默认由内容撑开，默认独占一行，垂直向下

display：block 和display：inline 的区别：

block元素的特点：

1.处于常规流中，如果width没有设置，会自动填充满父容器

2.可以用于margin/padding

3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素

4.处于常规流中布局时在前后元素位置之间（独占一个水平空间）

5.忽略vertical-align

inline元素特点：

1.水平方向上根据direction依次布局

2.不会再元素前后进行换行

3.受white-space控制

4.margin/padding在竖直反向无效，水平反向有效

5.width/height属性对非替换行内元素无效，宽度由元素内容决定

6.非替换行内元素的行框高由line-height确定，替换行内元素的行框高由height、margin、padding、border决定

7.浮动或绝对定位时会转换block

8.vertcal-align属性无效