一、聖杯布局
doctype html
>
<
html
>
<
head
>
<
title
>中間自適應
title
>
<
style
type
="text/css"
>
.container
.container div
.box2
.box1
.box3
style
>
head
>
<
body
>
<
div
class
="container"
>
<
div
class
="box2"
>
透視點距離元④perspective 透視點 => 即透視點距離元素的z軸的距離 => 他如果作為屬性，則是設定舞台元素（即設定在要轉換元素的父級元素上）；如果作為transform的屬性值,則設定的是當前元素④perspective 透視點 => 即透視點距離元素的z軸的距離 => 他如果作為屬性，則是設定舞台元素（即設定在要轉換元素的父級元素上）；如果作為transform的屬性值,則設定的是當前元素④perspective 透視點 => 即透視點距離元素的z軸的距離 => 他如果作為屬性，則是設定舞台元素（即設定在要轉換元素的父級元素上）；如果作為
div>
<
div
class
="box1"
>
④perspective 透視點 => 即透視點距離元素的z軸的距離 => 他如果作為屬性，則是設定舞台元素（即設定在要轉換元素的父級元素上）；如果作為transform的屬性值,則設定的是當前元素④perspective 透視點 => 即透視點距離元素的z軸的距離 => 他如果作為屬性，則是設定舞台元素（即設定在要轉換元素的父級元素上）；如果作為transform的屬性值,則設定的是當前元素④perspective 透視點 => 即透視點距離元素的z軸的距離 => 他如果作為屬性，則是設定舞台元素（即設定在要轉換元素的父級元素上）；如果作為transform的屬性值,則設定的是當前元素④perspective 透視點 => 即透視點距離元素的z軸的距離 => 他如果作為屬性，則是設定舞台元素（即設定在要轉換元素的父級元素上）；如果作為transform的屬性值,則設定的是當前元素
div>
<
div
class
="box3"
>
④perspective 透視點 => 即透視點距離元素的z軸的距離 => 他如果作為屬性，則是設定舞台元素（即設定在要轉換元素的父級元素上）；如果作為transform的屬性值,則設定的是當前元素④perspective 透視點 => 即透視點距離元素的z軸的距離 => 他如果作為屬性，則是設定舞台元素（即設定在要轉換元素的父級元素上）；如果作為transform的屬性值,則設定的是當前元素④perspective 透視點 => 即透視點距離元素的z軸的距離 => 他如果作為屬性，則是設定舞台元素（即設定在要轉換元素的父級元素上）；如果作為transform的屬性值,則設定的是當前元素④perspective 透視點 => 即透視點距離元素的z軸的距離 => 他如果作為屬性，則是設定舞台元素（即設定在要轉換元素的父級元素上）；如果作為transform的屬性值,則設定的是當前元素
div>
div>
body
>
html
>
二、calc計算屬性實現中間自適應，兩邊固定寬度
doctype html
>
<
html
>
<
head
>
<
title
>calc
title
>
<
style
type
="text/css"
>
.contaienr
.contaienr div
.inner
.left
.right
style
>
head
>
<
body
>
<
div
class
="contaienr"
>
<
div
class
="left"
>
聽說雙飛翼布局是玉伯大大提出來的，始於**ued
如果把三欄布局比作乙隻大鳥，可以把main看成是鳥的身體，sub和extra則是鳥的翅膀。這個布局的實現思路是，先把最重要的身體部分放好，然後再將翅膀移動到適當的地方.
其實跟上邊的聖杯布局差不多的，當然也可以改動一下（自己想想有哪些不同吧）
div>
<
div
class
="inner"
>
聽說雙飛翼布局是玉伯大大提出來的，始於**ued
如果把三欄布局比作乙隻大鳥，可以把main看成是鳥的身體，sub和extra則是鳥的翅膀。這個布局的實現思路是，先把最重要的身體部分放好，然後再將翅膀移動到適當的地方.
其實跟上邊的聖杯布局差不多的，當然也可以改動一下（自己想想有哪些不同吧）
div>
<
div
class
="right"
>
聽說雙飛翼布局是玉伯大大提出來的，始於**ued
如果把三欄布局比作乙隻大鳥，可以把main看成是鳥的身體，sub和extra則是鳥的翅膀。這個布局的實現思路是，先把最重要的身體部分放好，然後再將翅膀移動到適當的地方.
其實跟上邊的聖杯布局差不多的，當然也可以改動一下（自己想想有哪些不同吧）
div>
div>
body
>
html
>
三、flex彈性盒子實現中固兩邊自適應
doctype html
>
<
html
>
<
head
>
<
title
>聖杯
title
>
<
style
type
="text/css"
>
.contaienr
.inner
.left
.right
style
>
head
>
<
body
>
<
div
class
="contaienr"
>
<
div
class
="left"
>
聽說雙飛翼布局是玉伯大大提出來的，始於**ued
如果把三欄布局比作乙隻大鳥，可以把main看成是鳥的身體，sub和extra則是鳥的翅膀。這個布局的實現思路是，先把最重要的身體部分放好，然後再將翅膀移動到適當的地方.
其實跟上邊的聖杯布局差不多的，當然也可以改動一下（自己想想有哪些不同吧）
div>
<
div
class
="inner"
>
聽說雙飛翼布局是玉伯大大提出來的，始於**ued
如果把三欄布局比作乙隻大鳥，可以把main看成是鳥的身體，sub和extra則是鳥的翅膀。這個布局的實現思路是，先把最重要的身體部分放好，然後再將翅膀移動到適當的地方.
其實跟上邊的聖杯布局差不多的，當然也可以改動一下（自己想想有哪些不同吧）
div>
<
div
class
="right"
>
聽說雙飛翼布局是玉伯大大提出來的，始於**ued
如果把三欄布局比作乙隻大鳥，可以把main看成是鳥的身體，sub和extra則是鳥的翅膀。這個布局的實現思路是，先把最重要的身體部分放好，然後再將翅膀移動到適當的地方.
其實跟上邊的聖杯布局差不多的，當然也可以改動一下（自己想想有哪些不同吧）
div>
div>
body
>
html
>
四、雙飛翼布局。
省略，見其他部落格
五、參考
聖杯 雙飛翼布局
自己雖然經歷著web應用的開發,總是拿著別人寫好的css來引用到自己的專案當中,甚至一度迷上了bootstrap,發現有了它自己可以不用在寫程式邏輯的同時還要去修改別人的css.當然開發的應用大多數是企業內部應用,個別網際網路的程式.2016偶然的機會接觸到前端這個概念,發現自己還是挺喜歡前端的這些...
聖杯布局 雙飛翼布局
前言 上班划水偷空了解了一下聖杯布局和雙飛翼布局，一聽這兩個名字，覺得不明覺厲，其實就是三欄布局，左右兩邊的盒子寬度固定，中間的盒子寬度自適應。以下內容均是總結網際網路上別人的文章。覺得有意思就記錄一下。聖杯布局，方法一 container middle left right style head ...
布局 聖杯布局 雙飛翼布局
隨著前端技術的發展推進，web端的布局方式已基本成熟，那麼在 布局方式中，三列布局最為常用，布局方式也有很多，漸漸的開發者們開始從效率的角度優化自己的 如果三排布局能將中間的模組放在dom樹前面，那麼瀏覽器在做重繪的時候不久有限顯示了嗎？機制的開發者們開始圍繞者這個方向進行了dom的優化，於是誕生了...