display属性 ：盒子模型可通过display属性来改变默认的显示类型

      1）block：  元素类型为块状元素，（大部分的块状元素类型的display值都是block。）
           特点：他能让元素的类型转变成块状元素，从而拥有块状元素的特点。

      2）inline:   元素的类型为内联元素，（大不部分的内联元素的display值都是inline。）
           特点： 能让元素的类型转换成内联元素，从而拥有内联元素的特点。

      3）list-item:此元素会作为列表显示。(他是的li的元素类型的值，加了display：list-item以后，会让元素转换成列表类型) li

      4）none： 隐藏元素（让元素不显示在浏览器里）

      5）inline-block：行内块元素 (input \img )
           特点：极具有块状元素的特点，又有内联元素的特点
           特点：inline-block  支持 使用垂直对齐的属性/*vertical-align: top/middle/bottom/baseline*/
         

  注：行内块元素，也是属于内联元素。

     内联元素添加了浮动之后，会隐性转换元素类型为块元素，可以设置宽高。
     如果是块状添加浮动之后，块元素的宽高在没有设置的前提下，会跟内容一样大。

通过display：inline-block；和vertical-align：middle；实现元素垂直居中的方法：
 方法一：
  1、给他的父元素text-align:center;
  2、先设置当前元素的元素类型设置为inline-block和vertical-align: middle;
  3、给他添加vertical-align: middle;  让他实现垂直居中对齐；
  4、添加“标尺”，也就是给他添加一个同辈的元素并且和你这个p标签之间是不能有空格和回车的，在给设置这个元素的类型为vertical-align:middle;width:0;height:100%;display:inline-block
 

 方法二：
  结构：

<div class="boxWrap">
   <div class="box2">
            <p>今天要吃饺子和元宵，饺子是龙耳 ，元宵就是龙蛋，面就是龙须，剃龙头今天要吃饺子和元宵，饺子是龙耳 ，元宵就是龙蛋</p>
   </div>
</div>
   
  1、给boxWrap 添加margin：0 auto   ;实现水平居中
  2、给box2  转成display：table-cell;使其元素类型转为跟td 一样的元素类型，拥有td一样的特性，td不支持margin，并且可以直接应用vertical-align属性。
  3、再给box2添加vertical-align: middle;，让p实现垂直居中效果
  4、如果再让p水平居中的话，可以给box2在加上text-align:center；同时p标签的元素类型转换为display：inline-block;

       行内块元素：属于内联元素里的元素类型，它是一种特殊的内联元素。