前言
最近學(xué)習(xí)CSS有點(diǎn)走火入魔了，CSS一直是自己的短板，沒(méi)想到最近居然能靜下心來(lái)學(xué)了這么多CSS的東西，著實(shí)值得表?yè)P(yáng)。
俗話說(shuō)得好，不瘋活不成魔，我最近真有點(diǎn)刀狂劍癡的味道了。
有時(shí)候晚上學(xué)習(xí)結(jié)束后，一晚上睡得很淺，我感覺(jué)下雨了，但下的雨居然全部是html標(biāo)簽！
我在電梯里面看到了一張手機(jī)中的圖片，我詭異的笑了，因?yàn)槲液孟窨吹搅怂牟季至耍?
于是，我魔杖了，是的，這是入魔的征兆！凡是皆有其度，之前的過(guò)度就導(dǎo)致了我今天的問(wèn)題。
我今天居然不知道該學(xué)習(xí)什么了。。。。學(xué)習(xí)如逆水行舟，所以我們都要放平心態(tài)，一起再來(lái)看看吧，一起建設(shè)我們的CSS世界觀啦！
CSS布局（一）
vertical-align
對(duì)的，本文的主角就是這個(gè)家伙，其實(shí)之前一次又一次的提到了這個(gè)家伙，今天卻又把它揪了出來(lái)，因?yàn)槲野l(fā)現(xiàn)我對(duì)他還是不夠了解。
數(shù)字
vertical-align: 2px;
這個(gè)的意思就是元素相對(duì)于基線向上偏移2px的意思，于是我們又會(huì)遇到基線，什么是基線呢？
我這里不好意思偷圖了，就自己畫(huà)一個(gè)吧：
知道神馬是基線了吧，雖然老夫很久不寫(xiě)字了，但是想不到還是如此的飄泊！
百分比
我們之前碰到的百分比，比如width/height都是相對(duì)于父元素，其中font-size是相對(duì)于最近一個(gè)擁有該屬性的元素，而vertical-align是相對(duì)于該標(biāo)簽的line-height而言的。
以上兩個(gè)來(lái)個(gè)例子：
這是一個(gè)好姑娘，于是我們改下代碼：
PS：上面犯了一個(gè)很2的錯(cuò)誤，將vertical-align用到了div上，大家不要像我這樣2
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title></title>
<style type=”text/css”>
div { margin: 10px; border: 1px solid black; }
span { margin: 10px; border: 1px solid black; line-height: 20px; }
</style>
</head>
<body>
<div>
<span style=”vertical-align: 4px;”>刀狂劍癡葉小釵 </span><span style=”vertical-align: 10%;”>
刀狂劍癡葉小釵 </span>
</div>
</body>
</html>
這塊地方有很多可以注意的，也有很多東西可以看，所以我這里建議各位去運(yùn)行試試。
你會(huì)發(fā)現(xiàn)div的高度會(huì)跟著變化滴！！！
來(lái)，我們一起來(lái)探討下這個(gè)問(wèn)題，哎，我這里還是上例子吧：
大家看這個(gè)例子，我這里將其設(shè)置為負(fù)值，行內(nèi)元素就跑到塊級(jí)元素外面去了哦。
更有意思的東西在后面呢，我們?cè)谝粋€(gè)塊級(jí)元素里面有2個(gè)行內(nèi)元素，我們是可能將塊級(jí)元素?fù)伍_(kāi)的！！！
在有2個(gè)行內(nèi)元素時(shí)候，我們?yōu)槠渲幸粋€(gè)vertical-align設(shè)置較大或者較小的值就會(huì)導(dǎo)致塊級(jí)元素變高！！！這是為什么呢？
新聞熱點(diǎn)
疑難解答
圖片精選
