1.案例一：
效果图如下：
（1）box1.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" /> <title>盒子模型经典案例</title> <link rel="stylesheet" type="text/css" href="box1.css"/> </head> <body> <div class="div1"> <img src="123.jpg"/> </div> </body> </html>
2.box1.css
@charset "utf-8"; /* CSS Document */ body { border: 1px solid red; /*1px 表示边框的宽度 solid 表示实线 red 表示颜色，顺序可以随意*/ width: 500px; height: 500px; /*如果让body自动居中*/ margin: 0 auto;/*第一个参数：用于上下;第二个参数：用于左右（auto自动居中）*/ } /*盒子模型:margin, padding,border, content*/ .div1{ width:310px; height:260px; border:1px solid blue; /*margin-top:5px; margin-left:5px;*/ margin:5px 0px 0px 5px; /*padding-top:35px;*/ } .div1 img { width:300px; height:250px; margin-top:5px; margin-left:5px; }