初出茅廬，第一天實習的我就被inline-block坑了，在平時的練習中從未碰到這個坑，幸虧公司的乙個熱心的小夥伴指點，我才解決。也怪我學藝不精啦。好了，來說說我是怎麼被坑的吧。
ok，模擬一下場景，怎麼調都不對，愚蠢的我居然沒有去想inline-block的鍋。
我們從圖中可以看到中間黃色方塊的底部是和旁邊紅色方塊的英文本對齊的，和藍色方塊的中文字到倒是不對齊。
此時愚蠢的我會問，為啥排列的這麼奇怪，第一，紅色和藍色對齊，黃色在父盒子的頂部；第二，黃色盒子的底部和黃色盒子的英文本的底部居然是對齊的；第三，我明明沒有給盒子至今設定行距，為啥行距存在？帶著這三個問題，我檢視資料，親自demo，進行總結和補全。
熱心的網友為我們分享了baseline的文章。原來baseline是這樣的，在我們的英文作業本上是一行有四道槓，每個英文本呢都是基於第三道槓寫的，這道槓就成為基線，在我們的前端中，網頁顯示文字的時候也一樣，預設是以baseline對齊。比如我們寫「hj吃飯了沒有」，「h」的底部就是baseline的位置，『j』和「吃飯了沒有」都要以baseline進行顯示。
瀏覽器的文字以baseline為基準對齊，當然可以設定其他對齊方式，如vertical-aling。vertical-align只在inline和inline-block元素上應用，因為為這些元素需要排列在一行。現代瀏覽器幾乎都按baseline來對齊inline-block元素，但是ie6/7對inline-block並不 以baseline對齊，它以文字最底端對齊，和img不一樣。
這個baseline就解釋了第一和第二個問題，三個盒子都是inline-block元素，他們的基線是紅盒子的文字」id」的底部，所以，黃盒子才會要和」id」的底部對齊，既然要和這根基線對齊，那麼勢必要將兩個不同顏色的盒子擠下去啦。 使用vertical-align就可以改變這種排列，當然也可以將display:inline-block換成float:left.
都可以看到inline-block元素之間有間隙，那是因為inline-block包含html空白節點，如果html元素都進行換行，並且inline-block就會垂涎html空白節點，那麼如何去除這個空白節點呢？
刪除html空白節點
使用負邊距
margin-left或者margin-right，當然有些文章介紹使用」-0.25em」來解決，這也是跟元素的字型大小有極大的關係。所以我個人建議不使用負的margin來解決這樣的問題。
設定父元素字型為0
設定父元素的字型為「0」，然後在「inline-block」元素上重置字型需要的大小，這樣處理在firexfox,chrome等瀏覽器下是達到了效果，可是在safari下可問題依然存在。
丟失結束標籤
這種方法雖然能達到各瀏覽器的相容，但還是有乙個前提，那就是「doctype」要選擇對，在「xhtml」下可就問題又出來了。個人非常非常不推薦。
jquery方法
全相容的樣式解決方法
好吧，到這裡結束了，我所講的也是不夠準確和全面的。
MySQL CEO對甲骨文既愛又恨
資料庫市場的瞬息萬變由此可見 mysql首席執行官martin mickos先是稱呼甲骨文公司的某項產品為 殘廢軟體 crippleware 幾分鐘後又盛讚該公司為年度最佳夥伴。mickos 26日在mysql使用者會議的演說中力捧甲骨文，卻又嚴詞批評其產品。如此反覆的原因在於，mysql一方面仰賴...
令人又愛又恨的const
關於c的關鍵字 const的理解和用法 const在c中的用法很靈活 相信c 中也一樣 個人感覺對之既愛又恨，有時候感覺const很好用，同時又經 常會因為它的優點而犯錯，犯錯的原因除了粗心之外，另乙個更重要的，就是以前對const理解不到位。於是今天 自己寫成一篇小總結。如果是初學者，建議好好看一...
讓我又愛又恨的C
上大學是我一直夢想的，可當我知道我的專業是計算機的時候，我還是很失望的。一直以來我對計算機的了解並不深，我深知這對我來說不容易。可我也絕不是乙個輕言放棄的人。我嘗試著去慢慢學習。隨後就接觸到了讓我愛恨交加的c 剛接觸時對我來說很陌生也很好奇，當親手敲出那幾行 寫著 我來了 的時候，心情是格外的激動，...