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