框模型中设置内容区域元素占地尺寸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>

 .outdiv{
   position:relative;
   left:40px;
   top:40px;
   width:200px;
   height:200px;
   padding:10px;
   background:red
 }
 .innerdiv{
   border:3px solid blue;
   padding:4px;
   width:100%;
   height:100%;
   background:green;
 }

结果如下

这种结果是非常糟糕，元素的大小比与想要的结果要大了。于是给内部的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