1. 程式人生 > >關於聖盃佈局和雙飛翼佈局

關於聖盃佈局和雙飛翼佈局

聖盃佈局和雙飛翼佈局講的都是三欄佈局,其中兩欄固定,中間自適應,兩者顯示的效果是一致的;另外由於沒有使用絕對定位position:absolute,所以可以避免發生當頁面內容比較多的時候用絕對定位導致的頁面佈局混亂到處飛的情況:

聖盃佈局:

 


效果:


雙飛翼佈局:



效果:


從上面我們可以看到,聖盃佈局和雙飛翼佈局的效果一致,而且程式碼也類似,不同之處在於:雙飛翼佈局時在自適應層裡面再新增一個div層,然後再利用margin-left和margin-right對兩個固定欄進行定位和佈局,與聖盃佈局用padding對比,雙飛翼佈局用margin只是多了一個額外的div層,但是少寫了聖盃佈局裡面的4行程式碼:"position:relative"*2+"left:-200px"+"right:-220px",而且全域性只用到了浮動float而沒有用相對定位position:relative,所以如果再利用相對定位的話,那麼在這三欄的基礎上面還可以進行各種各樣的佈局。

(注:在使用聖盃佈局和雙飛翼佈局時,在程式碼中需要把自適應欄的程式碼層放到三欄中第一層,這是因為自適應欄需要在瀏覽器中優先進行渲染)