display的inline、block、inline-block的实际应用

最新推荐文章于 2025-08-29 15:56:14 发布

最新推荐文章于 2025-08-29 15:56:14 发布 · 135 阅读

文章标签：

#IE #CSS #HTML

html+css+javascript 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了CSS中inline-block属性的作用及应用场景，特别是在不同浏览器间的兼容性处理方法，包括如何在IE浏览器下实现类似效果。

inline与block经常用到，一个是以内联方式呈现，一个是以块级方式呈现。

那么inline-block是什么意思呢？

inline-block在IE下是不被解析的，但是IE下可以用其他的方式达到此效果。

inline是不可以定义高度的，block可以定义高度，但是应用此样式元素周围的其他元素必须要换行了，如果即想某个元素的周围不换行（内联方式呈现），又想定义其高度，那么inline-block就是最好的选择。

IE下如果想达到一样效果，可以将某个元素设置为inline，并定义其高度为1（也可以用zoom:1的方式，不过这样表达CSS的方式会通不过w3c的标准，但不影响实际效果）。

代码：

<style>
div,span{background-color:green;margin:5px;border:1px solid #333;padding:5px;height:52px;color:#fff;}
.b{display:block;}
.i{display:inline;}

div.ib{display:inline-block;}
* html div.ib{display:inline; height:1px}
a.ib{display:inline-block;}
span.v{padding:0;margin:0;border:0;vertical-align:middle;height:100%}
</style>
<div>div display:block</div>
<div class="i">div display:inline</div>
<div class="ib">div display:inline-block
  <span>inline-block child1</span>
  <span>inline-block child2</span>
</div>
<span>span display:inline</span>
<span class="b">span display:block</span>
<span><a class="ib">a display:block</a></span>
<br />
<div><span class="v"></span>vertical-align:middle</div>