CSS 盒模型、塊狀元素與內聯元素、CSS選擇器

2024-07-11 08:46:15

字體：大中小

來源：轉載

供稿：網友

【例子】
要求：
1）寬度、高度均是200像素；
2）顏色為紅色#900；
自己做做，看看能不能作出來？先不要看我的代碼，如果真的做不出來，就下載下來，跟著我下面說的一步一步修改。
下面是我的代碼： 例子1.rar (498 Bytes)
在IE6和FF中顯示效果如下圖：
未標題-2.gif

怎么樣，比較容易吧~，但是你們有沒有發現，紅色區域離瀏覽器的頂部和左邊的邊距IE6和FF的不一樣，有沒有發現？這樣的話，我們作出來的頁面瀏覽器就不兼容了，效果不一樣了？為什么會這樣？
這是因為每個瀏覽器都有一個內置的CSS文件，當你沒有對某個標簽的屬性設置的時候，瀏覽器就會應用內置的CSS文件，怎么才能做到瀏覽器兼容？不著急，你只需要在CSS文件中，將我們目前應用到得標簽body和div置零就OK了，代碼這么寫

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

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

未標題-2副本.gif

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

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

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

上一篇：css 塊狀元素和內聯元素

下一篇：css 浮動理解Float的含義