css怎么设置div大小？标准盒模型尺寸如图1所示。
图1 盒模型的大小
盒模型的实际宽度=width + 左右padding + 左右border
盒模型的实际长度=width + 上下padding + 上下border
【例】使用盒模型布局完成如图2所示的图形嵌套。
图2 图形嵌套
要求：
（1）正方形的边长依次为400px、300px、200px，圆形的直径为100px，此数值包括边框；
（2）背景颜色由内到外依次为#f8ccbf、#bdd8e3、#fbdeb2、#ccccce；
（3）正方形的border宽度都为1px；
（4）正方形的内边距都为50px；
（5）完成后，在开发者模式下检查每个盒模型的尺寸，注意盒模型有不同类型的边框。
遵循页面布局的规则，从外到内完成图2所示的效果。
最外层：创建一个div元素表示灰色正方形，类名为box。根据需求来看，这个盒模型的大小为400×400px，padding值为50px，边框值为1px。
由此计算，div元素的宽度为width = 400 - padding-left - padding-right - border-left - border-right= 400 - 50 - 50 - 1 - 1 = 298px，同理可得高度为298px。HTML代码如下。
<div class="box"></div>
CSS代码如下。
.box{
width:298px;
height:298px;
padding:50px;
background-color:#ccccce;
border:1px solid #000000;
}
运行结果如图3所示。
图3 图形最外层
第二层：在div元素box的内部创建一个div元素表示浅黄色正方形，类名为box1。box1的长度和宽度（包括边框）均为300px，padding值为50px，并且有1px宽度的边框，边框类型为dotted。由此计算，div元素的宽度为width = 300 -padding-left - padding-right - border-left - borderright = 300 - 50 -50 -1 -1= 198px，同理可得高度为198px。CSS代码如下。
.box1{
width:198px;
height:198px;
padding:50px;
background-color:#fbdeb2;
border:1px dotted #000000;
}
HTML代码如下。
<div class="box"> <div class="box1"></div> </div>
运行结果如图4所示。
图4 图形第二层
第三层：在div元素box1的内部创建一个div元素表示粉色正方形，类名为box2。由此计算，div元素的宽度为width = 200-padding-left - padding-right -border-left - border-right = 200 - 50 - 50 - 1 -1 = 98 px，同理高度为98px。CSS代码如下。
.box2{
width:98px;
height:98px;
padding:50px;
background-color:#bdd8e3;
border:1px dashed #000000;
}
HTML代码如下。
<div class="box">
<div class="box1">
<div class="box2">
</div>
</div>
</div>
运行结果如图5所示。
图5 图形第三层
第四层：在div元素box2的内部创建一个div元素表示粉色圆形，类名为box3。由此计算，div元素的宽度为100px，同理高度为100px。当border-radius与正方形边长相等时，得到圆形，可得boder-radius为100px。CSS代码如下。
.box3{
width:100px;
height:100px;
background-color:#f8ccbf;
border-radius:100px;
}
HTML代码如下。
<div class="box">
<div class="box1">
<div class="box2">
<div class="box3"></div>
</div>
</div>
</div>
运行结果如图6所示。
图6 图形第四层
到目前为止，上述盒模型练习就完成了。在浏览器中按F12快捷键进入开发者模式，查看元素与盒模型，如图7所示。
图7 在开发者模式下查看盒模型
