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