技巧：用CSS製作網頁過程中注意長度的細節

css|過程|技巧|網頁

　　background-position 的值可以是長度單位，百分比，或者關鍵字。

　　長度單位比較好理解。多少就多少，正的就正，負的就負的。而關鍵字的中left top就是0% center 就是50% right bottom就是100%，那百分比是怎樣算的呢？

　　假如是 background-position:50% 0 的話，就是容器的左上方開始的座標(50%,0) 和背景圖的左上方開始的座標(50%,0)的位置同點處，但這樣的說法好像比較不好計算。
或者換個說法比較容易理解： 容器的寬減去背景圖的寬，再乘 50% ，高的計算也一樣。

　　比如 容器寬 1000px 背景圖寬 800px：

　　如果background-positionX 是50%時，就是 ( 1000px - 800px ) * 50% = 100px；

　　如果background-positionX 是-50%時，就是 (1000px - 800px ) *-50% = -100px。

　　又比如 容器寬 600px 背景圖寬 800px ：

　　如果background-positionX 是 50% 時，就是 ( 600px - 800px ) * 50% = -100px；

　　如果background-positionX 是 -50% 時，就是 (600px - 800px ) *-50% = 100px 。

　　最後一種就會出現就算是使用負的百分比也讓容器的背景圖左邊為空白或者出現背景色，百分比真是奇妙！

　　因為螢幕能顯示的最小單位是1px，對於像773*50%=386.5這樣帶數位長度必須有所取捨。

　　IE：按四捨五入的方式計算。

　　Firefox：計算後的值忽略小數部分，但會把多出的長度分配給裡面的各元素。 如果只多出1px，比如2*386=772，剩下的1px會到其中一個元素，優先分配第一個元素，像773px分配給兩個50%時得到的是：387px和386px，分配給四個25%時得到的是：194px、193px、193px和193px； 而對於多出幾個px，如773*33.3%=257.409，773*33.33%=257.6409，由於忽略掉的小數不一樣，分配的原則也不一樣，找不到相關資料，以下是我的猜想，三個元素的，按四捨五入的方式分配，四舍的優先分配給兩邊，五入的優先分配給前邊兩個，對於分配給三個元素以上的，多出部分自由分配，我找不到規律，但第一個一定會分配到。

　　FF還有一些奇怪的地方。Firefix測試頁面。1024寬度不會自動分配，也許是因為外層也是帶小數的，導致1px沒分配，接著測試Firefox

　　Opera & Safari2：計算時忽略百分比的小數部分，計算後的值忽略小數部分，如果裡面的元素大於計算後的寬度不會導致後面的元素換行。

　　Netscape & Mozilla：計算後忽略小數，多出部分有點類似Firefox，但多出部分是比透明顯示，而且比較奇怪，比如33.33%*3=99.99%　小於100%，但卻大於100%，奇怪的瀏覽器，還好使用的人不多，不用過於在意這兩個瀏覽器。

　　測試沒完成，有興趣的朋友幫忙測試，單獨的測試頁，有知道原因的朋友講一下。