详解css中的display属性

2014-09-14

　　在一般的CSS布局制作时候，我们常常会用到display对应值有block、none、inline这三个值。下面我们来分别来认识和学习什么时候用什么值。这里通过CSS display知识加实例讲解方法来学习和了解DIV CSS display。

　　首先，所有主流浏览器都支持 display 属性。其次，我们都知道display 属性规定元素应该生成的框的类型。默认值：inline.

　　我们常用的display属性值有：

　　inline

　　block

　　inline-block

　　none

　　把 display 设置成 none 不会保留元素本该显示的空间，但是 visibility: hidden 还会保留。

　　那么，display:inline、display:block和display:inline-block有什么区别呢？

　　代码如下:
　　<style>
　　.inline{
　　display:inline;
　　width:100px;
　　height:100px;
　　padding:5px;
　　background-color:#F00;
　　}
　　.block{
　　display:block;
　　width:100px;
　　height:100px;
　　padding:5px;
　　background-color:#0f0;
　　}
　　.inline-block{
　　display:inline-block;
　　width:100px;
　　height:100px;
　　padding:5px;
　　background-color:#00f;
　　}
　　</style>
　　<body>
　　<span class="inline">
　　inline
　　</span>inline
　　<span class="block">
　　block
　　</span> block
　　<span class="inline-block">
　　inline-block
　　</span>inline-block
　　</body>

　　我们发现内联对象`inline`给它设置属性`height`和`width`是没有用的，致使它变宽变大的

　　原因是内部元素的宽高`+padding`。观察inline对象的前后元素我们会发现`inline`不单独占一行，

　　其它元素会紧跟其后。

　　而块对象`block`是可以设置宽高的，但是它的实际宽高是本身宽高`+padding`。

　　观察`block`的前后元素我们会发现`block`要单独占一行。

　　然而，当我们即需要div有宽高，又不希望它独占一行怎么办？

　　这个时候我们就需要使用`inline-block`了，再观察一下上面的demo，我们会发现`inline-block`

　　即具有`block`的宽高特性又具有`inline`的同行元素特性。

　　然而，在IE6/7下padding对inline的宽高是对其没影响的。

　　那么，display的其他属性值呢？

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table	此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group	此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group	此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row	此元素会作为一个表格行显示（类似 <tr>）。
table-column-group	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column	此元素会作为一个单元格列显示（类似 <col>）
table-cell	此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption	此元素会作为一个表格标题显示（类似 <caption>）
inherit	规定应该从父元素继承 display 属性的值。

本文关键词：详解css中的display属性时候学习常会布局实例下面三个方法制作知识属性