CSS布局方式--inline-block 布局

布局其实就是想办法怎样将一些元素横向的排列起来，纵向因为块级元素的存在会自动占据一行。

inline-block 元素会占据一行并且能够调整宽高很适合将这些元素排列在一行，并且使用 inline-block 元素排列没有清除浮动这样的问题。

可是，使用 inline-block 布局两个元素之间会有一个空白间隙，下面一块儿来看一下。

html代码

<div class="container">
  <div class="left">
    left
  </div>
  <div class="right">
    right
  </div>
</div>

css 代码

.container {
  width: 800px;
  height: 200px;
  /*font-size: 0;*/
}
.left {
  /*font-size: 14px;*/
  background-color: red;
  display: inline-block;
  width: 200px;
  height: 200px;
}
.right {
  /*font-size: 14px;*/
  background-color: blue;
  display: inline-block;
  width: 600px;
  height: 200px;
}

结果以下：

按道理说，container 的宽度正好等于 left 和 right 的宽度之和，应该并列在一块儿，可是没有，如今咱们减少一些 right 的宽度，将 right 的宽度设置为 500 px，结果以下

会发现中间有一个空白的间隙，这是为何呢？

由于如今使用的是 inline-block 元素，为了方便理解，能够将 inline-block 元素当作是两个文字，文字与文字之间不多是连在一块儿的，确定是有间隙的。

既然知道了是文字的问题，那咱们就将父元素 container 的字体大小设置为 0，但是这个时候会发现 left 和 right 这两个单词也没有了，这是由于 left 和 right 元素继承了父级元素的字体大小，这时候咱们只须要分别设置 left 和 right 元素的字体大小便可。

将 css 代码修改以下

.container {
  width: 800px;
  height: 200px;
  font-size: 0; /* 新增 */
}
.left {
  font-size: 14px; /* 新增 */
  background-color: red;
  display: inline-block;
  width: 200px;
  height: 200px;
}
.right {
  font-size: 14px; /* 新增 */
  background-color: blue;
  display: inline-block;
  width: 600px;
  height: 200px;
}

结果以下

上面是一种方法，下面能够从 html 代码的角度来解决这个问题。

引发上面间隙的根本缘由是因为 left 元素和 right 元素代码之间不是紧挨着的致使中间有间隙，能够将 html 代码改为下面这样：

<div class="container">
  <div class="left">
    left
  </div><div class="right">
    right
  </div>
</div>
<!-- 或利用注释的方式 -->
<div class="container">
  <div class="left">
    left
  </div><!--
--><div class="right">
  right
  </div>
</div>

结果以下

完，后续还会总结一下flex布局，float布局，table 表格布局等 CSS 布局方式。
若有不恰当之处，欢迎指正哦.