display属性block/inlineblock/inline的区别_说一下display这几个属性值的区别:block、inline、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 属性的值。

一、block

block是块级元素，总是在新行上开始；高度、行高、顶和底边距都可以控制；如果不设置宽度的话，宽度默认值是它容器的100%。

<div><p><h1><form><ul><li>都是块级元素。

1 2	`<p` `class="dis_block">block元素block元素</p>` `<p` `class="dis_block">block元素block元素</p>`

CSS：

.dis_block{

background:#eee;

border:2px solid #ccc;

padding:5px;

margin:6px;

height:30px;

line-height:30px;

}

二、inline　　

inline元素和其他元素都在一行上；高、行高、顶和底边距不可改变；宽度是它内容的宽度，不可改变，设置宽度无效。

特点就是：

设置宽度、高度无效，

设置行高会增加顶部和底部的间距但内容区高度不变，

设置padding有效

设置margin-left、margin-right有效

设置margin-top、margin-bottom无效

1 2	`<span` `class="dis_inline">inline元素inline元素</span>` `<span` `class="dis_inline">inline元素inline元素</span>`

CSS：　

.dis_inline{background:#fea;border:2px solid #ccc;padding:3px; margin:10px;height:30px;line-height:30px;width:300px;}

三、inline-block

display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。

旁边的内联对象会被呈现在同一行，允许空格。

特点是：

可以设置宽度高度行高

可以设置padding

可以设置marign

1 2	`<p` `class="dis_inlineblock">inline-block元素inline-bloc元素</p>` `<p` `class="dis_inlineblock">inline-block元素inline-bloc元素</p>`

CSS：

1	`.dis_inlineblock{display:inline-block;display:inline;zoom:1;background:#2fa;border:2px` `solid` `#ccc;padding:3px;margin:10px;height:30px;line-height:30px;width:300px;}`