最近個(gè)人也帶過(guò)幾個(gè)算是學(xué)徒吧，在教他們的過(guò)程中，一方面也發(fā)現(xiàn)了一些自己的不足，一方面也發(fā)現(xiàn)了一些新手在學(xué)習(xí)過(guò)程中比較容易發(fā)生問(wèn)題的一些地方。自己就會(huì)找一些比較經(jīng)典的例題，幫助他們理解問(wèn)題，解決問(wèn)題。
首先是內(nèi)聯(lián)元素和塊級(jí)元素的區(qū)別。大家普遍知道的區(qū)別是，塊級(jí)元素占一行。但是，我們?cè)趯?shí)際應(yīng)用當(dāng)中，通常會(huì)遇到比較復(fù)雜的html結(jié)構(gòu)，塊級(jí)元素和內(nèi)聯(lián)元素混合搭配使用。
舉個(gè)例子：
這是從天貓截圖下來(lái)的，"更多"后面有個(gè)圖標(biāo)。按照要求是整行都要垂直對(duì)齊。其實(shí)整行對(duì)齊很簡(jiǎn)單，暴力點(diǎn)就line-height等于高度，就可以實(shí)現(xiàn)垂直對(duì)齊，利用margin或padding都可以實(shí)現(xiàn)。
這里需要請(qǐng)注意一點(diǎn)，內(nèi)聯(lián)元素如果直接給height是不起任何效果的。這里給大家舉個(gè)例子
這里雖然規(guī)定了span的高度和內(nèi)外補(bǔ)白，但是高度顯然沒(méi)有起作用，原因是因?yàn)閟pan作為內(nèi)聯(lián)元素是不能直接接收height屬性的。
針對(duì)這樣的問(wèn)題，我們需要將span的默認(rèn)display屬性設(shè)置為inline-block，那么inline-block到底是什么意思呢？
首先我們來(lái)總結(jié)一下display屬性的常用值都是什么意思
block? 元素會(huì)默認(rèn)占新起一行，簡(jiǎn)而言之就是會(huì)將元素改變成為塊級(jí)元素。
inline?? 與block相反，元素不會(huì)獨(dú)占一行，多個(gè)元素會(huì)一直向后排列，意思就是內(nèi)聯(lián)元素。
none?? 意思就是此元素不會(huì)顯示，也不會(huì)占用占位符。這里需要特別說(shuō)明一下css中有visibility也是用來(lái)設(shè)置元素可見性的，當(dāng)visibility為hidden時(shí)，元素是不可見的，但是元素還是會(huì)占用原來(lái)的位置，而display：none這不會(huì)占用占位符，就是說(shuō)不會(huì)占用原來(lái)的位置。
inline-block? 這個(gè)值簡(jiǎn)單來(lái)說(shuō)就是將元素作為inline來(lái)呈現(xiàn)，但是其內(nèi)容做為block來(lái)呈現(xiàn)。也就是結(jié)合了inline和block，所以當(dāng)元素的display屬性是inline-block時(shí)，就可以接受height等css屬性。
需要注意的是，將內(nèi)聯(lián)元素設(shè)置浮動(dòng)也可以解決我們的問(wèn)題，但是需要對(duì)float屬性理解同樣深。
我們繼續(xù)說(shuō)我們上面的需求。
是不是我們解決了垂直劇中就可以完成了上面的需求呢，答案是并不一定。因?yàn)樵诟嗪竺妫€有一個(gè)小圖標(biāo)。通常初學(xué)者還沒(méi)有掌握，雪碧圖，字體圖標(biāo)這種技術(shù)，所以我們會(huì)使用一張圖片來(lái)代替。但是圖片和文字并排時(shí)，文字并不會(huì)與圖片垂直劇中，這是初學(xué)者在布局時(shí)會(huì)經(jīng)常碰到的問(wèn)題。在給img標(biāo)簽設(shè)置完margin后，會(huì)發(fā)現(xiàn)文字也跟著圖片一起發(fā)生了位置上的變化。
簡(jiǎn)單暴力的方法我們可以通過(guò)給圖片添加position：relative;將top值設(shè)為負(fù)數(shù)后微調(diào)即可實(shí)現(xiàn)，但是治標(biāo)不治本。
這里推薦給新手一個(gè)方法，將img標(biāo)簽外，再包一層內(nèi)聯(lián)元素，如<i>標(biāo)簽這樣的元素，將其display設(shè)置為inline-block，這樣做的好處是，可以將圖片與文字剝離開，那么如果我們想要單獨(dú)控制img標(biāo)簽的位置時(shí)，只需要控制<i>標(biāo)簽的位置就可以了。
初學(xué)者在制作各種各樣的頁(yè)面時(shí)，會(huì)碰到不同的問(wèn)題，希望大家能夠在初學(xué)時(shí)就樹立起一個(gè)最佳配置的代碼習(xí)慣。當(dāng)然，一千個(gè)人心中有一千個(gè)哈姆雷特，筆者所教的方法并不一定是最佳方案，但是希望各位同學(xué)能在本著的內(nèi)容中吸收一些有用的東西，能夠確確實(shí)實(shí)的幫助大家在學(xué)習(xí)過(guò)程中遇到的問(wèn)題。
筆者會(huì)一直更新內(nèi)容，希望能切切實(shí)實(shí)的幫助到一些正在入門的同學(xué)。html和css是前端的重中之重，希望大家在學(xué)習(xí)的時(shí)候能夠扎扎實(shí)實(shí)的打好自己的基礎(chǔ)，不要盲目的渴望學(xué)習(xí)js而丟棄這些基礎(chǔ)，因?yàn)閖s最終也是為頁(yè)面的dom樹服務(wù)的，所以請(qǐng)不要盲目激進(jìn)，穩(wěn)扎穩(wěn)打。
