display属性

display常见属性值

1. none：隐藏对象。

注意：隐藏元素时visibility:hidden和opacity:0会虽然会将元素隐藏，但是物理空间实际存在，display:none隐藏元素后连物理空间也不会存在了

2. inline：指定对象为内联元素

   a{ background:orange; width:100px; height: 100px;display:inline;} 

   <div class="a"></div>

此时，div不会显示，因为把它转为了内联元素，内联元素是没法设置宽和高的，在firebug中把display:inline这项去掉，div恢复display:block的默认属性，再次出现。

3. block：指定对象为块元素

  span{ background:green; width:100px; height: 100px; display:block;}

  <span></span>

如果最后不加display:block是无法显示这个span，因为它是内联元素，宽高无法设置

4. inline-block：指定对象为内联块元素

使块元素可以同行显示，使内联元素可以设置宽和高、上下的margin值。

 span{ background:green; width:100px; height:100px; display:inline-block; margin-top: 10px; }

 <span></span>   //span是行元素，设置为内联块元素后，可设置宽高和margin

 <div></div>

 <div></div>    //div是块元素不能同行显示，变为内联块后，可同行显示

5. table-cell：指定对象作为表格单元格

   使用它通常的作法是，配合 vertical-align:middle;  text-align:center;使大小不一样的图片都可以居中显示。

 如果只是div，而非table-cell，图片是无法竖向居中的