【正視CSS 02】inline與line-height、float、absolute的故事
前言
那是一個很久之前的故事了。。。之前我一直認為CSS最重要的是佈局，將一個圖片很好的以網頁顯示出來就是王道。
但是，經過後來慢慢入門後，才發現其實佈局感覺不是很難了，倒是行內元素這個傢伙深藏不露。
行內元素屬於那種很仁慈的主，你瞭解他你能做得更好，你不瞭解他，你的頁面也不會過於亂，所以我們就容易忽略他的威力，所以今天我們一起來好好的審視一番吧
那一年，你未娶我未嫁
在那一年我會寫這樣的程式碼：
<p> 霹靂布袋戲中最廣為人知的主角之一。葉小釵一生悲情，命運多舛，親人恩人朋友一個個離他而去，遭遇令人心酸，卻也因此練就了超絕的禪定功夫。 耿直專一、守信重諾的俠客，雖為侍童出身，但不屈不撓的個性，豐富的人生閱歷，讓其成為中原武林不可或缺的一員， 享有<span style=" width: 200px; height: 200px; margin: 10px; padding: 10px; border: 1px solid black;">「刀狂劍痴」</span> 之盛名，披肩的白髮和臉上的英雄疤，搭配沉默無言的特色，營造出該角色獨特的風範。</p>
然後，我再做了一點demo，就以為掌握到了精華：
1 設定width無效
2 設定height無效
3 margin上下無效，左右有效
4 padding上下無效，左右有效（元素範圍增大，但是元素內容無效）
以上便是我很長一段時間對行內元素的理解，只是流於表面，而且一段時間也沒有什麼問題的。
後來一點，各方面有所成長，我發現其實自己是忽略了一些東西的。
奇怪的現象
在上面我們發現設定高度和寬度是沒有意義的，特別是高度又讓我們變得更加疑惑了，請看例子：
1 <div>我在之前</div> 2 <div style=" border: 1px solid black; background-color: Red; ">空格</div> 3 <div>我在之和</div>
以上是div中有字和div中沒字時候的差別，我們發現div若是沒字的話，他就“消失了”。
有了文字後，div就有高度了，所以我們認為是文字撐開了div，但是根據我們之前對行內元素的理解後，我們會慢慢懷疑不是文字撐開了高度而是line-height：
1 <div>我在之前</div> 2 <div style=" border: 1px solid black; background-color: Red; line-height: 1px; ">空格</div> 3 <div>我在之和</div>
對於這張圖其實我們是應該感到詫異的，因為他狠狠的給了我一巴掌（真是有圖有真相啊）。
他基本就說明了，文字其實並沒有撐開div，控制div高度的是line-height，但是為什麼沒有文字時候他就沒有高度呢？
在inline box 模型中，有個line boxes，他就是文字的框（CSS裡面神馬東西都會有框），一行文字有一個line boxes，上面的“空格”就有一個line boxes（每個文字又會有自己的行內框inline box，這兩爺們取名過於相似，容易誤解），div空著的時候裡面沒有line boxes，但是有字後，這傢伙就有line boxes了，所以他就很囂張的“膨脹”了起來。
以上的line boxes還不是最終boss，最終boss其實是裡面的行內元素，因為事實上是行內元素的inline boxes形成的行高，來一個走：
1 <div>我在之前</div> 2 <div style=" border: 1px solid black; background-color: Red; line-height: 1px; "> 3 <img src="1.png" />空格</div> 4 <div>我在之和</div>
看著我們偉大的圖片，撐開了我們的div！
PS：其實我這裡不該引入圖片的，他會把情況變得更加複雜，比如你給圖片設定行高什麼的，你會發現。。。所以，我們重新來個例子：
1 <div>我在之前</div> 2 <div style=" border: 1px solid black; background-color: Red; line-height: 1px; "> 3 <span style=" ">葉小釵</span>空格</div> 4 <div>我在之和</div>
1 <div>我在之前</div> 2 <div style=" border: 1px solid black; background-color: Red; line-height: 1px; "> 3 <span style="line-height: 10px; ">葉小釵</span>空格</div> 4 <div>我在之和</div>
我們可以看到，無論圖片或者後面的span，“葉小釵”將一條街的高度都拉高啦！！！
這是為什麼呢？？
因為行內元素“葉小釵”的inline boxes 將整個line boxes拉高了（其實葉小釵是3個inline boxes了。。。）
在這個情況下，我們再來看看文字居中的實現：
1 <div>我在之前</div> 2 <div style=" border: 1px solid black; background-color: Red; line-height: 40px; "> 3 葉小釵</div> 4 <div>我在之和</div>
我們發現，這裡並沒有把height與line-height設定為一樣，但是他還是居中了，其實是因為沒有設定height的時候line-height就是他的height了，所以height有時候還是需要的。
至此，我想我們隊行內元素的認識應該更加深刻了吧。。。。於是我們再拓寬一下吧。
float與行內元素
float是個壞傢伙，我們之前就說過，inline boxes讓line boxes擁有了高度，所以我們整個元素就有了高度，但是我們來看一下情況：
1 <div>我在之前</div> 2 <div style=" border: 1px solid black; background-color: Red; line-height: 2px; "> 3 <span style="line-height: 10px; ">葉小釵</span>空格</div> 4 <div>我在之和</div>
這張圖沒問題，“葉小釵”拉高了整個line boxes的高度，但是我們若是給他加上浮動呢？
1 <div>我在之前</div> 2 <div style=" border: 1px solid black; background-color: Red; line-height: 2px; "> 3 <span style="line-height: 10px; float: left; ">葉小釵</span>空格</div> 4 <div>我在之和</div>
我們來看看float這個壞傢伙幹了些什麼事情：
① 破壞了我“葉小釵”的高度，我連高度都沒了，而且脫離了文件流（嗚嗚，救命）
② 雖然我沒有了高度，卻為何要給我寬度，所以後面的字在我之前
看吧，float這傢伙夠壞吧，所以我們佈局不要用著傢伙了，因為他讓葉小釵沒了高度！！！！
我們為原來的程式碼加點效果也許又會看到一點不同的東西：
1 <div>我在之前</div> 2 <div style=" border: 1px solid black; background-color: Red; line-height: 2px; "> 3 <span style=" float: left; background-color: Gray; ">葉小釵</span>空格</div> 4 <div>我在之和</div>
這是無比詭異的一幕！我們在學習行內元素時候為什麼難，因為稍不注意就會顛覆我們的想法，稍不注意又會陷入疑惑！
我們明明破壞了葉小釵的高度，為什麼他還會有那麼一點背景呢？？？
我這裡就斗膽認為div有一點點預設高度了，若是不對請大神指出。若是動態指定其高度，那麼背景區域會更大一點，好了，我們馬上來試試：
1 <div>我在之前</div> 2 <div style=" border: 1px solid black; background-color: Red; line-height: 2px; "> 3 <span style=" float: left; background-color: Gray; width: 50px; height: 50px; padding: 10px; margin: 10px; ">葉小釵</span>空格</div> 4 <div>我在之和</div>
主意來！我們葉小釵外面的元素可是span喲，按道理說span設定height時無效的，但是這裡明顯他是有效的！！這又是為什麼呢？這個和我們元素的框又產生關係了。
PS：事實上這裡“float強迫行內元素變成了inline-block元素啦”。
float這傢伙的做法便是：破壞之、重建之！
反正不管怎麼說，float讓行內元素變成了不是inline-block的inline-block元素。
行內元素與absolute
與float一致，absolute乾的壞事不必他好，有過之而無不及啊！！！也是讓元素脫離文件流。
絕對定位元素會將一個元素的width和height破壞的一乾二淨(不對請指出)。
若是說float是白蟻的話，absolute就是會飛的白蟻，其實我們這樣認為不好！
absolute雖然會破壞重建一個元素，但是他本身就是用來佈局的，會飛的inline-box就是對他最好的形容。反正我的意思就是大家要好好對待他了：
<div>我在之前</div> <div style=" border: 1px solid black; background-color: Red; line-height: 2px; "> <span style=" position: absolute; background-color: Gray; width: 50px; height: 50px; padding: 10px; margin: 10px; ">葉小釵</span>空格</div> <div>我在之和</div>
absolute就是會飛的inline-block。
行內元素與vertical-algin
vertical-align這個傢伙是行內元素對齊的工具：
以上一坨東西，我這裡就不管了，反正大家一定記得：
<input type="checkbox" style=" vertical-align: -2px;"/>
這段程式碼有什麼用就好。
有時候我們會將vertical-align用於塊級元素，這樣是不起作用滴，他只能用於塊級或者行內元素，而且會讓一整塊相對於基線做漂移。
我們這裡這個可能用不到太深入，這邊便不深究了。接下來我們以一個例子結束本文吧。
參考資料
獨孤求敗當年悟道獨孤九劍花費10年光景，令狐沖1年不到就學會，這就是名師的威力啦，所以我們要多學習，多借鑑，甚至多模仿人家的思想，然後集合大家之長形成自己的理念甚至學說，過程如何不重要，重要的是不停的學習。該文參考(傳說中的名師)：
結語
中午不睡，下午崩潰！！！後面點時間我們還是一起研究bootstrap與CSS相關的東西。