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 布局方式。
如有不恰當之處，歡迎指正哦.