用box-sizing属性设置盒子模型以及盒子模型的计算

盒子模型分为 w3c 标准盒子模型和 IE 的传统盒子模型（IE6 以下，不包含 IE6 版本或 “QuirksMode 下 IE5.5+”）。

如果添加 <!DOCTYPE html> 文档类型声明，按照标准盒子模型解析，如果没有添加文档类型声明，各浏览器按照自己的方式解析，比如 IE 浏览器用传统盒子模型解析，火狐浏览器用标准盒子模型解析。

box-sizing 可以设置使用哪一种盒子模型，即使用哪种方式解析盒子尺寸。

语法

box-sizing : content-box | border-box;

盒子模型计算

不管哪种盒子模型，都包括 margin 、padding、border、content 这四个元素。

标准盒子模型（content-box）

盒子在页面所占宽度：左外边距+左边框+左内边距+所设置宽度（内容宽度）+右内边距+右边框+右外边距
盒子在页面所占高度：上外边距+上边框+上内边距+所设置宽度（内容高度）+下内边距+下边框+下外边距
所设置的宽度（高度）=内容宽度（高度）

IE 盒子模型（border-box）

盒子在页面所占宽度：左外边距+所设置宽度（左边框+左内边距+内容宽度+右内边距+右边框）+右外边距
盒子在页面所占高度：上外边距+所设置高度（上边框+上内边距+内容高度+下内边距+下边框）+下外边距
所设置的宽度（高度）=内容宽度（高度）+内边距+边框

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>盒子模型的计算</title>
    <style type="text/css">
        .content-box{
            box-sizing: content-box;
            width: 100px;
            height: 100px;
            margin: 30px;
            padding: 20px;
            border: 2px solid red;
        }
        .border-box{
            box-sizing: border-box;
            width: 100px;
            height: 100px;
            margin: 30px;
            padding: 20px;
            border: 2px solid orange;
        }
    </style>
</head>
<body>
    <div class="content-box"></div>
    <div class="border-box"></div>
</body>
</html>

效果图：

content-box.jpg

border-box.jpg

两个盒子设置的宽和高都是一样的，现在计算一下盒子在页面中所占的宽和高。

content-box
width=30px+2px+20px+100px+20px+2px+30px=204px
height=30px+2px+20px+100px+20px+2px+30px=204px
border-box
width=30px+100px=130px
height=30px+100px=130px
其中100px=2px+20px+56px+20px+2px。