默认情况下，网页中元素的实际宽度或高度取决于元素内容区的宽度或高度、内边距以及边框属性的大小，因此我们在为元素布局时还需要考虑元素的内边距和边框属性所占的页面空间
正是由于上述原因，当您为页面元素设置宽度和高度时，元素的实际大小往往比您设置的要大。为此 CSS3 中添加了 box-sizing 属性来改变默认的盒子模型，通过 box-sizing 属性可以将元素的内边距和外边距在元素内容区内绘制，以使元素呈现的宽度和高度与设置的宽度和高度相同。
1. box-sizing
box-sizing 属性的可选值如下：
| 值 | 描述 |
|---|---|
content-box | 默认值，元素的实际宽度或高度等于元素内容区的宽度或高度、内边距和边框的和 |
border-box | 在元素的内容区内绘制内边距或边框，内边距或边框不会影响元素的实际宽度或高度 |
| inherit | 从父元素继承 box-sizing 属性的值。 |
【示例】下面通过一个示例来演示 box-sizing 属性的使用：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 50px;
margin-top: 5px;
border: 10px solid red;
padding: 5px;
}
.two {
box-sizing: content-box;
}
.three {
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="one">默认情况</div>
<div class="two">box-sizing: content-box;</div>
<div class="three">box-sizing: border-box;</div>
</body>
</html>
运行结果如下图所示：
图：box-sizing 属性演示
2. box-sizing决定如何计算一个元素的总宽度和总高度
2.1 box-sizing: content-box
-
默认值，标准盒子模型。
width与height只包括内容的宽和高，不包括边框（border），内边距（padding），外边距（margin）。 -
注意：内边距、边框和外边距都在这个盒子的外部。 比如说，
.box {width: 350px; border: 10px solid black;}在浏览器中的渲染的实际宽度将是 370px。尺寸计算公式：
width= 内容的宽度height= 内容的高度
宽度和高度的计算值都不包含内容的边框（border）和内边距（padding）。
