html5学习-CSS-盒的类型

在CSS中用display来定义盒的类型。

其中总体来说有block和inline类型两种。

例如div和p属于block，而span属于inline。

说下区别，inline的宽度等于内容的宽度，而block一行只能放一个block元素，宽度可以指定，而inline元素一行能放多个。看下代码吧。

对于block一行只能放一个元素，那么效果就很容易猜到了：

因为是用display来定义盒类型的，假如我用diplay来交换div和span的盒类型：

01  < style   type = "text/css" >
02       div {
03             display :   inline ;
04           background-color :   #aaff00 ;
05           width :   50px ;
06       }
07       span {
08             display :   block ;
09           background-color :   #ffaa00 ;
10       }
11  </ style >

然后上面的两个就交换效果了。

现在呢有另外一个很好的类型，inline-block.这个类型有两种集合的功能。

首先可以让一行上放多个元素，并且可以指定宽度。我贴上CSS代码，可以自己去尝试下：

01  div #a ,   div #b {
02               display :   inline - block ;
03               width :   200px ;
04           }
05           div #a {
06               background-color :   #0088ff ;
07           }
08           div #b {
09               background-color :   #00ccff ;
10           }
11           div #c {
12               width :   400px ;
13               background-color :   #ffff00 ;
14           }
15       </ style >

假如你要想用float达到并排效果，其实主要是因为他会紧密围绕，效果不同。

还有一个盒类型是inline-table.

就是能够让一个table放在行内部，而不是另起一行。利用vertical-align: bottom;可以指定对齐方式。

还有一个类型是list-item，就是能够把这些元素当成列表列出来：

1  div {
2               display :   list-item ;
3               list-style-type :   circle ;
4               margin-left :   40px ;
5               border :   solid   3px   #ffaa00 ;
6           }

可以自己尝试下效果。还有run-in类型，就是能够将run-in类型的元素放到后面的block里面，不过不是所有浏览器都支持，还有compact，这里不介绍了。因为支持度不好，不考虑了。