<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
body
{
margin:0;
padding:0;
}
#header
{
height:100px;
width:80%;
background:#99ffcc;
margin:5px auto;
}
#main
{
height:300px;
width:80%;
background:#345678;
margin:5px auto;
}
#footer
{
height:100px;
width:80%;
background:#34ff78;
margin:5px auto;
}
</style>
</head>
<body>
<div id = "header">
此处显示id "header" 的内容
</div>
<div id = "main">
此处显示id "main" 的内容
</div>
<div id = "footer">
此处显示id "footer" 的内容
</div>
</body>
</html>1、当我们不用任何样式表进行定义时，body，h1－h6，ul等元素默认有外边距或其它样式的。这里我们在css样式中增加一项：body {margin:0;}，就可以把body默认的外边距去掉。
2、自适应宽度是相对于浏览器而言，盒模型的宽度随着浏览器宽度的改变而改变。这时要用到宽度的百分比。如果我们需要按浏览器的80%显示，那么设置宽度为80%，当改变浏览器窗口大小时，盒模型的宽度也会跟着改变。
3、当一个盒模型不设置宽度时，它默认是相对于浏览器显示的，或者说占满整个浏览器。
4、在IE6及以上版本和标准的浏览器当中，当设置一个盒模型的的margin:auto;时，可以让这个盒模型居中。
5、CSS语法：
CSS语法由如下三部分构成，选择器：可以是ID、CLASS或标签；属性和值是用来定义这个物件的某一个特性。如一张桌子的长120cm，宽60cm，套用css的格式为，桌子{长:120cm;宽:60cm;}
类：是指定义一个class，可以多个对象引用；标签：指对默认的html标签进行重新定义，如可以定义body{margin:0}，意思是 将body的外边距设置为0，h2{color:#f00}是将所有h2标签的文字颜色设置为红色；高级它把ID和伪类放到一块了，是一个设置不合理的地方，在cs4版本中已经分开了。ID是以#开始，id只能作用于一个对象，不能作用于多个对象，优先级高于class，这是id和class的区别。