标签：
div与span是常用的盒子模型;
区别: div默认是垂直分布(独占一行)
span默认是水平分布(一行可以有多个)
通过float属性可以改变div容器的分布方式达到span容器的效果;
下面介绍下display这个属性; display的可选参数项: 默认值为 inline (内联即水平分布),
其它可能的值如下表所示:
下面是通过inline和block这两个属性来使div与span两个容器的默认方式互相转换 (即 不使用float属性 让div水平分布 并且 使span垂直分布);
正常的div与span容器(效果演示加了边框):
<!DOCTYPE> <html> <head> <title>display</title> <style type="text/css"> div {border:1px double gray;margin: 2px;} span{border:1px solid green;margin: 2px;} </style> </head> <body> ｃｓｓ ｄｉｓｐｌａｙ 属性 实验. <br><br> <div>div_1</div> <div>div_2</div> <div>div_3</div> <span>span_1</span> <span>span_2</span> <span>span_3</span> </body> </html>
效果如下:
给div添加display: inline; 属性span添加display: block;属性 后效果如下:
<!DOCTYPE> <html> <head> <title>display</title> <style type="text/css"> div {border:1px double gray;display: inline;} span{border:1px solid green;margin: 2px;display: block;} </style> </head> <body> ｃｓｓ ｄｉｓｐｌａｙ 属性 实验. <br><br> <div>div_1</div> <div>div_2</div> <div>div_3</div> <span>span_1</span> <span>span_2</span> <span>span_3</span> </body> </html>
div容器这时就可以当做span容器使用span可以当做div容器使用;
display:inline-block是行内的块级元素，它拥有块级元素的特点，可以设置长宽，可以设置margin和padding值，但它 却不是独占一行的，它的宽带并不占满父元素，而是和行内元素一样，可以和其他行内元素排在同一行里。它集块级元素和行内元素的特点于一身。
position:absolute和float会隐式地改变display类型，不论之前什么类型的元素（display:none除外）， 只要设置了position:absolute、float:left或float:right中任意一个，都会让元素以display:inline- block的方式显示。就算我们显示地设置display:inline或者display:block，也仍然无效（float在IE 6 下的双倍边距bug就是利用添加display:inline来解决的）。
值得注意的是，position:relative却不会隐式改变display的类型。
标签：
原文地址：http://www.cnblogs.com/YingYue/p/4671007.html
