css的display属性小实验

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的类型。

posted @ 2015-07-23 17:10  周建旭  阅读(470)  评论(0)  编辑  收藏  举报