1. 概念

block是块级元素，inline是行内元素，而inline-block则是让元素既可以像块级元素那样，可以设置宽度和高度，又能像行内元素那样，让具有宽高的这些元素排列在一行内

ul{	background: red;	margin: 50px;}	li{	list-style-type: none;	display: inline-block;	background: gray;	color: white;	font-size: 16pt;	width:100px;}/*html*/
    
	
     
1111
	
     
2222
	
     
3333
	
     
4444
	
     
5555
	
     
6666
    
复制代码

通过代码结果可知，ul是块级元素，而li是行内元素,但具有宽度

应用：

1. 可以用在导航栏、菜单上，代替浮动方法带来的父元素高度塌陷
2. 可以用在作为按钮的a链接上，使按钮与文档在同一行内

2. 高度特性

2.1

代码与1点相同，给第一个li标签增加css属性：

li:first-child{	background: black;	height: 50px;}复制代码

由于ul的高度没有设置，所以由ul里的li撑起，且取决于高度最大的li

2.2

ul{	background: red;	margin: 50px;}li{	list-style-type: none;	display: inline-block;	background: gray;	color: white;	font-size: 16pt;	width: 300px;}/*html*/
    
	
     
1111
	
     
2222
	
     
3333
	
     
4444
	
     
5555
	
     
6666
	
     
7777
    
复制代码

给第三个li标签添加了50px的高度

可以看到，在ul元素内，li在一行放不下的情况下， 会排列到第二行，并且第一行的高度由高度最大的li决定。inline-block的排列不像浮动那样，浮动元素会卡在高度过大的中间元素处

3. inline-block元素间的换行符产生的间隙

通过上面的例子，可以发现每个li元素之间都会有一个小间隔，而这些间隔是由html代码中的换行产生的

解决办法

3.1

把li标签之间的空格去掉

    
	
     
	1111
     
	2222
     
	3333
     
	4444
     
	5555
     
	6666
     
	7777
    
复制代码

3.2

给父元素添加font-size:0;

(查网上资料，有的说chrome不兼容此方法，但测试是可以的，所以表示疑问？)