明白何謂Margin Collapse
不同于其他很多屬性，盒模型中垂直方向上的Margin會(huì)在相遇時(shí)發(fā)生崩塌，也就是說(shuō)當(dāng)某個(gè)元素的底部Margin與另一個(gè)元素的頂部Margin相鄰時(shí)，只有二者中的較大值會(huì)被保留下來(lái)，可以從下面這個(gè)簡(jiǎn)單的例子來(lái)學(xué)習(xí):
CSS1234567891011121314.square { width:80px; height:80px;} .red { background-color:#F44336; margin-bottom:40px;} .blue { background-color:#2196F3; margin-top:30px;}在上述例子中我們會(huì)發(fā)現(xiàn)，紅色和藍(lán)色方塊的外邊距并沒(méi)有相加得到70px，而是只有紅色的下外邊距保留了下來(lái)。我們可以使用一些方法來(lái)避免這種行為，不過(guò)建議來(lái)說(shuō)還是盡量統(tǒng)一使用margin-bottom屬性，這樣就顯得和諧多了。
使用Flexbox進(jìn)行布局
CSS實(shí)戰(zhàn)之Flex詳解以及其在微信中的兼容實(shí)現(xiàn)
在傳統(tǒng)的布局中我們習(xí)慣使用Floats或者inline-blocks，不過(guò)它們更適合于格式化文檔，而不是整個(gè)網(wǎng)站。而Flexbox則是專門的用于進(jìn)行布局的工具。Flexbox模型允許開(kāi)發(fā)者使用很多便捷可擴(kuò)展的屬性來(lái)進(jìn)行布局，估計(jì)你一旦用上就舍不得了:
CSS1234.container { display:flex; /* Don't forget to add prefixes for Safari */display:-webkit-flex;}我們已經(jīng)在Tutorialzine上提供了很多的關(guān)于Flexbox的介紹與小技巧，譬如5 Flexbox Techniques You Need to Know About。
使用CSS Reset
雖然這些年來(lái)隨著瀏覽器的迅速發(fā)展與規(guī)范的統(tǒng)一，瀏覽器特性碎片化的情況有所改善，但是在不同的瀏覽器之間仍然存在著很多的行為差異。而解決這種問(wèn)題的最好的辦法就是使用某個(gè)CSS Reset來(lái)為所有的元素設(shè)置統(tǒng)一的樣式，保證你能在相對(duì)統(tǒng)一干凈的樣式表的基礎(chǔ)上開(kāi)始工作。目前流行的Reset庫(kù)有 normalize.css, minireset以及 ress ，它們都可以修正很多已知的瀏覽器之間的差異性。而如果你不打算用某個(gè)外在的庫(kù)，那么建議可以使用如下的基本規(guī)則:
CSS12345* { margin:0; padding:0; box-sizing:border-box;}上面的規(guī)則看起來(lái)沒(méi)啥用，不過(guò)如果不同的瀏覽器在默認(rèn)情況下為你設(shè)置了不同的外邊距/內(nèi)邊距的默認(rèn)值，還是會(huì)挺麻煩的。