inline-block的理解

首先我们大概区分下 inline与inline-block、block的区别，

官方定义如下：

inline：内联元素，从左到右依次排列，宽度高度由内容决定；

block：块级元素，独占一行，可以设定宽高；

inline-block：内联块元素，从左到右依次排列，可以设定宽高。

这里我们需要注意的地方有：

1.在有多个内容高度不一样的 内联元素的时候， 内联元素的位置是从最高的高度范围内从下到上排列的，如下：

<div>
    小字体<span style="font-size:50px">大字体</span>
  </div>

样式如下：

2.inline-block在排列的时候，元素和元素之间有空隙，如下代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
   .lineblock{
       width:100px;
       height:100px;
       background-color:green;
       display:inline-block;
   }
  </style>
</head>
<body>
  <div class="lineblock"></div>
  <div class="lineblock"></div>
  <div class="lineblock"></div>
  <div class="lineblock"></div>
</body>
</html>

效果如下：

对此，我们又两种解决方案：

（1）设置容器的font-size:0，如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
  #container{
    font-size:0;
  }
   .lineblock{
       width:100px;
       height:100px;
       background-color:green;
       display:inline-block;
   }
  </style>
</head>
<body>
  <div id="container">
    <div class="lineblock"></div>
    <div class="lineblock"></div>
    <div class="lineblock"></div>
    <div class="lineblock"></div>
  </div>
</body>
</html>

效果如下：

完美解决，不过font-size:0在容器里面有文字的时候，比较麻烦，还得重新设置容器中文字的大小，而且有的浏览器会失效，比如IE7或者低版本的chrome。

（2）设置letter-spaceing的值，代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
  #container{
    letter-spacing:-4px;
  }
   .lineblock{
       width:100px;
       height:100px;
       background-color:green;
       display:inline-block;
   }
  </style>
</head>
<body>
  <div id="container">
    <div class="lineblock"></div>
    <div class="lineblock"></div>
    <div class="lineblock"></div>
    <div class="lineblock"></div>
    <div class="lineblock"></div>
  </div>
</body>
</html>

但是有个问题，中间的间隙变的不一样了，可以解决间隙的问题，但是有点勉强

（3）把元素和元素之间的换行去掉，代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
   .lineblock{
       width:100px;
       height:100px;
       background-color:green;
       display:inline-block;
   }
  </style>
</head>
<body>
  <div id="container">
    <div class="lineblock"></div><div class="lineblock"></div><div class="lineblock"></div>
    <div class="lineblock"></div>
    <div class="lineblock"></div>
  </div>
</body>
</html>

效果如下： ，我们发现不换行，则没有空格，换行则有空格，这是因为浏览器中对HTML文档流解析的时候，把空格解析为空格了，所以就会有间隙，对于inline元素的布局同理，代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>

</head>
<body>

我是代码中的第一行

我是第二行
  </body>
</html>

效果如下：

（4）这种也是我们解决间隙常用到的一中方法，设置容器的font-size:0，代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    #container{
      font-size:0;
    }
   .lineblock{
       width:100px;
       height:100px;
       background-color:green;
       display:inline-block;
   }
  </style>
</head>
<body>
  <div id="container">
    <div class="lineblock"></div><div class="lineblock"></div><div class="lineblock"></div>
    <div class="lineblock"></div>
    <div class="lineblock"></div>
  </div>
</body>
</html>

效果如下：

讲了这么多，其实就为了了解一句话：多个inline 、inline-block元素的换行在浏览器中会解析为空格，希望对大家有帮助。