等高布局、圣杯布局、双飞翼布局的实现原理
等高布局：
?- 假等高:
原理：利用內(nèi)外邊距相抵消，注意父元素設(shè)置"overflow:hidden"，列變寬，其他列等高變化
優(yōu)點：結(jié)構(gòu)簡單，兼容所有瀏覽器
缺點：偽等高，需要合理控制margin和padding值配合
/*三列，把外面設(shè)置一個大盒子，里面3個小盒子*/ 父級：overflow:hidden;(溢出隱藏) 子級：padding-bottom:99999px;margin-bottom:-99999px; <body><div class="father"><div class="left">ga7a7dgadd 撒旦哈偶地 暗殺號段電話刈待定ga7a7dgadd 撒旦哈偶地 暗殺號段電話刈待定ga7a7dgadd </div><div class="center">撒旦哈偶地 暗殺號段電話刈待定ga7a7dgadd 撒旦哈偶地 暗殺號段電話刈待定ga7a7dgadd </div><div class="right">撒旦哈偶地 暗殺號段電話刈待定ga7a7dgadd 撒旦哈偶地 暗殺號段電話刈待定ga7a7dgadd </div></div> </body> .father {overflow: hidden;margin: 0 auto;/* width: 900px; */}.left {width: 100px;background-color: blue;float: left;padding-bottom: 9999px;margin-bottom: -9999px;}.center {width: 150px;background-color: green;float: left;padding-bottom: 9999px;margin-bottom: -9999px;}.right {width: 100px;background-color: skyblue;float: left;padding-bottom: 9999px;margin-bottom: -9999px;}-真等高：
原理：利用內(nèi)容撐開父元素的特點，給每一列添加相對相應(yīng)的容器，并進行相互嵌套，并在每個容器中設(shè)置背景色。（這里需要提醒大家你有多少列就需要多少個容器，比如說我們說的三列，那么你就需要使用三個容器）。
優(yōu)點：兼容各種瀏覽器，方便擴展容易創(chuàng)建任意列數(shù)
缺點：結(jié)構(gòu)嵌套復(fù)雜，理解會有一定難度
- 有幾個盒子寫幾個盒子
- 把第二個父盒子bg2進行移動，移到最后一個盒子blue的寬度
- 移動最里面的父盒子bg3，移到倒數(shù)第二個子盒子green的大小
- 依次把原來倒數(shù)第一個盒子blue移到原來的移動剩下的兩個子元素到原位置
- 最大盒子overflow::hidden去掉超出部分
基于此原理也通過百分比建立流式布局（即外框自適應(yīng)，每列百分比）
?
圣杯布局
圣杯布局和雙飛翼布局都是為了實現(xiàn)左右欄固定寬度，中間部分自適應(yīng)的三欄布局，不過兩者實現(xiàn)的原理有所不同。以下是圣杯布局的實現(xiàn)思路。
1）將三者都float：left，再加上一個position:relative(因為相對定位后面會用到)；
2）middle部分width：100%；
3）此時middle占滿了，所以要把left拉到最左邊，使用margin-left：-100%
4）這時left拉回來了，但會覆蓋middle內(nèi)容的左端，要把middle內(nèi)容拉出來，所以在外圍container加上padding：0 220px 0 200px;
?5) middle內(nèi)容拉回來了，但left也跟著過來了，所以要還原，就對left使用相對定位left：-200px，同理，right也要相對定位還原right:-220px
6)到這里自適應(yīng)就好了，若要想container高度保持一致可以給left middle right 都加上min-height：130px；
<body><div class="container"><div class="middle">圣杯布局的中間自適應(yīng)部分</div><div class="left">圣杯布局左邊固定寬度部分</div><div class="right">圣杯布局右邊固定寬度部分</div></div> </body> .container {padding: 0 200px 0 200px;overflow: hidden;}.middle,.left,.right {float: left;position: relative;}.middle {width: 100%;background-color: blue;}.left {width: 200px;background-color: red;margin-left: -100%;left: -200px;}.right{width: 200px;background-color: green;margin-left: -200px;right: -200px;}?
雙飛翼布局
雙飛翼布局始于淘寶UED。如果把三欄布局比作一只鳥，可以把main看成是鳥的身體，left和right則是鳥的翅膀。這個布局的實現(xiàn)思路是：先把重要的身體部分放好，然后再將翅膀放到適當(dāng)?shù)奈恢谩?/p>
1）左翼left設(shè)置200px，右翼right設(shè)置220px,身體自適應(yīng)；
2）html代碼中，main要放在最前邊，然后是left? right
3）將main left right都float：left
4）將main占滿100%；
5）此時main占滿100%，所以要把left拉到最左邊，使用margin-left：-100%，同理right使用margin-left：-220px';
6)main內(nèi)容被覆蓋了，除了使用外圍的的padding，還可以考慮使用margin：
? ? ? ? ? ?給main加一個層div-- main-inner,然后margin：0 220px 0 200px
<body><div class="middle"><div class="inner">雙飛翼布局的中間自適應(yīng)部分</div></div><div class="left">雙飛翼布局左邊固定寬度部分</div><div class="right">雙飛翼布局右邊固定寬度部分</div> </body> .middle,.left,.right {float: left;min-height: 130px;}.middle {width: 100%;}.inner {margin: 0 220px 0 200px;background-color: orange;min-height: 130px;}.left {width: 200px;background-color: red;margin-left: -100%;}.right {width: 220px;background-color: green;margin-left: -220px;}?
?
?
?
?
總結(jié)
以上是生活随笔為你收集整理的等高布局、圣杯布局、双飞翼布局的实现原理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java基本小练习4（画星星）
- 下一篇： 一级计算机考试查询成绩ms,计算机一级考