DIV+CSS基礎教程：盒模型、塊狀元素與內嵌元素、CSS選取器

課程關鍵詞：盒模型、塊狀元素與內嵌元素、CSS選取器

引用:

【例子】

要求：

1）寬度、高度均是200像素；

2）顏色為紅色#900；

自己做做，看看能不能作出來？先不要看My Code，如果真的做不出來，就下載下來，跟著我下面說的一步一步修改。
下面是My Code：  SY_例子1.rar (498
Bytes)   

在IE6和FF中顯示效果如：

怎麼樣，比較容易吧~，但是你們有沒有發現，紅色地區離瀏覽器的頂部和左邊的邊距IE6和FF的不一樣，有沒有發現？這樣的話，我們作出來的頁面瀏覽器就不相容了，效果不一樣了？為什麼會這樣？

這是因為每個瀏覽器都有一個內建的CSS檔案，當你沒有對某個標籤的屬性設定的時候，瀏覽器就會應用內建的CSS檔案，怎麼才能做到瀏覽器安全色？不著急，你只需要在CSS檔案中，將我們目前應用到得標籤body和div置零就OK了，代碼這麼寫

複製內容到剪貼簿

代碼:

body,div{padding:0; margin:0;}

當把這句話加上之後，是不是兩款瀏覽器顯示效果一樣了吧~如

好，我們接著來，現在再加一個條件

引用:

3）讓紅色地區與瀏覽器的頂部和左邊距離為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！

如果你有看不懂的，趕緊點擊文章最上面的課程關鍵詞，只要你看了這些關鍵詞，相信你絕對能明白！

第一次寫教程，不知道大家能不能看懂，能不能接受，如果你覺著不錯，就頂我吧，如果你有建議或者想法，就直接留言，我會在下節課改進！

作者:kwoojan   出自:CSS學習論壇