當(dāng)前位置：
首頁 >
手把手教你理解圣杯布局和双飞翼布局
發(fā)布時(shí)間：2024/1/18
44
豆豆
生活随笔
收集整理的這篇文章主要介紹了
手把手教你理解圣杯布局和双飞翼布局
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
圣杯布局和雙飛翼布局都是三欄布局的典型布局。
1.為了保證頁面渲染快，在寫結(jié)構(gòu)的時(shí)候，需要把中間盒子放在左右盒子的前面，中間一欄最先加載,渲染出來(主要內(nèi)容)。
2.兩側(cè)內(nèi)容寬度固定,中間自適應(yīng)，盒子隨著內(nèi)容而撐開。
圣杯布局代碼展示：
通過浮動(dòng)+定位+margin
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}.content{/* 給左盒子留位置 */padding-left: 300px;/* 給右盒子留位置 */padding-right: 200px;/* 父級添加overfloat屬性 清除浮動(dòng) 讓父盒子擁有高度 */overflow: hidden;} /* 三個(gè)盒子都要浮動(dòng) */.center,.left,.right{float: left;}.center{background-color: pink;/* 中間盒子寬度必須是百分之百 */width: 100%;height: 100px;}.left{background-color: skyblue;height: 100px;width: 300px;/* 重要理解 這里 margin-left是指當(dāng)前左盒子的左邊框相對于父盒子的右邊框的距離*/margin-left: -100%;/* 重要理解 只有定位的屬性才有l(wèi)eft right 并且這個(gè)移動(dòng)的方向是相反的*/right: 300px;/* 這個(gè)是相對于自身原來的位置 */position: relative;}.right{background-color: greenyellow;height: 100px;width: 200px;/* 重要理解: 因?yàn)楦负凶釉O(shè)置了padding 因此可以直接不算左邊的空白處*/margin-right: -200px;}footer{clear: both;}header,footer{background-color: oldlace;height: 100px;}</style> </head> <body><header><h1>頭部</h1></header><div class="content"><div class="center"><h1>主區(qū)域</h1></div><div class="left"><h1>左區(qū)域</h1></div><div class="right"><h1>右區(qū)域</h1></div></div><footer><h1>底部</h1></footer> </body> </html>?
雙飛翼布局代碼展示：
通過浮動(dòng)+margin
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;font-size: 20px;}.header{width: 100%;height: 100px;background-color:pink;}.footer{width: 100%;height: 100px;background-color:gray;}.left,.right,.center{float: left;height: 380px;}.left{width: 200px;background-color: aqua;/* 將左盒子移動(dòng)父級寬度的100% 與父級的左邊框重合 */margin-left: -100%;}.right{width: 150px;background-color: plum;/* 將右盒子移動(dòng)自身寬度的負(fù)距離 以達(dá)到右盒子右邊界與父級右邊界重合的效果*/margin-left:-150px;}.center{width: 100%;background-color: red;}.container{/* 給父級盒子清除浮動(dòng) 讓父盒子擁有高度*/overflow: hidden;}.content{/* margin:上右下左 設(shè)置左右距離 以騰出中間內(nèi)容盒子的位置*/margin: 0 150px 0 200px;}</style> </head> <body><div class="header">header</div><!-- 主體部分 --><div class="container"><!-- 中間 --><div class="center"><!-- 嵌套盒子 與圣杯布局的不同之處--><div class="content">center</div></div><!-- 左 --><div class="left">left</div><!-- 右 --><div class="right">right</div></div><div class="footer">footer</div> </body> </html>圣杯布局與雙飛翼布局的優(yōu)缺點(diǎn)：
圣杯布局優(yōu)點(diǎn)：不需要添加再多添加一個(gè)dom節(jié)點(diǎn)（嵌套盒子） 缺點(diǎn)：正常情況下是沒有問題的，但是特殊情況下，當(dāng)中間部分寬度小于左盒子的時(shí)候 就會(huì)發(fā)生布局混亂。
雙飛翼布局：優(yōu)點(diǎn)：不會(huì)像圣杯布局那樣變形，CSS樣式代碼更簡潔 缺點(diǎn)：多加了一層dom節(jié)點(diǎn)。
總結(jié)
以上是生活随笔為你收集整理的手把手教你理解圣杯布局和双飞翼布局的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 人车交互论文阅读（一）Semi-Coop
- 下一篇： Pytorch详细教程——10.Flat