一、瀏覽器效果和Dreamweaver設計視圖：
二、HTML
<!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" /> <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: 0;padding: 0; }
2、在用CSS設計盒子時，可以設置盒子的寬（width）和高（height）屬性，但是這個寬和高並不是盒子的實際寬和高，而是盒子內容的寬和高。
本例中，盒子的width和height是藍色內容的寬和高，而盒子實際的寬和高是：
盒子的實際寬度=左邊界+左邊框+左填充+寬+右填充+右邊框+右邊界；
盒子的實際高度=上邊界+上邊框+上填充+高+下填充+下邊框+下邊界。