这个demo有两个文件:hezi.html和box.css。还是老样子，直接上代码：
hezi.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>盒子模型</title> <link rel="stylesheet" type="text/css" href="box.css"> </head> <body> <div class="div1"> <img src="1.png" /> </div> </body> </html>
box.css
body
{
border: 1px solid red; /* 1px表示边框宽度， solid实线， red颜色 */
width: 600px;
height: 500px;
margin: 0 auto; /* 让body自动居中 */
}
/* 盒子模型 概念：margin，padding，border */
.div1
{
width: 100px;
height: 100px;
border: 1px solid blue;
margin: 5px 0px 0px 5px;
/*padding-top: 80px;*? /* 注意：padding会将盒子撑破 */
}
.div1 img
{
width: 90px;
height: 50px;
margin-top: 5px;
margin-left: 10px;
}如果自己学习的话可以下载代码然后自己修改参数，运行试试。
原文地址：http://blog.csdn.net/chenqiai0/article/details/42750521
