常見頁面布局
一、兩欄布局，左邊定寬，右邊自適應
左邊左浮動，右邊加overflow:hidden;變成bfc清除左側浮動元素的影響
#left
#right
dom結構
"header">
"container">
"center" class="column">
"left" class="column">
"right" class="column">
"footer">
conatiner包裹的center,left,right三列，其中center定義在最前面。
css**
（1）假設左側的固定寬度為200px,y右側的固定寬度為150px,則首先在container上設定：
#container
#container .column
#center
#left
#right
#footer
center的寬度為100%，即佔據了第一行的所有空間，所以left和right背擠到了下一行，接下來的工作是將left放置到之前預留出的位置上，這裡使用負外邊距：
#left
#left
position:relative和right:200px將left的位置在原有的位置上左移200px,以完成left的放置
（5）接下來放置right,只需要新增一條宣告即可
#right
body
聖杯的css**總結為：
body
#container
#container .column
#center
#left
#right
#footer
三、雙飛翼布局
（1）dom結構
"header"
>
"container" class=
"column"
>
"center"
>
"left" class=
"column"
>
"right" class=
"column"
>
"footer"
>
container僅包裹住center，另外將.column類從center移至container上。
（2）css**
按照與聖杯布局相同的思路，首先設定各列的寬度與浮動，並且為左右兩列預留出空間，以及為footer設定浮動清除
#container
.column
#center
#left
#right
#footer
container,left,right設定為float: left，而在container內部，center由於沒有設定浮動，所以其寬度預設為container的100%寬度，通過對其設定margin-left和margin-right為左右兩列預留出了空間。
（3）將left放置到預留位置：
#left
#right
position:relative進行定位，所以最小頁面寬度應該為200+150=350px。但是當頁面寬度縮小到350px附近時，會擠占中間欄的寬度，使得其內容被右側欄覆蓋
（6）因此在設定最小頁面寬度時，應該適當增加一些寬度以供中間欄使用（假設為150px），則有
body
body
#container
.column
#center
#left
#right
#footer
通過對聖杯布局和雙飛翼布局的介紹可以看出，聖杯布局在dom結構上顯得更加直觀和自然，且在日常開發過程中，更容易形成這樣的dom結構（通常和/一起被巢狀在中）；而雙飛翼布局在實現上由於不需要使用定位，所以更加簡潔，且允許的頁面最小寬度通常比聖杯布局更小。
兩,三欄布局, 雙飛翼，聖杯布局
主要用於 我放一張圖你們就明白了 1.第一種使用margin和浮動實現 如下 1987年2月2日出生於山東省青島市，中國內地女演員 歌手，亞洲多棲發展女藝人。2008年，宋茜作為演員 廣告模特在亞洲地區正式開始演藝活動。2009年，擔任女子流行演唱組合f x 隊長，以歌手身份正式出道。2012年，主...
css兩欄布局 聖杯布局 雙飛翼布局
最近幾個月一直用vue在寫手機端的專案，主要寫業務邏輯，在js方面投入的時間和精力也比較多。這兩天寫頁面明顯感覺css布局方面的知識有不足，所以複習一下布局方法。box1 left box1 right 兩列自適應 box1 box1 left box1 right box1 box1 left b...
CSS布局說 兩欄布局 三欄布局（聖杯 雙飛翼）
5.三欄布局 小知識點 內聯元素從左向右 塊級元素從上向下 各佔一行 position屬性，有6大類 這是標準盒子模型，可以看到width的長度等於content的寬度 而當將box sizing的屬性值設定成border box時，盒子模型的width border padding content...