inline-block和run-in的区别

display的两个属性值inline-block和run-in，这两者之间的区别。

首先是inline-block，它是行内块元素，与它前一个元素的显示角色有关。如果它之前的的元素是块级元素的话，那它也将表现为块级元素；如果它之前的元素表现得是行内元素，则它也表示为行内元素。说白了就是，设置为inline-block的元素的显示效果和它前一个元素的表现一致,，与后一个元素的表现形式无关。

html code：（前一个为块级元素时）

<div>这是块级元素,查看效果</div><span>这个设置了inline-block</span>

css code:

div{    background:yellow;    width:100px;    margin-bottom:10px;}span{    display:inline-block;    background:blue;}

效果：

html code:（前个元素是行内元素时）

<span>这个是行内元素，查看效果</span><div>设置为inline-block</div>

css code:

span{    background:yellow;}div{    display:inline-block;    background:red;}

效果：

以上就是inline-block的一些知识。

接下来看看run-in是怎么工作的；

run-in也是一个有意思的行内块级元素，不过它与inline-block的表现是完全不同的。它的表现与它的后一个直接元素直接挂钩。如果它的后一个直接元素是块级元素的话，它会表现为行内元素插入到该块级元素中；如果它的后一个元素是行内元素的话，它就会表现为块级元素，坦白的讲就是跟后一个元素的表现是完全相反的,最后，它跟前一个元素的表现形式是无关的。

html code :(后一个元素是块级元素时)

<div class="box_1">设置为run-in，查看效果</div><div class="box_2">这个是块级元素元素</div>

css code:

.box_1{    display:run-in;    background:red;}

效果：

但是在firefox上显示却和chrome上的效果不是一样的，可能是浏览器的支持问题吧。

html code：（后一个元素是行内元素时）

<div class="box_1">设置为run-in，查看效果</div><span>这个是行内元素</span>

css code:

.box_1{    display:run-in;}

效果：