本文共 1933 字，大约阅读时间需要 6 分钟。

在CSS中，使用display属性来定义盒的类型。总体来说，盒类型分为两类：inline和block。如div默认是block，span默认是Inline。可以通过display修改默认的表现方式。

        
                
    
     div元素1
    
    
    
     div元素2
    
    span元素1    span元素2

默认的div和span表现形式：

利用dispaly修改，分别在上述的div和span样式中添加如下规则：

//div中添加display:inline;//span中添加display:block;

效果如图:

那display的取值只有这两个吗？那就错了。display的不同取值，就表现出不同的盒类型。

1、inline-block类型：属于block盒类型，但显示时具有inline类盒型的特点。并列显示默认的对齐方式是底部对齐，可以用vertical-align修改。

      利用inline-block制作水平菜单

    
    
        
     
菜单1
        
     
菜单2
        
     
菜单3
        
     
菜单4
    
    

     效果:

    PS：inline-block和inline是有区别的，前者仍属于block，所以有高宽的属性，而后者没有。

2、inline-table类型：是一种表格相关类型，IE 8+及其它主浏浏览器均支持。更多表格相关类型见后文。

      首先，看一个未使用inline-table的示例

淡忘~浅思
    
         
      
               
A
       
B
       
C
       
D
          
          
               
E
       
F
       
G
       
H
          
          
               
I
       
J
       
K
       
L
          
     
    
你好

     效果是这样的：

     如果要做成文字环绕表格的效果，就可以使用inline-table了，修改table的样式

table{display:inline-table;border:solid 3px #00ffaa;}

      文字环绕效果就出来了：

       表格相关类型汇总

3、list-item类型：此类型可以将多个元素作为列表来显示，同时在元素的开头添加列表的标记

      给示例中所有的div设定为list-item类型，用list-style-type将标记指定为空心圆

    
    
     div1
    
    
    
     div2
    
    
    
     div3
    
    
    
     div4
    

5、none类型：将display的值指定为none之后，改元素将不会显示。PS：与visibility:hidden不同的是，display:none的元素将不会占据原空间，而visibility仍会占据原空间。

原文首发：

下一篇：

转载地址：http://qktgi.baihongyu.com/