這里加了邊框方便調(diào)試：
·為了能夠設(shè)置在垂直方向上的高度(padding-top/bottom, margin-top/bottom, height)：我們設(shè)置行內(nèi)元素display為inline-block
行內(nèi)元素是就像水一樣，垂直方向上設(shè)置高度都沒用，所以有時候需要設(shè)置為inline-block或block。
有個形象的比喻，inline=>水，inline-block=>果凍，block=>石頭
·設(shè)置box-sizing為border-box
默認情況下，元素的height只包括內(nèi)容區(qū)域。但是我們經(jīng)常需要加入border或者padding，元素的高度的實際高度是padding + border + height，每次你都需要減去padding和border。除了計算麻煩之外，用百分比設(shè)置高度的時候，你經(jīng)常會遇到內(nèi)容區(qū)域溢出的問題：
html,body{
height: 100%;
width:100%;
}
.container{
padding: 0 20px;
}
Hello World
[站外圖片上傳中……(4)]
·通過line-height進行垂直居中：
css中水平居中很簡單，但是垂直居中就不好做了。通過設(shè)置line-height等于height可以讓文字垂直居中。關(guān)于居中的問題，參考[譯]CSS居中完全指南：http://www.voyax.me/2016/04/19/譯-CSS居中完全指南/
最后還有一個大坑?。?！
[站外圖片上傳中……(5)]
為啥navbar高度沒有撐開！??！好吧，都是float的錯，float導(dǎo)致元素溢出了文檔流，從而父元素的高度不會隨著float元素高度的變化而適應(yīng)。
單從float的角度說，有兩個思路：
1.將父元素變成BFC
2.清除浮動
代碼如下：
通過overflow觸發(fā)BFC
.navbar::after{
overflow: hidden;
}
clearfix（關(guān)于clearfix的討論，看看stackoverflow上的這個討論）
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
總結(jié)
這一章主要帶著你踩踩坑，介紹了幾個開發(fā)中經(jīng)常遇到的問題。下一張我們看看在實際開發(fā)中，如果從零開始組織你的代碼，同時逐步完成這個頁面
