CSS 盒模型、塊狀元素與內(nèi)聯(lián)元素、CSS選擇器

2024-07-11 08:26:53

字體：大中小

供稿：網(wǎng)友

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

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

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

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

未標(biāo)題-2副本.gif

好，我們接著來，現(xiàn)在再加一個條件

3）讓紅色區(qū)域與瀏覽器的頂部和左邊距離為20像素；

怎么樣，有沒有思路？沒有思路沒關(guān)系，繼續(xù)向下看
我們，只需要設(shè)置紅色方塊的外邊距就可以了，添加如下CSS代碼：

margin-top:20px;
margin-left:20px;

效果如下圖

這樣就使紅色區(qū)域定位于頁面坐標(biāo)(20,20)處了，與瀏覽器上邊距和左邊距都為20像素。
不過上面的這種寫法我們可以精簡為

margin:20px 0 0 20px;

其中的數(shù)值順序是：上右下左。
而margin:20px 0;則和margin:20px 0 20px 0;是等價的喲~只不過是更加精簡而已，這樣寫CSS加載速度會更快。

我們接著將問題延伸，怎樣才能讓紅色區(qū)域水平定位于瀏覽器的正中間，無論瀏覽器窗口的大小，顯示器分辨率的大小。
也很簡單，剛剛加的兩句話"margin-top:20px;margin-left:20px;"修改為