行内快元素

行内元素
   特点： 和其它行内元素或者行内块排在一起，不可以设置宽度高度。宽高由内容决定
   哪些元素：a b span

块元素
   特点： 独占一行，可以设置宽度高度。宽度默认是父容器的宽度，高度由内容决定
   哪些元素： h1 p div，ul li form dl dt dd ol 

   h1：上下外边距21.44px
   p：上下外边距16px
   ul：上下外边距16px，左内边距40px

行内块元素

  特点：可以设置宽度高度，和其它行内元素或者行内块排在一起，行内块元素和行内块元素之间有缝隙
  元素： img   input
  注意:vertical-align: top/middle/bottom/baseline

  行内块+块内块：
  行内块+文字：

补充：
   1. 行内元素和块元素对margin和padding的支持度

     块元素支持margin和padding
     行内元素支持左右的margin和padding。不支持上下的margin和padding

    span{
       不要这么写
       margin-top: 
       padding-top:
    }

   2. 行内元素和块元素的嵌套规则
      1. 块元素可以嵌套部分块元素和行内元素
         <div>
               <span></span>
         </div>
          <div>
               <div></div>
         </div>
          <div>
                <h1></h1>
               <p></p>
         </div>
     2. p,h,dt 不能嵌套其它的块元素
        下面写法不允许
        <p>
           <div></div>
        </p>
    3. 行内元素只能包裹行内元素
    4. 块元素和块元素并列，行内元素和行内元素并列
      <div>
            span（行内元素）
            b（行内元素）
      </div>

       <div>
            div （块元素）
            p   （块元素）
      </div>

      不推荐下面写法
      <div>
            span（行内元素）
            div（块元素）
      </div>

转换：
    display:block;   转块
    display:inline;  转行内元素
    display:inline-block;  转行内块元素
    display:none;  消失

    display:none/ display:block;