首页 > 代码库 > inline-block的理解

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元素的换行在浏览器中会解析为空格,希望对大家有帮助。

inline-block的理解