1.設定三個盒子，左側固定，右側固定，中間自適應，都設定浮動，中間先解析
2.左側盒子，margin-left:-100%,右側盒子設定，margin-left: -本身寬度
3.給父標籤設定內邊距，然後給左右兩側設定定位移動
聖杯布局缺點：當中間部分寬度小於左側部分寬度時，布局會混亂
>
*.center
.left
.right
.clearfix::after
.wrap
style
>
head
>
>
class
="wrap clearfix"
>
class
="center"
>
centerdiv
>
class
="left"
>
leftdiv
>
class
="right"
>
rightdiv
>
div>
body
>
2.左側設定，margin-left:-100%,右側設定，margin-left: -本身寬度
3.給中間部分內部再設定乙個子標籤，設定margin 屬性
雙飛翼布局缺點：相對於聖杯布局多巢狀一層標籤
>
*.center
.left
.right
.inner
style
>
head
>
>
class
="wrap"
>
class
="center"
>
class
="inner"
>
centerdiv
>
div>
class
="left"
>
leftdiv
>
class
="right"
>
rightdiv
>
div>
body
>
>
*.left
.center
.right
.clearfix:after
.wrap
style
>
head
>
>
class
="wrap clearfix"
>
class
="left"
>
你你你你你您 你你你你你您 你你你你你您 你你你你
你您 你你你你你您 你你你你你您 你你你你你您 你你
你你你您 你你你你你您 你你你你你您 你你你你你您
你你你你你您 你你你你你您 你你你你你您 你你你你
你您 你你你你你您 你你你你你您 你你你你你您 你你
你你你您 你你你你你您 你你你你你您 你你你你你您
你你你你你您 你你你你你您
div>
class
="center"
>
我我我我我我我我我我我我我我我我我我我我我我我我
我我我我我我我我我我我我我我我我我我我我我我我我
我我我我我我我我我我我我我我我我我我我我我我我我
我我我我我我我我我我我我我我我我我我我我我我我我
我我我我我我我我我我我我我我我我我我我我我我我我
我我我我我我我我我我我我我我我我我我我我我我我我
我我我我我我我我我我我我我我我我我我我我我
div>
class
="right"
>
他他他他他他他他他他 他他他他他他他他他他 他他
他他他他他他他他 他他他他他他他他他他 他他他他
他他他他他他 他他他他他他他他他他 他他他他他他
他他他他 他他他他他他他他他他 他他他他他他他他
他他 他他他他他他他他他他 他他他他他他他他他他
他他他他他他他他他他 他他他他他他他他他他
div>
div>
body
>
2、通過margin向左（向右）移動中間得盒子和最裡面的盒子
3、最後給三個平級標籤加相對定位，向右（向左）移動後兩個平級盒子寬度之和，實現真等高
>*.a
.b.c
.left
.center
.right
.clearfix:after
style
>
head
>
>
class
="a"
>
class
="b"
>
class
="c clearfix"
>
class
="left"
>
你你你你你您 你你你你你您 你你你你你您 你你你你
你您 你你你你你您 你你你你你您 你你你你你您 你你
你你你您 你你你你你您 你你你你你您 你你你你你您
你你你你你您 你你你你你您 你你你你你您 你你你你
你您 你你你你你您 你你你你你您 你你你你你您 你你
你你你您 你你你你你您 你你你你你您 你你你你你您
你你你你你您 你你你你你您
div>
class
="center"
>
我我我我我我我我我我我我我我我我我我我我我我我我
我我我我我我我我我我我我我我我我我我我我我我我我
我我我我我我我我我我我我我我我我我我我我我我我我
我我我我我我我我我我我我我我我我我我我我我我我我
我我我我我我我我我我我我我我我我我我我我我我我我
我我我我我我我我我我我我我我我我我我我我我我我我
我我我我我我我我我我我我我我我我我我我我我
div>
class
="right"
>
他他他他他他他他他他 他他他他他他他他他他 他他
他他他他他他他他 他他他他他他他他他他 他他他他
他他他他他他 他他他他他他他他他他 他他他他他他
他他他他 他他他他他他他他他他 他他他他他他他他
他他 他他他他他他他他他他 他他他他他他他他他他
他他他他他他他他他他 他他他他他他他他他他
div>
div>
div>
div>
body
>
html css經典布局 等高 聖杯 雙飛翼
以三欄等高布局為例 第一欄寬度30 第二欄寬度40 第三欄寬度30 幾欄就寫幾個容器，這裡需要3個容器，分別是爺爺爸爸和兒子，寬度是100 使用相對定位把爸爸向左側移動30 漏出爺爺的30 使用相對定位把兒子向左側移動40 漏出爸爸的40 在兒子裡面寫左中右三欄，給這三欄設定浮動，讓他們在同一行顯示...
聖杯布局，雙飛翼布局和偽等高
聖杯布局和雙飛翼是功能相同，最終樣式相同，但實現方式不同的兩種布局方式，其目的都是實現兩側寬度固定，中間寬度自適應的三欄布局。以下貼出兩種常見的書寫方式 需要考慮 頁面的最小寬度，不僅僅是左右兩欄的寬度200 150 之和，因為 left 設定了relative定位，所以就意味著在center開始的...
聖杯 雙飛翼布局
自己雖然經歷著web應用的開發,總是拿著別人寫好的css來引用到自己的專案當中,甚至一度迷上了bootstrap,發現有了它自己可以不用在寫程式邏輯的同時還要去修改別人的css.當然開發的應用大多數是企業內部應用,個別網際網路的程式.2016偶然的機會接觸到前端這個概念,發現自己還是挺喜歡前端的這些...