学习CSS你必须踩得那些坑（六）
这里加了边框方便调试：
·为了能够设置在垂直方向上的高度(padding-top/bottom, margin-top/bottom, height)：我们设置行内元素display为inline-block
行内元素是就像水一样，垂直方向上设置高度都没用，所以有时候需要设置为inline-block或block。
有个形象的比喻，inline=>水，inline-block=>果冻，block=>石头
·设置box-sizing为border-box
默认情况下，元素的height只包括内容区域。但是我们经常需要加入border或者padding，元素的高度的实际高度是padding + border + height，每次你都需要减去padding和border。除了计算麻烦之外，用百分比设置高度的时候，你经常会遇到内容区域溢出的问题：
html,body{
height: 100%;
width:100%;
}
.container{
padding: 0 20px;
}
Hello World
[站外图片上传中……(4)]
·通过line-height进行垂直居中：
css中水平居中很简单，但是垂直居中就不好做了。通过设置line-height等于height可以让文字垂直居中。关于居中的问题，参考[译]CSS居中完全指南：http://www.voyax.me/2016/04/19/译-CSS居中完全指南/
最后还有一个大坑！！！
[站外图片上传中……(5)]
为啥navbar高度没有撑开！！！好吧，都是float的错，float导致元素溢出了文档流，从而父元素的高度不会随着float元素高度的变化而适应。
单从float的角度说，有两个思路：
【学习CSS你必须踩得那些坑（六）】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;
}
总结
这一章主要带着你踩踩坑，介绍了几个开发中经常遇到的问题。下一张我们看看在实际开发中，如果从零开始组织你的代码，同时逐步完成这个页面
推荐阅读
- 愿你的一生特立独行
- Spring|Spring框架学习心得(1)
- html5|CSS层叠样式表
- 如此坚强，我很心疼
- 【超详细】手把手教你ElasticSearch集群搭建
- 社区维基（将你的问答捐赠给社区）
- 借一座花园
- 如何快速把你的 Python 代码变为 API
- 一种分布式深度学习编程新范式（Global Tensor）
- 【六项精进】20181026