自己做的一个案例-慕课网

自己做的一个案例

来源：10-7 CSS3 盒子模型

慕斯0315010

2015-07-10 12:54

<!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>无标题文档</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）元素大小等于内容+内填充+边框即height/width=content+padding+border。

注意css中的盒子模型（content-box）元素大小等于内容+内填充+边框即height/width=content

写回答关注