如图所示。每一个矩形框就是一个盒子，即div包裹的元素。
布局的一般写法，从上到下，从左到右进行排版布局。
所以，先写最上面的长盒子，再写第二行最左边的，
中间的大盒子你不知道怎么弄，可以把 二、三行看成一行，一最大的最准，纵向分成三列，即
红色来进行布局，两边红色的盒子再固定宽度后，写两个盒子规定高度分成两行就行。
最下的盒子和第一行一样，写最长即可。
ASP.NET案例教程——电子商务系统献给亲爱的女儿惜惜和园园......
CSS大小设置实例——盒子模型
一、浏览器效果和Dreamweaver设计视图：
二、HTML
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<title>盒子模型</title>
</head>
<body>
<div id="box">
<div id="content"></div>
</div>
</body>
</html>
三、CSS
#box {
width:200px
height:100px
margin:10px 20px 30px 40px
border:solid 10px red
padding:10px 20px 30px 40px
background-color:green
}
#content {
width:100%
height:100%
background:blue
}
【说明】
1、本实例中使用了css reset.css，在这里，主要重置了body和div的{margin: 0padding: 0 }
2、在用CSS设计盒子时，可以设置盒子的宽（width）和高（height）属性，但是这个宽和高并不是盒子的实际宽和高，而是盒子内容的宽和高。
本例中，盒子的width和height是蓝色内容的宽和高，而盒子实际的宽和高是：
盒子的实际宽度=左边界+左边框+左填充+宽+右填充+右边框+右边界；
盒子的实际高度=上边界+上边框+上填充+高+下填充+下边框+下边界。
<!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">
<!--
*{ margin:0 padding:0}
#wrap{ width:290px height:290px background-color:#CC9
padding:10px 10px}
#div1{ width:100px height:100px background-color:#C3C}
-->
</style>
</head>
<body>
<div id="wrap">
<div id="div1"></div>
</div>
</body>
</html>
大盒子设置内边距 ，代码如上，效果如下：
