<!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的區別。