【正視CSS07】再看vertical-align

範大腳腳發表於2017-12-07
CSS
前言
最近學習CSS有點走火入魔了，CSS一直是自己的短板，沒想到最近居然能靜下心來學了這麼多CSS的東西，著實值得表揚。
俗話說得好，不瘋活不成魔，我最近真有點刀狂劍痴的味道了。
有時候晚上學習結束後，一晚上睡得很淺，我感覺下雨了，但下的雨居然全部是html標籤！
我在電梯裡面看到了一張手機中的圖片，我詭異的笑了，因為我好像看到了他的佈局了！
於是，我魔杖了，是的，這是入魔的徵兆！凡是皆有其度，之前的過度就導致了我今天的問題。
我今天居然不知道該學習什麼了。。。。學習如逆水行舟，所以我們都要放平心態，一起再來看看吧，一起建設我們的CSS世界觀啦！
本文參考：
http://www.zhangxinxu.com/wordpress/?p=813
CSS佈局（一）
vertical-align
對的，本文的主角就是這個傢伙，其實之前一次又一次的提到了這個傢伙，今天卻又把它揪了出來，因為我發現我對他還是不夠了解。
數字
vertical-align: 2px;
這個的意思就是元素相對於基線向上偏移2px的意思，於是我們又會遇到基線，什麼是基線呢？
我這裡不好意思偷圖了，就自己畫一個吧：
知道神馬是基線了吧，雖然老夫很久不寫字了，但是想不到還是如此的飄泊！
百分比
我們之前碰到的百分比，比如width/height都是相對於父元素，其中font-size是相對於最近一個擁有該屬性的元素，而vertical-align是相對於該標籤的line-height而言的。
以上兩個來個例子：
這是一個好姑娘，於是我們改下程式碼：
PS：上面犯了一個很2的錯誤，將vertical-align用到了div上，大家不要像我這樣2
複製程式碼
 1 <html xmlns=”http://www.w3.org/1999/xhtml”>
 2 <head>
 3     <title></title>
 4     <style type=”text/css”>
 5         div { margin: 10px; border: 1px solid black;  }
 6         span { margin: 10px; border: 1px solid black; line-height: 20px; }
 7     </style>
 8 </head>
 9 <body>
10     <div>
11         <span style=”vertical-align: 4px;”>刀狂劍痴葉小釵 </span><span style=”vertical-align: 10%;”>
12             刀狂劍痴葉小釵 </span>
13     </div>
14 </body>
15 </html>
複製程式碼
這塊地方有很多可以注意的，也有很多東西可以看，所以我這裡建議各位去執行試試。
你會發現div的高度會跟著變化滴！！！
來，我們一起來探討下這個問題，哎，我這裡還是上例子吧：
大家看這個例子，我這裡將其設定為負值，行內元素就跑到塊級元素外面去了哦。
更有意思的東西在後面呢，我們在一個塊級元素裡面有2個行內元素，我們是可能將塊級元素撐開的！！！
在有2個行內元素時候，我們為其中一個vertical-align設定較大或者較小的值就會導致塊級元素變高！！！這是為什麼呢？
其實這個要理解說容易也容易說難還真有點難，我們想象其中的盒子一個往上一個往下（相對於基線），所以整個塊級盒子變高了！！！
結語
今天不知怎麼有點小感冒，今天暫時到這裡了，我們下次繼續。
本文轉自葉小釵部落格園部落格，原文連結：http://www.cnblogs.com/yexiaochai/archive/2013/06/14/3135773.html，如需轉載請自行聯絡原作者


相關文章