前言：
我還是個前端的菜鳥，現在在實習，接觸到一些移動web的開發任務，遇到了很多問題，記錄一下順便分享給大家。
問題？
要實現下圖的三等分屏幕效果。此頁面為手機web頁面，要求自適應寬度。
探索：
期初是用的width：33.33%，但是這樣很容易出錯，因為margin，border和padding不計算在盒子的width中，所以33.33%顯然達不到效果，會應為有margin和padding的參合整體的寬度超過了，實際的width：100%；
解決：
（1）css3 box-sizing屬性就是控制盒子的寬度計算包括margin ，border，padding
box-sizing:border-box; /*border計算在width中*/
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
（2）使用css3 calc();
width: calc((100% - （margin + padding ）* 3 * 2) / 3 );
width: -webkit-calc((100% - （margin + padding ）* 3 * 2) / 3 );
width: -moz-calc((100% - （margin + padding ）* 3 * 2) / 3 );
(3) CSS3 box-flex 屬性
重點來了，這個新特性可能使用的比較少，但感覺很好用所以推薦一下哈。
css3引入了新的盒模型——彈性盒模型，該模型決定一個盒子在其他盒子中的分布方式以及如何處理可用的空間
<div class="nav">
<div class="nav-li">成就</div>
<div class="nav-li">動態</div>
<div class="nav-li">收藏</div>
</div>
Css:
.nav{
display:inline-block;
/* Firefox */
display:-moz-box;
-moz-box-orient:horizontal;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-orient:horizontal;
/* W3C */
display:box;
box-orient:horizontal;
}
.nav-li{
height: 40px;
line-height: 40px;
-webkit-box-flex: 1.0;
-moz-box-flex:1.0;
box-flex:1.0;
}
就是這樣，按照上面寫就可以達到自動均分了啦啦啦。這樣寫的好處就是，你不管添加幾個內容《div》都會是均分的。