Css小技巧
<h4>盒子大小</h4>
<hr />
<pre><code>box-sizing：border-box;
设置border-box盒子的宽：
width:padding+border+内容的宽</code></pre>
<p>总结：
这样可以确保始终以更直观的方式调整所有元素的大小。</p>
<h5>1.1 需要加前缀</h5>
<p>由于这box-sizing是非常新的内容，因此您现在应该使用-webkit-和-moz-前缀，就像在这些示例中一样。此技术可在特定浏览器中启用实验功能。另外，请记住，这是IE8 +。</p>
<pre><code>* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}</code></pre>
<h4>去除浮动</h4>
<h5>2.1</h5>
<pre><code>.clearfloat:after{
content:"";
height:0
display:block;
clear:both;
visibility:hidden;
}</code></pre>
<h5>2.2</h5>
<p>这适用于现代浏览器。如果要支持IE6，则需要添加以下内容：</p>
<pre><code>.clearfix {
overflow: auto;
zoom: 1;
}
</code></pre>
<h4>flex-box</h4>
<pre><code>.container {
display: -webkit-flex;
display: flex;
}
nav {
width: 200px;
}
.flex-column {
-webkit-flex: 1;
flex: 1;
}</code></pre>
<h5>3.1用flexbox的垂直居中</h5>
<pre><code>.vertical-container {
height: 300px;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}</code></pre>