「前端早讀君008」新手必踩坑之display: inline-block

今日勵志語

往日不可追，來日猶可期，祝你們2019年繼往開來

迷之間隙

咱們建立一個導航列表，並將其列表 item 設置爲 inline-block，主要代碼以下：

<div class="nav">
  <div class="nav-item"><a>我</a></div>
  <div class="nav-item"><a>我</a></div>
  <div class="nav-item"><a>我</a></div>
</div>
.nav {
  background: #999;
}
.nav-item{
  display:inline-block; /* 設置爲inline-block */
  width: 100px;
  background: #ddd;
}

效果圖以下：

咱們從效果圖中能夠看到列表 item 之間有一點小空隙，可是咱們在代碼中並無設置 margin 水平間距。那麼這個空隙是如何產生的呢？

這是由於咱們編寫代碼時輸入空格、換行都會產生空白符。而瀏覽器是不會忽略空白符的，且對於多個連續的空白符瀏覽器會自動將其合併成一個，故產生了所謂的間隙。

對於上面實例，咱們在列表 item 元素之間輸入了回車換行以方便閱讀，而這間隙正是這個回車換行產生的空白符。

一樣對於全部的行內元素（inline，inline-block），換行都會產生空白符的間隙。

如何消除空白符

從上面咱們瞭解到空白符，是瀏覽器正常的表現行爲。可是對於某些場景來講，並不美觀，並且間隙大小非可控，因此咱們每每須要去掉這個空白間隙。通常來講咱們有兩種方法來去掉這個換行引發間隙：代碼不換行和設置 font-size。

代碼不換行

咱們瞭解到，因爲換行空格致使產生換行符，所以咱們能夠將上述例子中的列表 item 寫成一行，這樣空白符便消失，間隙就不復存在了。其代碼以下：

<div class="nav">
  <div class="nav-item">導航</div><div class="nav-item">導航</div><div class="nav-item">導航</div>
</div>

但考慮到代碼可讀及維護性，咱們通常不建議連成一行的寫法。

設置 font-size

首先要理解空白符歸根結底是個字符，所以，咱們能夠經過設置 font-size 屬性來控制產生的間隙的大小。咱們知道若是將 font-size 設置爲 0，文字字符是無法顯示的，那麼一樣這個空白字也沒了，間隙也就沒了。

因而順着這個思路就有了另外一個解決方案：經過設置父元素的 font-size 爲 0 來去掉這個間隙，而後重置子元素的 font-size，讓其恢復子元素文字字符。

因此該方法代碼以下：

.nav {
  background: #999;
  font-size: 0; /* 空白字符大小爲0 */
}
.nav-item{
  display:inline-block;
  width: 100px;
  font-size: 16px; /* 重置 font-size 爲16px*/
  background: #ddd;
}

使用該方法時須要特別注意其子元素必定要重置 font-size，否則很容易掉進坑裏（文字顯示不出來）。

對齊問題

因爲 inline-block 屬於行內級元素，因此 vertical-align 屬性一樣對其適用。

在正式講解 vertical-align 以前，咱們須要先說一些基本概念。

中線、基線、頂線、底線

中線（middle）、基線（baseline）、頂線（text-top、底線（text-bottom））是文本的幾個基本線，其對應位置以下圖：

• 基線（base line）：小寫英文字母x的下端沿。
• 中線（middle line）：小寫英文字母x的中間。
• 頂線（text-top）：父元素 font-size 大小所組成的一個內容區域的頂部
• 底線（text-bottom）：父元素 font-size 大小所組成的一個內容區域的底部
• vertical-align 的值

vertical-align 只接受8個關鍵字、一個百分數值或者一個長度值。下面咱們將看看各關鍵字如何做用於行內元素。

1. baseline 默認元素的基線與父元素的基線對齊。
2. sub 將元素的基線與其父元素的下標基線對齊。
3. super 將元素的基線與其父代的上標 - 基線對齊。
4. text-top 將元素的頂部與父元素的字體頂部對齊。
5. text-bottom 將元素的底部與父元素的字體的底部對齊。
6. middle 將元素的中間與基線對齊加上父元素的x-height的一半。
7. top 將元素的頂部和其後代與整行的頂部對齊。
8. bottom 將元素的底部和其後代與整行的底部對齊。
9. <length> 將元素的基線對準給定長度高於其父元素的基線。
10. <percentage> 像<長度>值，百分比是line-height屬性的百分比。

打開微信掃一掃關注早讀君，天天早晨爲你推送前端知識，度過擠地鐵坐公交的時光