學習CSS你必須踩得那些坑（六）
這裏加了邊框方便調試：css
· 爲了可以設置在垂直方向上的高度(padding-top/bottom, margin-top/bottom, height)：咱們設置行內元素<a> display爲inline-blockhtml
行內元素是就像水同樣，垂直方向上設置高度都沒用，因此有時候須要設置爲inline-block或block。
有個形象的比喻，inline=>水，inline-block=>果凍，block=>石頭調試
· 設置box-sizing爲border-boxcode
默認狀況下，元素的height只包括內容區域。可是咱們常常須要加入border或者padding，元素的高度的實際高度是padding + border + height，每次你都須要減去padding和border。除了計算麻煩以外，用百分比設置高度的時候，你常常會遇到內容區域溢出的問題：htm
<style>圖片
html,body{開發
height: 100%;文檔
width:100%;get
}it
.container{
padding: 0 20px;
}
</style>
</head>
<body>
<div class="container">
Hello World
</div>
</body>
[站外圖片上傳中……(4)]
· 經過line-height進行垂直居中：
css中水平居中很簡單，可是垂直居中就很差作了。經過設置line-height等於height可讓文字垂直居中。關於居中的問題，參考[譯]CSS居中徹底指南：http://www.voyax.me/2016/04/19/譯-CSS居中徹底指南/
最後還有一個大坑！！！
[站外圖片上傳中……(5)]
爲啥navbar高度沒有撐開！！！好吧，都是float的錯，float致使元素溢出了文檔流，從而父元素的高度不會隨着float元素高度的變化而適應。
單從float的角度說，有兩個思路：
1. 將父元素變成BFC
2. 清除浮動
代碼以下：
經過overflow觸發BFC
.navbar::after{
overflow: hidden;
}
clearfix（關於clearfix的討論，看看stackoverflow上的這個討論）
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
總結
這一章主要帶着你踩踩坑，介紹了幾個開發中常常遇到的問題。下一張咱們看看在實際開發中，若是從零開始組織你的代碼，同時逐步完成這個頁面
- 1. 學習CSS你必須踩得那些坑（二）
- 2. 學習CSS你必須踩得那些坑（一）
- 3. 學習CSS你必須踩得那些坑（三）
- 4. 學習CSS你必須踩得那些坑（四）
- 5. 學習CSS你必須踩得那些坑（五）
- 6. 實習踩過得那些坑(四)
- 7. 學習Linux踩過的那些坑
- 8. 初學編程須知：那些程序員必須知道的「坑」，你踩了多少
- 9. 你必須要知道的golang那些坑
- 10. 學習Python，這些你必須搞懂!
- 更多相關文章...
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 適用於PHP初學者的學習線路和建議
-
每一个你不满意的现在，都有一个你没有努力的曾经。