作用：为解决撑破容器的问题

应用场景：自适应布局，只知道一个百分值，但其他值是px之类

随着CSS3的出现，可以利用box-sizing来改变元素的盒模型类型实现效果

.warp{
    width: 100%;
    height: 100rpx;
    padding: 10rpx 15rpx;
    boder: 2rpx solid #000;
    box-size: border-box;
}

👍使用calc()方法更方便、准确：

已知总宽 100%
减去 padding 宽度（15px 2 = 30rpx）
再减去 boder 宽度 （5rpx 2 = 10rpx）
使用 calc(100% - (5rpx + 15rpx) * 2 ) 得到准确的 width 值

.warp{
    width: calc(100%-(15rpx+10rpx)*2);
    height: 100rpx;
    padding: 10rpx 15rpx;
    boder: 2rpx solid #000;
}