本小節的標題是盒子的定位，實際上對於使用css對網頁布局這個大主題來說．「定位」這個詞本身有兩種含義。
● 廣義的「定位」：要將某個元素故到某個位置的時候，這個動作可以稱為定位操作，可以使用任何css規則來實現，這就是泛指的乙個網頁排版中的定位操作，使用傳統的**排版時，同樣存在定位的問題。
● 狹義的「定位」：在css中有乙個非常重要的屬性position，這個單詞翻譯為中文也是定位的意思，然而受使css進行定位操作並不僅僅通過這個屬性來實現，因此不要把二者混淆。
首先，對position屬性的使用方法做乙個概述，後面再具體舉例子說明。position屬性可以設定為4個屬性值之一。
● static:這是預設的屬性值，也就是該盒子按照標準流（包括浮動方式）進行布局。
● reiative：稱為相對定位。使用相對定位的盒子的位置常以標準流的排版方式為基礎，然後使盒子相對於它在原本的標準位置偏移指定的距離。相對定位的盒子仍在標準流中，它後面的盒子仍以標準流方式對待它。
● absolute:絕對定位，盒子的位置以它的包含框為基準進行偏移。，絕對定位的盒子從標準流中脫離。這意味著它們對其後的兄弟盒子的定位沒有影響，其他的盒子就好像這個盒子不存在一樣。
● fixed:稱為固定定位，它和絕對定位類似，只是以瀏覽器視窗為基準進行定位，也就是當拖動瀏覽器視窗的滾動條時，依然保持物件位置不變。
讀者可能會覺得這4條屬性值不太易於理解，這一節的任務就是徹底搞懂它們的含義。
position定位與float-樣，也是css排版中非常重要的概念。position從字面意思上看就是指定塊的位置，即塊相對於其父塊的位置和相對於它自身應該在的位置。
一、static（靜態定位）
static為預設值，它表示塊保持在原本應該在的位置上，即該值沒有任何移動的效果。因此，前面的所有例子實際上都是static方式的結構，這裡就不再介紹了。
為了講解清楚後面的其他比較複雜的定位方式，也像上一節一樣，使用一系列實驗的方法，目標是通過實驗的方法找出規律。
這裡首先給出最基礎的**，也就是沒有設定任何position屬性，相當於使用stalic方式的頁面．，相應的檔案位於網頁學習網css教程資源中「第4章\09.htm」。
box-1
這個頁面的效果如圖1所示，這是乙個很簡單的標準流方式的兩層的盒子。
圖1 沒有設定position屬性時的狀態
二、relative（相對定位）
使用relative，即相對定位，除了將position屬性設定為relative之外，還需要指定一定的偏移量，承平方向通過left或者right屬性來指定，豎直方向通過top和bottom來指定。下面還是通過實驗的方式找到其中的規律。wangyexx.com
1．實驗1——個子塊的情況
下面在css樣式**中的box-i處，將position屬性設定為relative，並設定偏移距離，**如下。
#block1
效果如圖2所示，相應的檔案位於本書光碟中「第4章\10.htm」。圖中顯示了box-1原來的位置和新位置的比較。可以看出，它向右和向下分別移動了30畫素。也就是說，「left:30px」的作用就是使box-1的新位置在它原來位置的左邊框右側30畫素的地方，「top:30px」的作用就足使box-1的新位置在原來位置的上邊框下側30畫素的地力。
圖2 乙個div設定為相對定位後的效果
這4個屬性只有當position屬性設定為absolute、relative或fixed時才有效。而且，在position屬性取值不同時，它們的含義也不同。當posiition設定為relative時，它們表示各個邊界與原來位置的距離。
top、right、bottom和left這4個屬性除了可以設定為絕對的畫素數，還可以設定為百分數。此時，可以看到子塊的寬度依然是未移動前的寬度，撐滿未移動前父塊的內容。只是向右移動了，右邊框超出了父塊。因此，還可以得出另乙個結論，當子塊使用相對定位以後，它發生了偏移，即使移動到了父盒子的外面，父盒子也不會變大，就好像子盒子沒有變化一樣。
類似地，如果將偏移的數值設定為：
right:30px;
bottom:30px;
效果如圖2所示。
圖2 以右側和下側為基準設定相對定位
對於父塊來說，同樣沒有任何影響，就好像子塊沒有發生過任何改變一樣。因此可以總結出以下兩條結論。
● 使用相對定位的盒子．會相對於它原本的位置，通過偏移指定的距離，到達新的位置。
● 使用相對定位的盒子仍在標準流中，它對父塊沒有任何影響。
2．實驗2——兩個子塊的情況
下面討論兩個子塊的情況。把上面的網頁稍加改造，在父div中放兩個div。首先對它們都不設定任何偏移，**如下。
box-1
box-2
CSS學習 2 盒子
css2.1還包含outline屬性。與border屬性不同，輪廓繪製在元素框之上，所以它們不影響元素的大小或定位。因此輪廓有助於修復bug，因為它們不影響頁面的布局。大多數現代瀏覽器 包括ie8 支援輪廓，但是ie7和更低版本不支援輪廓。內邊距 邊框和外邊距都是可選的，預設值為零。但是，許多元素將...
css盒子的定位
css盒子定位 什麼是盒子定位呢，顧名思義，就是元素盒子 以下主要以塊級盒講解 在頁面中的位置，定位就是確定他的位置，盒子定位分為以下四種 1 靜態位置 position static 也就是預設值 每乙個元素在沒有float值的時候，都有position值，就是static，可以直接理解它在是預設...
css3盒子相關樣式
1 css3的display屬性 inline 內聯 inline block 可以設定寬高的內聯 block 設定為塊 doctype html html lang en head meta charset utf 8 title css3盒子型別 title style inline 內聯，in...