雙飛翼布局的意義
第一可以實現(xiàn)三列布局左右固定寬度枕面，中間寬度自適應(yīng)愿卒，第二個，通常三列布局都是按照左(sub)中(main)右(extra)順序來寫的潮秘，這樣頁面也會根據(jù)這個DOM結(jié)構(gòu)來順序加載琼开，而如果用雙飛翼布局，可以使三列布局中mian先加載枕荞，sub和extra后加載柜候。
雙飛翼布局的實現(xiàn)
雙翼
html:
<body>
<div class="main"></div>
<div class="sub"></div>
<div class="extra"></div>
</body>
- 這里如果都設(shè)置左浮動，
main就會出現(xiàn)在頁面左邊; - 我們都知道躏精，如果浮動布局一排里顯示不下時渣刷，行框就會被擠到下一行；
- 那么如果邊距為負(fù)矗烛，他會移動到頁面以外辅柴，當(dāng)值大于等于自身寬度時，他就會被移動到上一行瞭吃。
- 這時就可以使用負(fù)邊距來實現(xiàn)另外兩列的布局
css:
.main{ float:left;width:100%;}
.sub{ float:left;width:190px;margin-left:-100%;}
.extra{float:left;width:230px;margin-left:-230px;}
效果如圖：
_1
鳥身
- 此時
sub和extra都定位到正常位置了碌识，但是main的左側(cè)和右側(cè)被擋住了。 - 因為
main,sub,extra都處在浮動層虱而，而且main是固定寬度筏餐，如果給main設(shè)置margin或者padding值，會因為其固有的寬度而撐開飛翼布局牡拇，直接影響到sub,extra的位置魁瞪； - 所以給
main設(shè)置一個內(nèi)層,為內(nèi)層設(shè)置margin值
html:
<div class="main">
<div class="main-content">
</div>
</div>
<div class="sub"></div>
<div class="extra"></div>
css:
.main-content{margin:0 230px 0 190px;}
效果圖：
_0
