資訊專欄INFORMATION COLUMN
摘要：某日閱讀世界，筆者的一段話鞭撻了我的靈魂。原文是這樣的說到這里，我就忍不住多說兩句。很多其實工作很多年的前端開發(fā)人員，也可能不知道的屬性值支持數(shù)值，更不知道支持負值，這著實讓我很意外。只顯示文本的時候行高是。上集完敬請期待中下集
某日閱讀《CSS世界》，筆者的一段話鞭撻了我的靈魂。原文是這樣的——
“說到這里，我就忍不住多說兩句。很多其實工作很多年的前端開發(fā)人員，也可能不知道vertical-align的屬性值支持數(shù)值，更不知道支持負值，這著實讓我很意外“。
......
羞愧啊，滿滿的羞愧啊！本人便是那類前端開發(fā)人員啊~
于是自覺關(guān)了小黑屋，發(fā)了一天功，發(fā)憤圖強之后寫下此文，來加深我對vertical-align的認識，與大伙共勉！
寫vertical-align樣式的時候自動匹配出一長串的屬性值，看得我眼花繚亂，怎么有那么多屬性值？該用哪個？為什么這個屬性值和另外一個屬性值的表現(xiàn)形式是一樣的？細數(shù)一下vertical-align的屬性值，代碼請參考code1-1，表現(xiàn)形式請參考image1-1。
code1-1
編譯結(jié)果如下圖：
vertical-align:middle; // middle指元素的中點在基線加上父元素x字母的一半
圖片高度32px，中點即16px，字母x的高度為8px，一半即4px，middle指元素的中點在基線加上父元素x字母的一半，8px/2-32px/2=-12px。
code2-1
編譯結(jié)果如下圖：
vertical-align:50%; // percentage values的參考系
圖片大小是32px32px[當前圖片是300px300px，已統(tǒng)一樣式img{width:32px;}]，字體大小是chrome默認的字體大小16px。只顯示文本的時候行高是22px。
默認情況下給圖片設(shè)置vertical-align:50%，既然是百分比，那么就一定有參考系，究竟是以誰為參考系，有三種假設(shè)：
假設(shè)一，如果以圖片的高度為參考系，圖片向上偏移32px*50% = 16px；
假設(shè)二，如果以font-size為參考系，圖片向上偏移16px*50% = 8px；
假設(shè)三，如果以行高line-height為參考系，圖片向上偏移22px*50% = 11px；
不賣關(guān)子了，當vertical-align設(shè)置成百分比時，它的參考系是line-height，所以我后面列出兩個設(shè)置了line-height的行內(nèi)元素來做比較。
code2-2
編譯結(jié)果如下圖：
vertical-align:top;和vertical-align:text-top;比較，同理bottom和text-bottom也是如此
從設(shè)置了line-height:10px;的兩個例子就可以明顯看出來top是與父級盒模型的上邊緣對齊重合的，而text-top是與父級元素內(nèi)容的上邊緣對齊重合的。
code2-3-1
編譯結(jié)果如下圖：
code2-3-2
編譯結(jié)果如下圖：
水平位置
vertical-align:top;
vertical-align:middle;
vertical-align:baseline;
vertical-align:bottom;
水平位置從上到下的屬性值依次是：top/middle/baseline/bottom
這句話的意思是說，將top/middle/baseline/bottom看成一條水平線，設(shè)置vertical-align的元素去對齊這根水平線，從下圖可以看出來這根水平線的位置從上到下依次是top/middle/baseline/bottom 。
code2-4-1
編譯結(jié)果如下圖：
這一篇主要介紹vertical-align的屬性，以下為完整源碼，建議大家自行在瀏覽器操作一遍，查看編譯結(jié)果加深理解。
-上集完-
敬請期待中、下集
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/117200.html
摘要：前端開發(fā)，有一項很重要的基本功，就是在大型項目中，比如幾萬行代碼中，迅速找到新增功能或調(diào)試的切入點。猜測輸入框大小跟這個字號有關(guān)系。通過觀察分析和斷點技巧，我們很容易地就從一個大型項目幾萬行代碼中迅速定位到我們要修改的地方。 前端開發(fā)，有一項很重要的基本功，就是在大型項目中，比如幾萬行js代碼中，迅速找到新增功能或調(diào)試bug的切入點。特別是你只是接手這個項目，并不了解其中每一個功能點所...
摘要：仿造攜程官網(wǎng)題外話剛開始學前端的時候有一天看到攜程官網(wǎng)就希望有一天能模擬搭出來自己拖拖拉拉的一直沒整但是但是麻麻我終于完成了曾經(jīng)親愛的同事把傳送門刪掉了不感謝他了感謝葉師兄拯救了我攜程攜程源碼仿攜程源碼目錄結(jié)構(gòu)基于進行開發(fā)配合強行在攜程復制 仿造攜程官網(wǎng) 題外話:剛開始學前端的時候,有一天看到攜程官網(wǎng).就希望有一天能模擬搭出來.自己拖拖拉拉的一直沒整, 但是但是麻麻我終于完成了!!(曾...
閱讀 819·2023-04-25 19:40
閱讀 3417·2023-04-25 17:41
閱讀 2998·2021-11-11 11:01
閱讀 2605·2019-08-30 15:55
閱讀 3222·2019-08-30 15:44
閱讀 1352·2019-08-29 14:07
閱讀 481·2019-08-29 11:23
閱讀 1320·2019-08-27 10:54
