目录
目录
一：两种属性的介绍：
二：实例分析
对content-box 分析：
对 borbox-box分析：
一：两种属性的介绍：
content-box：标准盒模型，又叫做 W3C盒模型，一般在现代浏览器中使用的都是这个盒模型border-box：怪异盒模型，低版本IE浏览器中的盒模型解析：
border-box：就是将border和padding数值包含在width和height之内，这样的好处就是修改border和padding数值盒子的大小不变
盒子实际宽度 = 设置的width（padding和border不会影响实际宽度）
content-box：padding和border不被包含在定义的width和height之内。
盒子的实际宽度=设置的width+padding+border
对于默认的盒子模型 : 当一个盒子的总宽度确定之后，要想给盒子添加边框或内边距，往往需要更改 width属性值，才能保证盒子总宽度不变，操作起来烦琐且容易出错，运用CSS3的box-sizing属性可以轻松解决这个问题。box-sizing属性用于定义盒子的宽度值和高度值是否包含元素的内边距和边框，其基本语法格式如下。
二：实例分析
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>box-sizing属性用法</title>
<style type="text/css">
.box{
width: 300px;
height: 100px;
padding-right: 10px;
background: #F90;
border: 10px solid #ccc;
box-sizing: content-box;
}
.box1{
width: 300px;
height: 100px;
padding-right: 10px;
background: #F90;
border: 10px solid #ccc;
box-sizing: content-box;
}
.box2{
width: 300px;
height: 100px;
padding-right: 10px;
background: #F90;
border: 10px solid #ccc;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box">默认属性</div>
<span>最终宽度 = content(width300px)+padding-right(10px)+border(20px) =330px</span>
<div class="box1">content_box属性</div>
<span>最终宽度 = content(width300px)+padding-right(10px)+border(20px) =330px</span>
<div class="box2">border_box属性</div>
<span>最后宽度 = content(width270px)+padding-right(10px)+border(20px)</span>
</body>
</html>
图示：
对content-box 分析：
这是第一个和第二个默认的图像的盒子模型有图我们可以看到 width =300 这里300是内容content的宽度 是提前设置的 看图像 padding-right =10px padding-left =0px border = 10px *2(左右)
最终宽度 330px= content(width300px)+padding-right(10px)+border(20px) =330px
对 borbox-box分析：
这是第三个图像的盒子模型有图我们可以看到 width =270 这里270是内容content的宽度 是提前设置的 看图像 padding-right =10px padding-left =0px border = 10px *2(左右)
最终宽度 300px= content(width270px)+padding-right(10px)+border(20px)
