更新一下以前的知識，雖然現(xiàn)在才學，但是為時不晚，而且這些東西還不得不學，挺經(jīng)典的，就是不知道當初學基礎的時候為什么沒有學到這些東西

站在用戶的角度思考問題，與客戶深入溝通，找到稱多網(wǎng)站設計與稱多網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設計與互聯(lián)網(wǎng)技術結合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都網(wǎng)站建設、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、國際域名空間、網(wǎng)絡空間、企業(yè)郵箱。業(yè)務覆蓋稱多地區(qū)。

一.左右兩列、一行三列、一行多列、多行多列布局

一行四列還有一行多列

首先統(tǒng)一配置需要裝在一個盒子里面，讓其有個寬高并居中

1.左右兩列

一個行的div包兩個列的div

注意行的div可以不設置寬高

中間要留有空白，兩個子盒子寬度應該占滿，最重要的將盒子設置浮動，并清除父盒子的浮動即可

2.一行三列

其實就是三欄布局

三個盒子都浮動，中間間距可以用margin微調

3.多行多列

核心思想在于行還是一個div包裹，里面為一個ulli

照樣行盒子不用設置寬高，核心思想在于直接給li設置寬高并浮動，

二.圣杯布局、雙飛翼布局

圣杯布局要實現(xiàn)的效果

關鍵步驟在于中間內容三個盒子左浮動，但是中間內容要自適應所以要設置為100%

造成這個局面，這個時候最關鍵的兩步來了，給left來一個marginleft=-100%，也就是向左走一個父盒子的寬度剛好到上面去，右邊走一個自己的寬度

這個時候雖然排列差不多了，但是我們的中間內容部分是被檔住的，給父元素左右各來一個padding分別是left right盒子的寬度

接下來用相對定位將他們移過去即可

雙飛翼布局也是完成這樣的效果，但是實現(xiàn)方法不一樣

首先還是需要左浮動，然后marginleft來移動到對應位置，但是不需要padding和relative了，直接將center內容再用一個盒子包裹起來

將這個盒子寬度自適應

然后將里面內容的盒子通過margin將內容放到中間來顯示

兩者的區(qū)別我覺得最大的區(qū)別是，圣杯布局在縮小的最小頁面的時候頁面會錯亂，而雙飛翼布局頁面不會錯亂