CSS display属性的值及做用

display 的属性值有：none|inline|block|inline-block|list-item|run-in|table|inline-table|table-row-group|table-header-group|table-footer-group|table-row|table-column-group|table-column|table-cell|table-caption|inherit

其中经常使用的的有none、inline、block、inline-block。分别的意思是：

一、none： 元素不会显示，并且改元素现实的空间也不会保留。但有另一个 visibility: hidden， 是保留元素的空间的。

二、inline： display的默认属性。将元素显示为内联元素，元素先后没有换行符。咱们知道内联元素是没法设置宽高的，因此一旦将元素的display 属性设为 inline， 设置属性height和width是没有用的。此时影响它的高度通常是内部元素的高度（font-size）和padding。

三、block： 将元素将显示为块级元素，元素先后会带有换行符。设置为block后，元素能够设置width和height了。元素独占一行。

四、inline-block：行内块元素。这个属性值融合了inline 和 block 的特性，便是它既是内联元素，又能够设置width和height。

看例子

.inline{
    display:inline; 
    width:100px; 
    height:100px; 
    padding:10px; 
    background-color:red;
}
.block{
    display:block; 
    width:100px; 
    height:100px; 
    padding:10px;
    background-color:green;
}
.inline-block{
    display:inline-block; 
    width:100px;
    height:100px; 
    padding:10px;
    background-color:blue;
}


<div class="wrap">
    <div class="inline">
    inline
    </div>inline
    <div class="block">
    block
    </div> block
    <div class="inline-block">
    inline-block
    </div>inline-block
</div>

这里说起下内联元素和块级元素的一些特色：

内联元素：

  和其余元素都在一行上；
   元素的高度、宽度及顶部和底部边距不可设置；
   元素的宽度就是它包含的文字或图片的宽度，不可改变。

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

块级元素：

   每一个块级元素都重新的一行开始，而且其后的元素也另起一行。（真霸道，一个块级元素独占一行）；
   元素的高度、宽度、行高以及顶和底边距均可设置。
   元素宽度在不设置的状况下，是它自己父容器的100%（和父元素的宽度一致），除非设定一个宽度。

经常使用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form

内联块状元素：

   和其余元素都在一行上；
   元素的高度、宽度、行高以及顶和底边距均可设置。

经常使用的内联块状元素有：
<img>、<input>

 

其余display的属性值不是很经常使用，其具体的含义以下：

list-item：     此元素会做为列表显示。run-in：     此元素会根据上下文做为块级元素或内联元素显示。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 属性的值。另外有两个已经废除的属性值：compact     CSS 中有值 compact，不过因为缺少普遍支持，已经从 CSS2.1 中删除。marker     CSS 中有值 marker，不过因为缺少普遍支持，已经从 CSS2.1 中删除。