首先，要知道box-sizing是用來幹啥的：改變盒模型中寬度和高度的定義範圍。
border-box: width = content + padding + border ，也就是IE的盒怪異模式。
content-box:width = content 正常模式
使用場景分析：當需要以content + padding + border爲整體的時候使用border-box，例如：底部菜單欄等
以content padding border爲一個整體來設置寬高度時。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box-sizing使用場景分析</title>
</head>
<style>
#menu-footer{
position: fixed;
bottom: 0;
height: 100px;
display: flex;
width: 100%;
}
.btn{
padding: 10px;
width: calc(100% / 3);
background-color: red;
}
</style>
<body>
<div id="menu-footer">
<div class="btn">
首頁
</div>
<div class="btn">
設置
</div>
<div class="btn">
個人
</div>
</div>
</body>
</html>
