css的display属性小实验

最新推荐文章于 2025-05-20 11:28:11 发布

weixin_34128237

最新推荐文章于 2025-05-20 11:28:11 发布

阅读量63

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/YingYue/p/4671007.html

本文介绍了CSS中display属性的作用及用法，包括如何通过display属性改变div与span元素的默认布局方式，实现div元素的水平分布与span元素的垂直分布。同时讲解了display属性的常见值及其效果，并解释了position:absolute和float属性对display类型的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

转载于:https://www.cnblogs.com/YingYue/p/4671007.html