对inline-block的一点总结

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
	
"height: 50px; background: black;">3333
	
4444
	
5555
	
6666
	
7777

复制代码

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

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

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

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

解决办法

3.1

把li标签之间的空格去掉

	

	1111

	2222
"height: 50px; background: black;">
	3333

	4444

	5555

	6666

	7777

复制代码

3.2

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

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