聖杯布局和雙飛翼布局的作用和區別

2022-01-15 04:42:23 字數 3893 閱讀 8424

聖杯布局和雙飛翼布局解決的問題是一樣的,就是兩邊頂寬,中間自適應的三欄布局,中間欄要在放在文件流前面以優先渲染。

聖杯布局和雙飛翼布局解決問題的方案在前一半是相同的,也就是三欄全部float浮動,但左右兩欄加上負margin讓其跟中間欄div併排,以形成三欄布局。

不同在於解決」中間欄div內容不被遮擋「問題的思路不一樣:

聖杯布局,為了中間div內容不被遮擋,將中間div設定了左右padding-left和padding-right後,將左右兩個div用相對布局position: relative並分別配合right和left屬性,以便左右兩欄div移動後不遮擋中間div。

雙飛翼布局,為了中間div內容不被遮擋,直接在中間div內部建立子div用於放置內容,在該子div裡用margin-left和margin-right為左右兩欄div留出位置。

多了1個div,少用大致4個css屬性(聖杯布局中間divpadding-left和padding-right這2個屬性,加上左右兩個div用相對布局position: relative及對應的right和left共4個屬性,一共6個;而雙飛翼布局子div裡用margin-left和margin-right共2個屬性,6-2=4),個人感覺比聖杯布局思路更直接和簡潔一點。

簡單說起來就是」雙飛翼布局比聖杯布局多建立了乙個div,但不用相對布局了「,而不是你題目中說的」去掉relative"就是雙飛翼布局「。

最終介面是一樣的:

對比圖:

下面直接上**:

聖杯布局:

>聖杯布局

title

>

<

style

>

*.bd

.middle

.left

.right

style

>

head

>

<

body

>

<

div

class

="bd"

>

<

div

class

="middle"

>middle

div>

<

div

class

="left"

>left

div>

<

div

class

="right"

>right

div>

div>

body

>

html

>

雙飛翼布局:

>雙飛翼布局

title

>

<

style

>

*.middle

.left

.right

/*給內部div新增margin,把內容放到中間欄,其實整個背景還是100%

*/.middle .inside

style

>

head

>

<

body

>

<

div

class

="middle"

>

<

div

class

="inside"

>middle

div>

div>

<

div

class

="left"

>left

div>

<

div

class

="right"

>right

div>

body

>

html

>

<

body

>

<

style

type

="text/css"

>

body

.boxa

.boxb

.boxc

.box

/*abc

*//*

.boxa

.boxb

*//*

cba*/

.container

.boxb

.boxc

.boxa

/*bac

*//*

.boxc

.container

*/style

>

<

p>現有並列的三列布局結構,從左至右依次為 a, b, c, 寬度分別為180px, 600px, 180px。要求在不改變 html 結構的情況下用css實現:abc,cba,bac 三種布局及在cba排列下使b寬度自適應(三列總寬度100%),不能使用針對瀏覽器的css hack.

p>

<

div

class

="container"

>

<

div

class

="box boxb"

>b

div>

<

div

class

="box boxc"

>c

div>

<

div

class

="box boxa"

>a

div>

div>

body

>

原始碼位址 :

聖杯布局和雙飛翼布局

雙飛翼布局和聖杯布局其實是我們經常會在 中看到的經典的三欄式布局,即中間是主要內容main content,然後是左邊側欄,一般是 的分類資訊,右邊欄就是一些附屬功能,最典型的例子就是 和京東。main main son left right 上面就是雙飛翼布局的html 結構非常清晰,分為main...

聖杯布局和雙飛翼布局

一 聖杯布局 重點 content的padding,left的margin left和left值,right的margin left和right值 lang en charset utf 8 聖杯布局title header content content main content left,con...

聖杯布局和雙飛翼布局

聖杯布局 title style type text css body 2.設定container的樣式 container 3.設定middle left right的公用樣式 middle,left,right 4.設定middle的樣式 middle 5.設定left的樣式 left 6.設定...