框模型中设置内容区域元素占地尺寸box-sizing属性
盒子模型有两种 一种是 内容盒子模型(content-box)一种是边框盒子模型(border-box)。
content-box:设置的尺寸，只设置内容区域,
左外边距+左边框+左内边距+内容区域宽度+右内内边距+右边框+右外边距
border-box:设置的尺寸，设置的是包含边框在内，边框内部的尺寸.
元素实际占地宽度：左外边距+width+右外边距
元素实际占地高度: 上外边距+height+下外边距
网上搜索了两张配图不错 很直观。
边框盒子模型（IE6 的盒子模型）起源于IE的怪异模式中的一个bug。对元素指定的width和height 包括了内边距和边框的高度。
在CSS3中引进了 box-sizing属性，默认值为content-box（标准盒子模型）如果替换为border-box 浏览器会给该元素应用IE盒子模型。即width属性将包含边框的宽度以及内边距。当想以百分比形式设置元素的总体尺寸，又想以像素的单位制定边框和内边距时候，边框模型特别有用。
比如：我要为外部元素设置padding元素留白、添加一个内部元素设置border宽度为3px;padding:4px;使其填满外部元素的空间，于是设置内部元素的尺寸为100%
<div class="outdiv"></div> <div class="innerdiv"></div>
1 .outdiv{ 2 position:relative; 3 left:40px; 4 top:40px; 5 width:200px; 6 height:200px; 7 padding:10px; 8 background:red 9 } 10 .innerdiv{ 11 border:3px solid blue; 12 padding:4px; 13 width:100%; 14 height:100%; 15 background:green; 16 }
结果如下
这种结果是非常糟糕，元素的大小比与想要的结果要大了。于是给内部的div增加一个box-sizing:border-box属性，结果如下
边框模型在CSS3中的另一个可选方案可以使用calc来计算尺寸。width设置为100%-2*border-2*padding比如把CSS 设置为如下，也可以达到上述的效果Demo
.innerdiv{
border:3px solid blue;
padding:4px;
width:calc(100% - 2 * 3px - 2 * 4px);
height:calc(100% - 2 * 3px - 2 * 4px);
background:green;
}
(注意运算符用空格隔开）
原文链接：https://www.cnblogs.com/dubaokun/p/3493733.html
