对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*/
<ul>
	<li>1111</li>
	<li>2222</li>
	<li>3333</li>
	<li>4444</li>
	<li>5555</li>
	<li>6666</li>
</ul>

通过代码结果可知，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*/
<ul>
	<li>1111</li>
	<li>2222</li>
	<li style="height: 50px; background: black;">3333</li>
	<li>4444</li>
	<li>5555</li>
	<li>6666</li>
	<li>7777</li>
</ul>

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

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

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

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

解决办法

3.1

把li标签之间的空格去掉

<ul>
	<li>
	1111</li><li>
	2222</li><li style="height: 50px; background: black;">
	3333</li><li>
	4444</li><li>
	5555</li><li>
	6666</li><li>
	7777</li>
</ul>

3.2

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

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