常用的頁面布局（兩欄布局，聖杯 雙飛翼布局）

前言：他們都遵循以下要點

兩側寬度固定，中間寬度自適應

中間部分在dom結構上優先，以便先行渲染

允許三列中的任意一列成為最高列

只需要使用乙個額外的

外層 標籤

"left"

>左邊定寬<
/div>
"right"
>右邊自適應,前端前端前端前端前端前端前端前端前端前端<
/div>

#left

#right

2.1：聖杯布局

dom結構

"header"

>
<
/div>
"container"
>
"center"
class
="column"
>
<
/div>
"left"
class
="column"
>
<
/div>
"right"
class
="column"
>
<
/div>
<
/div>
"footer"
>
<
/div>

#container

#center 

#left 
#right

#left

#right

前言：它跟聖杯布局大致上是一樣的，只不過聖杯布局的三個子元素 都是被父元素包裹起來的，而雙飛翼布局，父元素只包裹了中間的盒子

"header"
>
<
/div>
"container"
class
="column"
>
"center"
>
<
/div>
<
/div>
"left"
class
="column"
>
<
/div>
"right"
class
="column"
>
<
/div>
"footer"
>
<
/div>

#center 

#left 
#right

#left

#right

"container"

>
"center"
>
<
/div>
"left"
>
<
/div>
"right"
>
<
/div>
<
/div>

#container 

#center 
#left 
#right

body

頁面常用布局,三欄布局,聖杯布局,雙飛翼布局

1.這是三欄布局的浮動解決方案 2.這是三欄布局的浮動解決方案 3.這是三欄布局的浮動解決方案 4.這是三欄布局的浮動解決方案 5.這是三欄布局的浮動解決方案 6.這是三欄布局的浮動解決方案 1.這是三欄布局的浮動解決方案 2.這是三欄布局的浮動解決方案 3.這是三欄布局的浮動解決方案 4.這是三欄...

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...