1、css样式之边框:border
 
实心的边框:
 
<!DOCTYPE >
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>页面一</title> 
</head>
<body>
 
         <div style="border:1px solid blue;height:200px"></div>
</body>
</html>
 
虚心的边框:
 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>页面一</title> 
</head>
<body>
 
         <div style="border:1px dotted blue;height:200px"></div>
</body>
</html>
 
2、css样式之内外边距
 
外边距:margin
 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>页面一</title> 
</head>
<body>
 
    <div style="height:200px;border:1px solid red;">
        <div style="height:30px;background-color:#999;margin-top:10px;margin-left:1250px;margin-right:10px;">
        guojianglin
        </div>
    </div>
</body>
</html>
 
内边距:padding
 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>页面一</title> 
</head>
<body>
 
    <div style="height:200px;border:1px solid red;">
         <div style="height:30px;background-color:#999;padding-top:50px;">
          guojianglin
         </div>
    </div>
 
</body>
</html>