一、vertical-align 一）定義：定義行內元素的基線相對於該所在基線的垂直對齊。（只針對行類塊inline/inline-block/<img>，塊級不適用！） 二）語法： 三）某些數值： 四）何為基線呢？？關於基線 有這樣的說法： 像不像我們小時候寫的英文字母的線，實在是太TMD像了，對 ...
一、vertical-align
一）定義：定義行內元素的基線相對於該所在基線的垂直對齊。（只針對行類塊inline/inline-block/<img>，塊級不適用！）
二）語法：
三）某些數值：
四）何為基線呢？？關於基線 有這樣的說法：
像不像我們小時候寫的英文字母的線，實在是太TMD像了，對，這就是，而我們經常對準線來寫的稱為基線baseline。。。
五）那麼，我的vertical-align為什麼打死都不起作用呢？？此時 心中有句mmp不知當不當講？
這就要說到vertical-align特性了，這得認識到 vertical-align 是依賴於 inline 或者是 inline-block （table-cell也可以理解為inline-block水平）屬性的元素。
所謂inline-block水平的元素，就是既可以與inline水平元素混排，又能設置高寬屬性的元素。例如圖片，按鈕，單覆選框，單行/多行文本框等HTML控制項，只有這些元素預設情況下會對vertical-align屬性起作用。
六）說到重點了，我的vertical-align怎樣才起作用呢？
1.當只有一個元素的時候：
大致地說下：我弄了個大的盒子，然後往裡面放了個紅色的小盒子，為了好看點，我先讓紅色的小盒子 {text-align:center;} 水平居中了，於是我的樣式和body部分如下：
<div> <span></span> </div>
1 div{width:800px; height:800px; border:4px solid blue;text-lign:center;} 2 span{display:inline-block;width:200px;height:200px;background:red;}
正所謂，除了vertical-align還可以想想其他方法嘛，所以，我想到了用line-height（因為 inline-block 可以用line-height屬性），於是，我給 <div>
加了個 {line-height:800px;} ，於是就成了這樣。
此時心中我有一萬隻草泥馬奔騰而過。。。
然後，我發現， line-height 與 vertical-align 缺一不可。。於是我為 <span> 加了個藍buff，呵呵，王天不負有心人哇，更何況我有心又有肺。它終於成功了。
div{width:800px; height:800px;border:4px solid blue;text-align:center; line-height:800px;}
span{display:inline-block;width:200px;height:200px;background:red; vertical-align:middle;}
2.當有兩個元素的時候相互碰撞。。。（額。。。貌似。。。）
別廢話，直接例子：首先嘛，繼續用上面的例子，在上面例子的基礎上我在 <div> 中加了一行文字： <a>Fuck</a> ，為了好看，我給了樣式： a{color:green;} div{font-size:100px;} 於是就有了這樣。。
<div> <span></span> <a>Fuck</a> </div>
div{width:800px; height:800px; border:4px solid blue;text-lign:center;font-size:100px; line-height:800px;}
span{display:inline-block;width:200px;height:200px;background:red; vertical-align:middle;}
a{color:green;}
實例一：Middle 當我發現我的瀏覽器下的紅色盒子 <span> 原來還有 {vertical-align:middle;} 的時候，我決定假裝沒看見，於是，紅色的盒子的基部基於文字的基線對齊。。就是我們說的居中。
實例二：Bottom 抱著好奇的心，我改成了 {vertical-align: bottom;} 時，於是，它變成了
div{width:800px; height:800px; border:4px solid blue;text-lign:center;font-size:100px; line-height:800px;}
span{display:inline-block;width:200px;height:200px;background:red; vertical-align: bottom;}
a{color:green;}
實例三：Text-bottom 在選項中見到了與文本相關的字眼text，於是我再次嘗試了下，改成了 {vertical-align:text-bottom;} ，它就這樣了
div{width:800px; height:800px; border:4px solid blue;text-lign:center;font-size:100px; line-height:800px;}
span{display:inline-block;width:200px;height:200px;background:red; vertical-align:text-bottom;}
a{color:green;}
等等，what？？？突然發現了不得了的事情了，妖獸了，我發現了新大陸了。
—————對齊方式為 {text-align:top;} {text-align:middle;} {text-align:bottom;}受父級 line-height 的影響。。。
為了很好的解釋原因，我只給了父級 div{line-height: 500px}，你會發現紅色盒子和Fuck的位置變了,看到沒有，它們都上移了
div{width:800px; height:800px;border:4px solid blue;text-align:center;font-size:100px; line-height:500px;}
span{display:inline-block;width:200px;height:200px;background:red; vertical-align:middle;}
—————凡是與文字對齊 {text-align:text-top;} {text-align:text-bottom;} 受父級font-size的影響。。。。
為了驗證，我只增大了父級的字體大小到200px於是，它就成這樣了，看到了嗎，看到紅色盒子位置還有Fuck的位置的變化了嗎？？
div{width:800px; height:800px;border:4px solid blue;text-align:center;line-height:800px; font-size:200px;}
span{display:inline-block;width:200px;height:200px;background:red; vertical-align:text-bottom;}
a{color:green;}
mmp。。突然發現其實我可以直接給Fuck一個背景色就可以一眼看出底線了。。。mmp。。。
預知下回如何，請聽下回小晴哥前端小白的前端日記。。。未完待續。。還得繼續補補
二、<img>
一）定義：<img> 標簽創建的是被引用圖像的占位空間。<img> 標簽並不會在網頁中插入圖像，而是從網頁上鏈接圖像。
二）屬性：
別看那麼多了，有些不要，就不要了吧，let it go~
三）特性：
0.屬於行內塊元素inline-block；
1.支持寬高；
2.支持橫排顯示；
3.支持 margin ，但不支持 {margin:auto；} 來居中；
4.支持 {text-align:center;} ,給父級；
5.支持line-height；
6.中間的空格被解析，可以用 {font-size：0；} 也可以用 {vertical-align：middle;} 來解決這個空格buggy。
<img>就複習到這了吧。對img熟悉到鼻孔都聞出味道了。。
——有需要再補補
三、cursor
本寶寶覺得，cursor真心不用多看了。。。。。。。。。。但只寫一點。。。。。 {cursor: url('mouse.cur'),pointer;} 要想用系統以外的 （ 滑鼠.cur ） 樣式，後面一定要一定要一定要帶上系統有的充當備胎，不然會GG的！！
cursor: url('mouse.cur'),pointer;
