vertical-align使用介紹是怎樣的-創(chuàng)新互聯(lián)

vertical-align使用介紹是怎樣的，針對這個(gè)問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。

網(wǎng)站建設(shè)公司,為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁設(shè)計(jì)及定制網(wǎng)站建設(shè)服務(wù),專注于成都企業(yè)網(wǎng)站建設(shè),高端網(wǎng)頁制作,對除甲醛等多個(gè)行業(yè)擁有豐富的網(wǎng)站建設(shè)經(jīng)驗(yàn)的網(wǎng)站建設(shè)公司。專業(yè)網(wǎng)站設(shè)計(jì),網(wǎng)站優(yōu)化推廣哪家好,專業(yè)網(wǎng)站推廣優(yōu)化,H5建站,響應(yīng)式網(wǎng)站。

前言

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

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

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

我在電梯里面看到了一張手機(jī)中的圖片，我詭異的笑了，因?yàn)槲液孟窨吹搅怂牟季至耍?br/>
于是，我魔杖了，是的，這是入魔的征兆！凡是皆有其度，之前的過度就導(dǎo)致了我今天的問題。

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

CSS布局（一）

vertical-align

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

數(shù)字

vertical-align: 2px;

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

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

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

百分比

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

以上兩個(gè)來個(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 >刀狂劍癡葉小釵 </span><span >
刀狂劍癡葉小釵 </span>
</div>
</body>
</html>



這塊地方有很多可以注意的，也有很多東西可以看，所以我這里建議各位去運(yùn)行試試。

你會(huì)發(fā)現(xiàn)div的高度會(huì)跟著變化滴！?。?br/>
來，我們一起來探討下這個(gè)問題，哎，我這里還是上例子吧：

大家看這個(gè)例子，我這里將其設(shè)置為負(fù)值，行內(nèi)元素就跑到塊級(jí)元素外面去了哦。

更有意思的東西在后面呢，我們在一個(gè)塊級(jí)元素里面有2個(gè)行內(nèi)元素，我們是可能將塊級(jí)元素?fù)伍_的?。?！

在有2個(gè)行內(nèi)元素時(shí)候，我們?yōu)槠渲幸粋€(gè)vertical-align設(shè)置較大或者較小的值就會(huì)導(dǎo)致塊級(jí)元素變高！?。∵@是為什么呢？

其實(shí)這個(gè)要理解說容易也容易說難還真有點(diǎn)難，我們想象其中的盒子一個(gè)往上一個(gè)往下（相對于基線），所以整個(gè)塊級(jí)盒子變高了?。。?/p>

關(guān)于vertical-align使用介紹是怎樣的問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

文章題目：vertical-align使用介紹是怎樣的-創(chuàng)新互聯(lián)
文章轉(zhuǎn)載：http://muchs.cn/article0/ejjoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、企業(yè)網(wǎng)站制作、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、Google、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都seo排名網(wǎng)站優(yōu)化