框模型中设置内容区域元素占地尺寸box-sizing属性

佚名 7年前 (2019-04-08) 随笔 1033人围观抢沙发百度已收录

盒子模型有两种一种是内容盒子模型(content-box)一种是边框盒子模型(border-box)。　

content-box:设置的尺寸，只设置内容区域,

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

　　　　　　左外边距+左边框+左内边距+内容区域宽度+右内内边距+右边框+右外边距

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;
}