这里加了边框方便调试：
· 为了能够设置在垂直方向上的高度(padding-top/bottom, margin-top/bottom, height)：我们设置行内元素<a> display为inline-block
行内元素是就像水一样，垂直方向上设置高度都没用，所以有时候需要设置为inline-block或block。
有个形象的比喻，inline=>水，inline-block=>果冻，block=>石头
· 设置box-sizing为border-box
默认情况下，元素的height只包括内容区域。但是我们经常需要加入border或者padding，元素的高度的实际高度是padding + border + height，每次你都需要减去padding和border。除了计算麻烦之外，用百分比设置高度的时候，你经常会遇到内容区域溢出的问题：
<style>
html,body{
height: 100%;
width:100%;
}
.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;
}
总结
这一章主要带着你踩踩坑，介绍了几个开发中经常遇到的问题。下一张我们看看在实际开发中，如果从零开始组织你的代码，同时逐步完成这个页面
扫一扫
514
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
