【例子】
要求：
1）寬度、高度均是200像素；
2）顏色為紅色#900；
自己做做，看看能不能作出來？先不要看My Code，如果真的做不出來，就下載下來，跟著我下面說的一步一步修改。
下面是My Code：
<!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=gb2312" />
<title>例子1</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
</head>
<body>
<div id="redBlock"></div>
</body>
</html>
/* CSS Document */
#redBlock{
width:200px;
height:200px;
background:#900;
}
在IE6和FF中顯示效果如下圖：
怎麼樣，比較容易吧~，但是你們有沒有發現，紅色地區離瀏覽器的頂部和左邊的邊距IE6和FF的不一樣，有沒有發現？這樣的話，我們作出來的頁面瀏覽器就不相容了，效果不一樣了？為什麼會這樣？
這是因為每個瀏覽器都有一個內建的CSS檔案，當你沒有對某個標籤的屬性設定的時候，瀏覽器就會應用內建的CSS檔案，怎麼才能做到瀏覽器安全色？不著急，你只需要在CSS檔案中，將我們目前應用到得標籤body和div置零就OK了，代碼這麼寫
body,div{padding:0; margin:0;}
當把這句話加上之後，是不是兩款瀏覽器顯示效果一樣了吧~如下圖
好，我們接著來，現在再加一個條件
讓紅色地區與瀏覽器的頂部和左邊距離為20像素；
怎麼樣，有沒有思路？沒有思路沒關係，繼續向下看
我們，只需要設定紅色方塊的外邊距就可以了，添加如下CSS代碼：
margin-top:20px;
margin-left:20px;
效果如下圖
這樣就使紅色地區定位於頁面座標(20,20)處了，與瀏覽器上邊距和左邊距都為20像素。
不過上面的這種寫法我們可以精簡為
margin:20px 0 0 20px;
其中的數值順序是：上右下左。
而margin:20px 0;則和margin:20px 0 20px 0;是等價的喲~只不過是更加精簡而已，這樣寫CSS載入速度會更快。
我們接著將問題延伸，怎樣才能讓紅色地區水平定位於瀏覽器的正中間，無論瀏覽器視窗的大小，顯示器解析度的大小。
也很簡單，剛剛加的兩句話"margin-top:20px;margin-left:20px;"修改為
margin:0 auto;
怎麼樣，有意思吧，紅色地區是不是位於瀏覽器的正中間了~
好~！到這裡第一節課結束，是不是很簡單，或者太簡單了!!!KwooJan可以保證,後面的課程照樣很簡單，當你看完教程，肯定會說XHTML+CSS就這麼簡單！easy！
如果你有看不懂的，趕緊點擊文章最上面的課程關鍵詞，只要你看了這些關鍵詞，相信你絕對能明白！
本文來自www.cssxuexi.cn＊尊重他人勞動成果，轉載請自覺註明出處！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
