详解CSS display:inline-block的应用

  

阅读目录

• 基础知识
• inline-block的问题
• inline-block的应用
• 总结

本文详细描述了display:inline-block的基础知识，产生的问题和解决方法以及其常见的应用场景，加深了对inline-block应用的进一步理解。

回到顶部

基础知识

display:inline-block是什么呢？相信你们对这个属性并不陌生，根据名字inline-block咱们就能够大概猜出它是结合了inline和block二者的特性于一身，简单的说：设置了inline-block属性的元素既拥有了block元素能够设置width和height的特性，又保持了inline元素不换行的特性。

举例说明：之前咱们作横向菜单列表的时候，咱们能够经过li和float:left二者来实现，如今能够经过li和display:inline-block。

HTML代码：

1 <ul>
2     <li>首页</li>
3     <li>关于</li>
4     <li>热点</li>
5     <li>联系咱们</li>
6 </ul>

CSS代码

1 ul, li { padding: 0; margin: 0; list-style-type: none; }
2         li { display: inline-block; border: 1px solid #000; }

效果图

inline-block基本效果

能够看到li元素能够横向排列，而且能够设置width属性，你们能够复制代码本身查看效果或查看Demo

回到顶部

inline-block的问题

观察上面的例子，细心的同窗确定会发现，每一个li之间有一个小空隙，而咱们的代码中并无设置margin等相关属性，这是为何呢？

默认的inline元素

首先，咱们观察一下默认的inline元素的表现：

HTML代码

1 <a>首页</a>
2 <a>热点</a>

CSS代码

1 a { margin: 0; padding: 0; border: 1px solid #000; }

效果图

inline默认状况

默认状况下，inline元素之间就有空隙出现，因此结合了inline和block属性的inline-block属性天然也有这个特色。
那这些空隙是什么呢，它们是空白符！

消除空白符

在浏览器中，空白符是不会被浏览器忽略的，多个连续的空白符浏览器会自动将其合并成一个。咱们编写代码时写的空格，换行都会产生空白符。因此天然而然的两个元素之间会有空白符，若是将上述例子中的a标签写成一行，空白符消失，菜单之间也就紧凑起来了。

空白符虽然是浏览器正常的表现行为，可是一般状况下，设计师同窗的设计稿不会出现这些空隙，咱们在还原设计稿的时候，怎么去除掉这些空隙呢。
要去除空白符产生的间隙，首先要理解空白符归根结底是个字符，经过设置font-size属性能够控制产生的间隙的大小。
首先咱们将font-size设置成50px试试，修改CSS代码以下：

1 ul, li { padding: 0; margin: 0; list-style-type: none; font-size:50px}
2 li { display: inline-block; border: 1px solid #000; width: 100px; text-align: center;font-size:12px }

咱们修改ul的font-size为50px，而li的font-size为12px保持原来的字体大小，效果以下：

font-size:50px的空隙

能够看到菜单之间的空隙变大了。
接着咱们设置font-site属性为0px，代码以下

1 ul, li { padding: 0; margin: 0; list-style-type: none; font-size:0px}
2 li { display: inline-block; border: 1px solid #000; width: 100px; text-align: center;font-size:12px }

效果以下：

font-size:0的空隙

能够看到菜单之间的空隙没有了，你们能够自行查看Demo

兼容性问题

在IE8+，FF和Chrome的浏览器，inline-block能够完美的兼容，考虑到IE6和IE7等低版本浏览器的占用率，虽然有办法能够兼容，但本文再也不赘述，你们有兴趣的能够查找相关资料。

回到顶部

inline-block的应用

inline-block的应用什么场景有哪些呢？咱们你们考虑一个技术的应用场景时，首先必定要思考的是技术的特性和需求是否符合。inline-block的特色是结合inline和block两种属性的特性，能够设置width和height，而且元素保持行内排列的特性，基于这一点，全部行内排列而且能够设置大小的场景都是咱们能够考虑使用inline-block的应用场景。下面举例说明：

网页头部菜单

网页头部的菜单就是典型的横向排列而且须要设置大小的应用，在inline-block以前，实现菜单基本都是用float属性来实现，float属性会形成高度塌陷，须要清除浮动等问题，使用inline-block实现就不须要在乎这样的问题。代码以下：

HTML代码

 1 <div class="header">
 2     <ul>
 3         <li>
 4             <a href="javascript:;" target="_blank">服装城</a>
 5         </li>
 6         <li>
 7             <a href="javascript:;" target="_blank">美妆馆</a>
 8         </li>
 9         <li>
10             <a href="javascript:;" target="_blank">超市</a>
11         </li>
12         <li>
13             <a href="javascript:;" target="_blank">全球购</a>
14         </li>
15         <li>
16             <a href="javascript:;" target="_blank">闪购</a>
17         </li>
18         <li>
19             <a href="javascript:;" target="_blank">团购</a>
20         </li>
21         <li>
22             <a href="javascript:;" target="_blank">拍卖</a>
23         </li>
24         <li>
25             <a href="javascript:;" target="_blank">金融</a>
26         </li>
27         <li>
28             <a href="javascript:;" target="_blank">智能</a>
29         </li>
30     </ul>
31 </div>

CSS代码：

1 a, ul, li { padding: 0; margin: 0; list-style-type: none; }
2 a { text-decoration: none; color: #333; } 
3 .header ul { font-size: 0; text-align: center; }
4        .header li { display: inline-block; font-size: 16px; width: 80px; text-align: center; }

效果图

京东首页导航菜单

这是模仿京东首页头部导航菜单的实现，使用inline-block能够很简单的实现横向菜单列表

内联块元素

除了菜单以外，一切须要行内排列而且可设置大小的需求就能够用inline-block来实现。
例如使用a标签作按钮时，须要设置按钮的大小，咱们就可使用inline-block来实现。

HTML代码

1 <div>
2     点击右边的按钮直接购买
3     <a href="javascript:;" class="button">
4         购买
5     </a>
6 </div>

CSS代码

1 .button { display: inline-block; width: 150px; height: 45px; background: #b61d1d; color: #fff; text-align: center; line-height: 45px; font-size: 20px; }

效果图

a标签菜单

布局

inline-block也能够用于常见的布局，使用它就不须要去注意float属性布局带来的问题。
举例说明，建立一个常见的3列布局。

HTML代码

 1 <div class="wrap">
 2     <div class="header">
 3         网页头部
 4     </div>
 5     <div class="content">
 6         <div class="left">
 7             左侧
 8         </div>
 9         <div class="center">
10             中间
11         </div>
12         <div class="right">
13             右侧
14         </div>
15     </div>
16     <div class="footer">
17         网页底部
18     </div>
19 </div>

CSS代码

1 body, div { margin: 0; padding: 0; }
2 .header, .footer { width: 100%; background: #ccc; height: 120px; text-align: center; line-height: 120px; }
3 .content { margin: 0 auto; background: #ff6a00; width: 1000px; font-size: 0; }
4     .content .left, .content .center, .content .right { display: inline-block; font-size: 16px; height: 400px; }
5     .content .left, .content .right { width: 200px; }
6     .content .center { width: 600px; background: #00ffff; }

效果图

inline-block的三列布局

这个例子使用了inline-block作出了常见的网页布局。

关于inline-block的应用，只要是从左到右，从上到下，而且须要设置大小的列表均可以用它来实现，而这种需求是很是常见的，相比于float，我更推荐inline-block。inline-block的应用应该还有不少，你们能够多多挖掘出来。

回到顶部

总结

相比于使用float所带来的问题，使用inline-block所须要注意的点主要是空白符带来的问题，这一点也能够很方便的解决。
使用inline-block能够很方便的进行列表布局，更加符合咱们的思惟习惯，相信使用它的同窗们也会愈来愈多，欢迎你们讨论。

原文地址：http://luopq.com/2015/11/01/display-inline-block/