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

行内元素：display:inline

特点：在水平方向上排列，它的宽高随内容而定。不可以设置宽高，可以设置行高。设置margin和padding的上下无效。
常见的内联元素有：
a,b,br,em,font,i,img,input,label,select,small,span,strike(中划线),strong
注意：
1.虽然行内元素设置行高之后会有位置的变化，但是并没有改变盒子大小。
2.有些行内元素可以设置宽高，是因为它们是置换元素(拥有内置宽高也可以设置宽高属性)。
置换元素有：input select textarea button label

    span {
            border: 1px solid #ff8080;
            line-height: 100px;
         }
    <span>111</span>
    <span>222</span>
    <span>333</span>

块级元素：display:block

特点：在垂直方向上排列，独占一行，自动换行
常见的块元素有：
div,dl,dd,dt,form,h1-h6,hr,ol,p,ul,table,pre,menu,hr

    <style>
     div {
            border: 1px solid #4cbbfc;
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
        }
    </style>
    <div>aaa</div>
    <div>bbb</div>
    <div>ccc</div>

行内块元素display:inline-block

特点：拥有块级元素和行内的性质，既可以在一行排列(从左到右)，也可以设置宽高等属性，不自动换行。
行内块元素的兼容性使用
兼容性：display:inline-block;display:inline;zoom:1;