vertical-align 和 img屬性 和 滑鼠樣式，vertical-alignimg

vertical-align 和 img屬性 和 滑鼠樣式，vertical-alignimg
一、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;