一、首先要了解什么是块级元素和行级元素
块级元素：会占领页面一行，其后多个block元素会自动换行、可以设置width、height属性，设置width后同样占领一行，同样也可以设置padding和margin属性。（常见的块级元素有div、img、ul、form、p等）。
行级元素：与其它元素在同一行上的元素称为行级元素。高度、行高、及底边距不可改变。（常见有em、strong、br、input等）
display:inline-block，block，inline元素的区别
1、display：block将元素显示为块级元素，从而可以更好地操控元素的宽高，以及内外边距，每一个块级元素都是从新的一行开始。
2、display : inline将元素显示为行内元素，高度，行高以及底边距不可改变，高度就是内容文字或者图片的宽度，不可以改变。多个相邻的行内元素排在同一行里，知道页面一行排列不下，才会换新的一行。
3、display：inline-block看上去值名inline-block是一个混合产物，实际上确是如此，将元素显示为行内块状元素，设置该属性后，其他的行内块级元素会排列在同一行。比如我们li元素一个inline-block，使其既有block的宽度高度特性，又有inline的同行特性，在同一行内有不同高度内容的元素时，通常要设置对齐方式如vertical-align: top;来使元素顶部对齐。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>display:inline-block</title>
<style type="text/css">
li{
width:200px;
text-align: center;
list-style: none;
display: inline-block;
background-color: #eee;
}
</style>
</head>
<body>
<ul>
<li><a href="#">inline-block</a></li>
<li><a href="#">inline-block</a></li>
<li><a href="#">inline-block</a></li>
<li><a href="#">inline-block</a></li>
<li><a href="#">inline-block</a></li>
</ul>
</body>
</html>需要注意的是：
低版本的ie浏览器（ie6 ie7）是不支持display:inline-block;所以理论上ie是不识别的，但是在 ie 内核下有个部分叫做 hasLayout，只要触发了它，这个元素就可以设置高宽从而使行级元素拥有了display:inline-block属性的表象。
2261
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
