本文的主角 vertical-align使用介紹

2024-07-11 08:51:53

字體：大中小

供稿：網(wǎng)友

前言

最近學(xué)習(xí)CSS有點走火入魔了，CSS一直是自己的短板，沒想到最近居然能靜下心來學(xué)了這么多CSS的東西，著實值得表揚。

俗話說得好，不瘋活不成魔，我最近真有點刀狂劍癡的味道了。

有時候晚上學(xué)習(xí)結(jié)束后，一晚上睡得很淺，我感覺下雨了，但下的雨居然全部是html標(biāo)簽！

我在電梯里面看到了一張手機中的圖片，我詭異的笑了，因為我好像看到了他的布局了！

于是，我魔杖了，是的，這是入魔的征兆！凡是皆有其度，之前的過度就導(dǎo)致了我今天的問題。

我今天居然不知道該學(xué)習(xí)什么了。。。。學(xué)習(xí)如逆水行舟，所以我們都要放平心態(tài)，一起再來看看吧，一起建設(shè)我們的CSS世界觀啦！

CSS布局（一）

vertical-align

對的，本文的主角就是這個家伙，其實之前一次又一次的提到了這個家伙，今天卻又把它揪了出來，因為我發(fā)現(xiàn)我對他還是不夠了解。

數(shù)字

vertical-align: 2px;

這個的意思就是元素相對于基線向上偏移2px的意思，于是我們又會遇到基線，什么是基線呢？

我這里不好意思偷圖了，就自己畫一個吧：

知道神馬是基線了吧，雖然老夫很久不寫字了，但是想不到還是如此的飄泊！

百分比

我們之前碰到的百分比，比如width/height都是相對于父元素，其中font-size是相對于最近一個擁有該屬性的元素，而vertical-align是相對于該標(biāo)簽的line-height而言的。

以上兩個來個例子：

這是一個好姑娘，于是我們改下代碼：

PS：上面犯了一個很2的錯誤，將vertical-align用到了div上，大家不要像我這樣2

復(fù)制代碼

上一篇：web前端優(yōu)化時為什么不建議使用css @import

下一篇：CSS3 Flexbox中flex-shrink屬性的用法示例介紹