長沙前端培訓班分享：vertical-align知識點講解
vertical-align設置的是元素的垂直對齊方式，這個說法看起來很簡單，但是用起來卻難以捉摸；還有一個說法是內(nèi)聯(lián)元素的基線相對于該元素所在行的垂直對齊方式，那么該元素所在行又是個啥？總體來說呢都不是特別好理解，那么下面長沙前端培訓班分享：vertical-align知識點講解： vertical-align對行內(nèi)塊元素造成哪些影響？
1、如果給子元素的vertical-align設置為Top
<style>
.all{
width: 300px;
height: 300px;
background: #0f0;}
.box1{
display: inline-block;
width: 200px;
height: 200px;
background: #ff0;
vertical-align: top;}
</style>
<body>
<div class="all">
<div class="box1"></div>
</div>
</body>
那么子元素的top會出現(xiàn)在在父元素的top上，也就是子元素會靠在上面
2、如果給子元素的vertical-align設置為bottom
<style>
.all{
width: 300px;
height: 300px;
background: #0f0;}
.box1{
display: inline-block;
width: 200px;
height: 200px;
background: #ff0;
vertical-align: bottom;}
</style>
<body>
<div class="all">
<div class="box1"></div>abcdefg
</div>
</body>
子元素的bottom會出現(xiàn)在父元素的bottom上，這里需要強調(diào)的是父元素的bottom并不是盒子的最下邊，而是父元素里面文本或者inline-block元素的最下面
3、如果給子元素的vertical-align設置為Middle
<style>
.all{
width: 300px;
height: 300px;
background: #0f0;}
.box1{
display: inline-block;
width: 200px;
height: 200px;
background: #ff0;
vertical-align: middle;}
</style>
<body>
<div class="all">
<div class="box1"></div>abcdef
</div>
</body>
子元素的middle會在父元素的middle上
4、如果給子元素的vertical-align設置為Baseline
<style>
.all{
width: 300px;
height: 300px;
background: #0f0;}
.box1{
display: inline-block;
width: 200px;
height: 200px;
background: #ff0;
vertical-align: baseline;}
</style>
<body>
<div class="all">
<div class="box1"></div>abcdef
</div>
</body>
子元素的baseline在父元素的baseline上，vertical-align的默認值就是baseline
三、 基線是個啥？
為什么說vertical-align會說到基線呢？那是因為該屬性的默認值就是baseline，那到底什么是基線，請看圖：
通過這個圖片我們可以一目了然的發(fā)現(xiàn)，其實基線就是我們英文格子的第三條線。
vertical-align這個屬性的默認值就是baseline，請看如下效果：
<style>
.all{width: 500px;height: 300px;background: #0f0;}
.all div{ display: inline-block;background: #ff0;}
.box1{font-size: 12px;}
.box2{font-size: 18px;}
.box3{font-size: 26px;}
.box4{font-size: 40px;}
</style>
<body>
<div class="all">
<div class="box1">1000phone</div>
<div class="box2">meimei</div>
<div class="box3">dalian</div>
<div class="box4">hahaha</div>
</div>
</body>
頁面中我放了四個行內(nèi)塊元素，里面放了不同字號的文本內(nèi)容，子盒子也沒有設置高度，所有的盒子我都沒設置vertical-align，看看他們會怎么樣排列：
不錯，所有元素都按照基線的位置對齊了，就是因為他們的默認垂直對齊方式的取值正是baseline的原因。
四、 行高控制的到底是哪里垂直居中？
做為一個資深的前端開發(fā)，大家都清楚的知道：行高等于容器高可以設置單行文本的垂直居中，那么萬一容器里面裝的是圖片呢？裝的是盒子呢？
如果盒子里面裝的是行內(nèi)塊元素，不管是圖片還是其他元素，它身上的vertical-align就會在行高范圍內(nèi)進行運動。
<style>
.all{width: 500px;height: 500px;background: #0f0;line-height: 400px;}
.all img{vertical-align:bottom;width: 100px;}
</style>
<body>
<div class="all">
<img src="1.jpg" alt="">
</div>
</body>
分別調(diào)整了圖片的vertial-align的取值，你會發(fā)現(xiàn)他其實就是在行高范圍內(nèi)進行移動的，所以圖片的垂直居中通常也會選擇取值為middle的做法。
五、 關(guān)于圖片默認間隙的問題？
通過上面幾種情況的比較，相信大家也能知道這圖片間隙是什么原因?qū)е碌牧耍诲e，就是因為vertical-align默認值是baseline
<style>
.all{width: 500px;background: #0f0;}
</style>
<body>
<div class="all">
<img src="1.jpg" alt="">
</div>
</body>
我的父盒子設置了背景顏色，但是我沒有設置高度
這個間隙正是因為圖片的最下邊源被認為是基線所在的位置，所以這個縫隙就是英文格子第三條和第四條之間的距離
加了幾個字母，可以清楚的看到這個距離的原因所在了。
那么原因知道了，解決方案也得有啊：
1、將圖片的元素類型進行轉(zhuǎn)換，轉(zhuǎn)為塊元素就不會存在這個問題了，因為只有行內(nèi)塊元素才會受vertical-align的影響
<style>
img{display:block}
</style>
2、改變圖片vertical-align的取值，只要不是默認的baseline就好啦（三選一即可）
<style>
img{vertical-align:top;}
img{vertical-align:middle;}
img{vertical-align:bottom;}
</style>
3、給圖片的父元素設置字號為0，沒有文本在圖片旁邊作祟了，也就沒有間隙了
<style>
.all{font-size:0;}
</style>
猜你喜歡LIKE
相關(guān)推薦HOT
更多>>
前端培訓學費高嗎？哪種學習方式更省錢
說到培訓一詞，不少人會感覺到不屑一顧，甚至覺得任何形式的It培訓都是一種智商稅，比如有網(wǎng)友會咨詢關(guān)于前端培訓學費高嗎這種問題，事實上和后...詳情>>
2023-03-21 10:21:42
長沙Java培訓機構(gòu)好找工作嗎？看看2022年各大廠程序員社招薪資表
長沙Java培訓機構(gòu)好找工作嗎？先來看一張圖：互聯(lián)網(wǎng)大廠技術(shù)線新入職員工職級薪資對應表，光是這個數(shù)字都是很多行業(yè)工作兩三年后都可能無法達到...詳情>>
2022-03-09 15:04:00
有必要參加長沙IT培訓嗎？今年1000萬畢業(yè)生即將畢業(yè)
春暖花開，又到了即將畢業(yè)的時候。其實每一年的高校畢業(yè)生走出學校，邁進社會的這個節(jié)點，都會成為討論的焦點。很多想進入IT行業(yè)的人都在糾結(jié)一...詳情>>
2022-03-09 14:55:00
長沙前端培訓好找工作嗎？互聯(lián)網(wǎng)從業(yè)者生存現(xiàn)狀究竟如何？
長沙前端培訓好找工作嗎？最近，滴滴、阿里等大廠裁員的消息使得不少互聯(lián)網(wǎng)從業(yè)者人心惶惶，裁員潮是不是意味著整個大市場的行情不好了呢？詳情>>
2022-03-01 18:02:00熱門推薦
java開發(fā)自學與培訓課程的利弊分析
沸學程序員對學歷有要求嗎？大專生可以學習嗎
熱前端培訓學費高嗎？哪種學習方式更省錢
熱30歲轉(zhuǎn)行學it來得及嗎？可行嗎
新java學習難不難?java怎么學習
零基礎如何自學成為程序員?
學it難不難?未來發(fā)展前景如何
軟件編程難學嗎?軟件編程學什么
學編程有哪些培訓機構(gòu)？如何選擇靠譜的培訓機構(gòu)
當學術(shù)研究不再是最佳選擇時，研究生如何高水平就業(yè)？
千鋒推出“鋒益擁軍計劃”，探索教育擁軍新模式
參加長沙web前端培訓班能找到工作不？
長沙IT培訓哪里好？2022年IT技術(shù)崗怎么選？
長沙Java培訓多少錢？可以自學Java去求職嗎？
技術(shù)干貨
快速通道 更多>>
-
課程介紹
點擊獲取大綱 -
就業(yè)前景
查看就業(yè)薪資 -
學習費用
了解課程價格 -
優(yōu)惠活動
領(lǐng)取優(yōu)惠券 -
學習資源
領(lǐng)3000G教程 -
師資團隊
了解師資團隊 -
實戰(zhàn)項目
獲取項目源碼 -
開班地區(qū)
查看來校路線
京公網(wǎng)安備 11010802030320號