自己做的一個(gè)案例

<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
<title>無標(biāo)題文檔</title>
<style?type="text/css">
.border-box
{
????width:208px;
????padding:32px;
????border:?16px?solid;
????box-sizing:border-box;
????margin:0?auto;
}
.content-box
{
????margin-top:30px;
????width:208px;
????padding:32px;
????border:16px?solid;
????box-sizing:content-box;
????margin:30px?auto?0;
}

</style>
</head>
<div?class="border-box">
border-box?border-box?border-box?border-box?border-box?border-boxborder-box?border-boxborder-box?border-boxborder-box?border-boxborder-box?border-box
</div>
<div?class="content-box">
content-box?content-boxcontent-box?content-boxcontent-box?content-boxcontent-box?content-boxcontent-box?content-boxcontent-box?content-boxcontent-box?content-box
</div>
<body>
</body>
</html>

注意IE中的盒子模型（border-box）元素大小等于內(nèi)容+內(nèi)填充+邊框即height/width=content+padding+border。

注意css中的盒子模型（content-box）元素大小等于內(nèi)容+內(nèi)填充+邊框即height/width=content