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