雙飛翼布局

2021-07-09 21:21:18 字數 1149 閱讀 6058

第一可以實現三列布局左右固定寬度,中間寬度自適應,第二個,通常三列布局都是按照左(sub)中(main)右(extra)順序來寫的,這樣頁面也會根據這個dom結構來順序載入,而如果用雙飛翼布局,可以使三列布局中mian先載入,subextra後載入。

html:

class="main">div>

class="sub">div>

class="extra">div>

這裡如果都設定左浮動,main就會出現在頁面左邊;

我們都知道,如果浮動布局一排裡顯示不下時,行框就會被擠到下一行;

那麼如果邊距為負,他會移動到頁面以外,當值大於等於自身寬度時,他就會被移動到上一行。

這時就可以使用負邊距來實現另外兩列的布局

css:

.main

.sub

.extra

效果如圖:

此時subextra都定位到正常位置了,但是main的左側和右側被擋住了。

因為main,sub,extra都處在浮動層,而且main是固定寬度,如果給main設定margin或者padding值,會因為其固有的寬度而撐開飛翼布局,直接影響到sub,extra的位置;

所以給main設定乙個內層,為內層設定margin值

html:

class="main">

class="main-content">

div>

div>

class="sub">div>

class="extra">div>

css:

.main-content

效果圖:

雙飛翼布局

ued的本意是使用者體驗設計,user experience design,通常的理解,我們做的一切是為了呈現在您眼前的頁面。這是我們平時的寫法,為其新增css樣式 如果按照浮動方法寫,頁面在被瀏覽器解析時,按照左側功能區塊,主題內容功能區塊,右側功能區塊進行載入。但是現在很多專案都是需要主體功能區...

雙飛翼布局

雙飛翼布局 zhongjian zuobian zhongjian 作用 是 團隊提出一種優化寫法,main寫在前面,優先載入,優先渲染,而且相容性好。中間部分優先載入,有利於使用者體驗 doctype html html head title 雙飛翼布局 title meta charset ut...

雙飛翼布局

顯示效果 1 doctype html 2 html 3 head 4 meta charset utf 8 5 title 雙飛翼布局 title 6 style type text css 7 8 注釋 當div脫離文件流時,乙個div center 的寬度等於100 是會使其他div left...