这里加了边框方便调试：

·为了能够设置在垂直方向上的高度(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的角度说，有两个思路：

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;

}

总结

这一章主要带着你踩踩坑，介绍了几个开发中经常遇到的问题。下一张我们看看在实际开发中，如果从零开始组织你的代码，同时逐步完成这个页面