前幾天的時候在qq
群裡有一位朋友遇到了這樣乙個問題，是關於布局轉換的，在說這個問題之前，我希望給大家介紹一下什麼叫布局轉換。
首先我們經常會遇到這種布局:
我想大家一看就會想到外面乙個父級，裡面6
個子元素，一浮動，
ok了，只有腦子稍稍不正常的人才會用
position:absolute
定位乙個乙個定。我和大家想的也一樣，因此這樣乙個布局自然就出來了
1對應的樣式為<
ul id
="ul1"
class
="clear"
>
2<
li>1
li>
3<
li>2
li>
4<
li>3
li>
5<
li>4
li>
6<
li>5
li>
7<
li>6
li>8ul
>
1這個時候，一切看起來都很好，但是如果來了這樣乙個需求：需要給這6個li.clear:after
2#ul1
3#ul1 li
加乙個動畫，希望移入每個
li的時候從中間放大，類似這種效果
首先我們可以考慮一下做這個效果的思路：假如 li
的寬和高都變成了原來的兩倍，但同時
left
和 top
也變化了，
left
在原來的基礎上減小的值是原來矩形寬度的一半，
top
減小的值也是原來矩形高度的一半，這個時候，大家感覺到什麼問題了嗎？
我所有的 li
都是浮動的，**來的
left
和top
啊？這時，一定馬上有人會有反應說：這還不簡單，改成定位唄。
但是大家想一想，這種布局適合定位嗎？如果定位的話，給每乙個li
設定left
和top
值，那將會是一件極其噁心的事情，因此答案一定是否定的。
既然想用浮動，又想獲取left
和top
的值，這怎麼辦呢？這個時候就需要用布局轉換，顧名思義，就是把浮動的布局轉換為定位的布局，從而方便我們拿到它們的
left
和top
值，很容易的能夠想到：
1 window.onload=function這時在瀏覽器當中預覽，我們就可以看到:()10 };
如果效果和我的一樣，那麼恭喜你，這種做法是錯誤的，很明顯，效果不是咱們想要的，那麼問題到底出在哪兒呢？
我們在這裡打乙個斷點（第7
行）：
1 window.onload=function預覽之後發現乙個很詭異的介面:()11 };
1之後居然是
3,2跑到**去了？
我們在第7
行打了斷點之後，當迴圈進行第一遍時，
i的值為
0，也就是說此時我們為第1個
li設定了絕對定位，此時要注意，設定了絕對定位的元素是要脫離文件流的，何為脫離文件流？就是指元素會漂起來，因此，1
就會漂在
2 3 4 5 6
的上方，此時
1將會把
2遮住，所以我們就看不見
2了，此時你再獲取1的
offsetleft
和offsettop
，必然是
10(如果給
ul加了相對定位的話
)，那麼為什麼他們最後都會擠到一塊兒呢？不要著急，按下
f8，放開現在的斷點，進入下次迴圈。
當進入第二次斷點之後，如下圖所示：
這時，根據我們上次的分析，相信大家對這次的結果心裡必然有底，因為給第2個li
加了absolute
，所以第二個
li飄起來，在
3 4 5 6
的上方，將
3遮住了，所以我們就看不見
3了，但是有人一定著急了，你那
2形狀怎麼那麼奇怪啊，好像錯出來一部分一樣，事實上不是這樣的，錯出來的那部分實際上不是別人，就是
1，不要忘了，我們在第一次斷點之後給
1設定了
left
和top
值，因此1就被定位定在那裡了，但是可能大家又會想，設定了
left
和top
值又怎樣呢，那不應該是相對於父級，也就是圖上黑色的邊框
left
和top
各10px
嗎？但是大家不要忘了，我們的li
可是有10px
的margin
啊，如果說到這裡還不明吧的話，可以看看下面這張圖：
我們的2和3實際上是在粉色的框那個位置，所以看起來就錯位了，這一塊可能稍微有些費解，請大家認真揣摩一下。
這樣一來，每次加完定位之後剩下的li都會往前面擠，然後當前li(正在脫離文件流的li)再被定到left:10px;top:10px的位置，就得到了最開始那幅6個li擠到了一起的圖。
說了這麼多了，那到底該如何解決這個問題呢？這時，我那位qq裡面的朋友就想出這樣一種辦法：
window.onload=function從上面的**中我們可以看出，他把position:absolute;放在了設定left和top後面，我們分析一下這樣做可以嗎？() };
很顯然還是不可以，為什麼呢？我們還是從for迴圈的第一次開始分析，第1個li我們為它設定了left和top值，很好，沒什麼問題，但是，馬上又給第1個li加了絕對定位，那第1個li馬上脫離文件流，2 3 4 5 6照樣還會擠過去，還會出現上面說的問題，因此，這樣做是不對的。
分析到這裡，相信大家已經有感覺了，都是定位惹的禍，也就是說這句話
ali[i].style.position="absolute";放置的位置，成了關鍵。
那麼這句到底應該放在**呢？
我們應該有感覺了，只要在獲取到offsetleft和offsettop並賦值給left和top之後設定，這樣就很好了，所以出現了下面的解決方案：
for(var i=0;i)從**中，我們可以看出來，我們將設定left和top與設定定位分開來放到兩個不同的塊級作用域當中了，這樣就將它們徹底分開了。for(var i=0;i)
到現在為止，不要高興的太早，之前我們遺留下來乙個問題就是在第二次斷點的時候我們發現1和原來的位置相比錯位了，那這個錯位怎麼解決呢？
仔細想想這個錯位是怎麼來的呢？
是這樣的，left和top定位的時候定的是我們整體盒模型(在這裡就是指的margin)，而不單單是從元素width height開始的那部分，但是offsetleft和offsettop在計算的時候，是將margin算上之後賦給left和top的，所以margin就相當於多算了一次，因此，我們還需要把多算的這次margin去掉，來讓li回到原來的位置。所以，最終的**應該是這樣：
for(var i=0;i)for(var i=0;i)
CSS 常見的css布局
1 單列布局 主要使用max width屬性樣式實現，使用max width是為了當螢幕小於2000px時不出現滾動條 2 兩列自適應布局 兩列自適應布局是指一列由內容撐開，另一列撐滿剩餘寬度的布局方式，為了觸發ie瀏覽器的haslayout屬性，需設定zoom 1 2.1 使用float over...
簡單的css布局
對於初學者來說css的布局是至關重要的，這關係到整個網頁的外觀。乙個網頁的好壞其基礎就起源於此。以下是本人的隨文練習，較為粗糙，大神莫拍。html 左邊定寬200px 右邊自適應 著是乙個很簡單的兩列布局，左側定值，右側自適應。雖然看起來很簡單，但是其中涉及到margin的空間位移，譬如左側是將其先...
css布局的漂浮
css布局的漂浮 不怎麼用，了解一下，也寫不到 用到float屬性 有兩個屬性值 none 預設值。物件不漂浮。left 文字流向物件的右邊。right 文字流向物件的左邊。例1 漂浮.html aaaaaaaaaaaaa bbbbbbbbbbbbbb cccccccccccccc 效果 解釋 di...