CSS学习笔记（三）display属性

最新推荐文章于 2025-05-07 11:15:37 发布

转载最新推荐文章于 2025-05-07 11:15:37 发布 · 47 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/suvllian/articles/5350097.html

本文详细介绍了CSS中的display属性，包括inline、block、inline-block及none等常见值的区别和应用场景，并探讨了position和float如何影响元素的display表现。

　　display 属性规定元素应该生成的框的类型。默认值：inline

　　我们常用的display属性值有：inline、block、inline-block、none；

 1 <style>
 2 .inline{display:inline; width:100px; height:100px; padding:5px; background-color:#F00;}
 3 .block{display:block; width:100px; height:100px; padding:5px;background-color:#0f0;}
 4 .inline-block{display:inline-block; width:100px;height:100px; padding:5px;background-color:#b3d9d9;}
 5 </style>
 6 </head>
 7 <body>
 8     <span class="inline">
 9 inline
10 </span>inline
11 <br>
12 <span class="block">
13 block
14 </span> block
15 <br>
16 <span class="inline-block">
17 inline-block
18 </span>inline-block
19 </body>

　　效果如下：

内联对象（inline）给它设置属性height和width是没有用的，致使它变宽变大的原因是内部元素的宽高+padding。观察inline对象的前后元素，我们会发现inline不单独占一行，其它元素会紧跟其后。

而块对象（block）是可以设置宽高的，但是它的实际宽高是本身宽高+padding。观察block的前后元素我们会发现block要单独占一行。然而，当我们即需要div有宽高，又不希望它独占一行怎么办？

这个时候我们就需要使用（inline-block）了，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/suvllian/articles/5350097.html