最近個人也帶過幾個算是學(xué)徒吧，在教他們的過程中论寨，一方面也發(fā)現(xiàn)了一些自己的不足花吟，一方面也發(fā)現(xiàn)了一些新手在學(xué)習(xí)過程中比較容易發(fā)生問題的一些地方。自己就會找一些比較經(jīng)典的例題们颜，幫助他們理解問題吕朵，解決問題。
首先是內(nèi)聯(lián)元素和塊級元素的區(qū)別窥突。大家普遍知道的區(qū)別是努溃，塊級元素占一行。但是波岛，我們在實際應(yīng)用當中茅坛，通常會遇到比較復(fù)雜的html結(jié)構(gòu)，塊級元素和內(nèi)聯(lián)元素混合搭配使用则拷。
舉個例子：
這是從天貓截圖下來的贡蓖，"更多"后面有個圖標。按照要求是整行都要垂直對齊煌茬。其實整行對齊很簡單斥铺，暴力點就line-height等于高度，就可以實現(xiàn)垂直對齊坛善，利用margin或padding都可以實現(xiàn)晾蜘。
這里需要請注意一點邻眷，內(nèi)聯(lián)元素如果直接給height是不起任何效果的。這里給大家舉個例子
這里雖然規(guī)定了span的高度和內(nèi)外補白剔交，但是高度顯然沒有起作用肆饶，原因是因為span作為內(nèi)聯(lián)元素是不能直接接收height屬性的。
針對這樣的問題岖常，我們需要將span的默認display屬性設(shè)置為inline-block驯镊，那么inline-block到底是什么意思呢？
首先我們來總結(jié)一下display屬性的常用值都是什么意思
block? 元素會默認占新起一行竭鞍，簡而言之就是會將元素改變成為塊級元素板惑。
inline?? 與block相反，元素不會獨占一行偎快，多個元素會一直向后排列冯乘，意思就是內(nèi)聯(lián)元素。
none?? 意思就是此元素不會顯示晒夹，也不會占用占位符裆馒。這里需要特別說明一下css中有visibility也是用來設(shè)置元素可見性的，當visibility為hidden時丐怯，元素是不可見的领追，但是元素還是會占用原來的位置，而display：none這不會占用占位符响逢，就是說不會占用原來的位置绒窑。
inline-block? 這個值簡單來說就是將元素作為inline來呈現(xiàn)，但是其內(nèi)容做為block來呈現(xiàn)舔亭。也就是結(jié)合了inline和block些膨，所以當元素的display屬性是inline-block時，就可以接受height等css屬性钦铺。
需要注意的是订雾，將內(nèi)聯(lián)元素設(shè)置浮動也可以解決我們的問題，但是需要對float屬性理解同樣深矛洞。
我們繼續(xù)說我們上面的需求洼哎。
是不是我們解決了垂直劇中就可以完成了上面的需求呢，答案是并不一定沼本。因為在更多后面噩峦，還有一個小圖標。通常初學(xué)者還沒有掌握抽兆，雪碧圖识补，字體圖標這種技術(shù)，所以我們會使用一張圖片來代替辫红。但是圖片和文字并排時凭涂，文字并不會與圖片垂直劇中祝辣，這是初學(xué)者在布局時會經(jīng)常碰到的問題。在給img標簽設(shè)置完margin后切油，會發(fā)現(xiàn)文字也跟著圖片一起發(fā)生了位置上的變化蝙斜。
簡單暴力的方法我們可以通過給圖片添加position：relative;將top值設(shè)為負數(shù)后微調(diào)即可實現(xiàn)，但是治標不治本澎胡。
這里推薦給新手一個方法乍炉，將img標簽外，再包一層內(nèi)聯(lián)元素滤馍，如<i>標簽這樣的元素，將其display設(shè)置為inline-block底循，這樣做的好處是巢株，可以將圖片與文字剝離開，那么如果我們想要單獨控制img標簽的位置時熙涤，只需要控制<i>標簽的位置就可以了阁苞。
初學(xué)者在制作各種各樣的頁面時，會碰到不同的問題祠挫，希望大家能夠在初學(xué)時就樹立起一個最佳配置的代碼習(xí)慣那槽。當然，一千個人心中有一千個哈姆雷特等舔，筆者所教的方法并不一定是最佳方案骚灸，但是希望各位同學(xué)能在本著的內(nèi)容中吸收一些有用的東西，能夠確確實實的幫助大家在學(xué)習(xí)過程中遇到的問題慌植。
筆者會一直更新內(nèi)容甚牲，希望能切切實實的幫助到一些正在入門的同學(xué)。html和css是前端的重中之重蝶柿，希望大家在學(xué)習(xí)的時候能夠扎扎實實的打好自己的基礎(chǔ)丈钙，不要盲目的渴望學(xué)習(xí)js而丟棄這些基礎(chǔ)，因為js最終也是為頁面的dom樹服務(wù)的交汤，所以請不要盲目激進雏赦，穩(wěn)扎穩(wěn)打。
