html 小白求生之路(出了鬼奇了：box-sizing失效)

干了这么久移动前端从来没有想砸电脑的冲动，然而现在是分分钟钟的想破坏它。。。。。。。。。

`　在CSS3中引进了 box-sizing属性，默认值为content-box（标准盒子模型）如果替换为border-box 浏览器会给该元素应用IE盒子模型。
即width属性将包含边框的宽度以及内边距。当想以百分比形式设置元素的总体尺寸，又想以像素的单位制定边框和内边距时候，边框模型特别有用。

也就是说你给定元素宽高后，怎么调整margin，padding 总大小都不变

比如：我要为外部元素设置padding元素留白、添加一个内部元素设置border宽度为3px;padding:4px;使其填满外部元素的空间，于是设置内部元素的尺寸为100% `

{
／／红色块
  position:relative;
  left:40px;
  top:40px;
  width:200px;
  height:200px;
  padding:10px;
  background:red
}
{
绿色块
  border:3px solid blue;
  padding:4px;
  width:100%;
  height:100%;
  background:green;
}```

![ABFD542A-749B-4F00-BCB7-066911B30F64.png](http://upload-images.jianshu.io/upload_images/1460277-7ccda5b7e36c65d0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

但是有时候你发现设置了并没有什么卵用，它显示的是这样的
![E5E4000A-09F3-4A68-B4F2-0EFD2AE801A7.png](http://upload-images.jianshu.io/upload_images/1460277-ee33b540051dc0b3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

作为小白的我百思不得其解，多方查询解决方法最后是通过Calc解决的，然而为毛啊 ～ 还是不知道啊 ～
出了个鬼奇了！

{
height:calc(100% - 2 * 3px - 2 * 4px);
}```