手把手教你理解圣杯布局和双飞翼布局
生活随笔
收集整理的這篇文章主要介紹了
手把手教你理解圣杯布局和双飞翼布局
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
圣杯布局和雙飛翼布局都是三欄布局的典型布局。
1.為了保證頁面渲染快，在寫結構的時候，需要把中間盒子放在左右盒子的前面，中間一欄最先加載,渲染出來(主要內容)。
2.兩側內容寬度固定,中間自適應，盒子隨著內容而撐開。
圣杯布局代碼展示：
通過浮動+定位+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屬性 清除浮動 讓父盒子擁有高度 */overflow: hidden;} /* 三個盒子都要浮動 */.center,.left,.right{float: left;}.center{background-color: pink;/* 中間盒子寬度必須是百分之百 */width: 100%;height: 100px;}.left{background-color: skyblue;height: 100px;width: 300px;/* 重要理解 這里 margin-left是指當前左盒子的左邊框相對于父盒子的右邊框的距離*/margin-left: -100%;/* 重要理解 只有定位的屬性才有left right 并且這個移動的方向是相反的*/right: 300px;/* 這個是相對于自身原來的位置 */position: relative;}.right{background-color: greenyellow;height: 100px;width: 200px;/* 重要理解: 因為父盒子設置了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>主區域</h1></div><div class="left"><h1>左區域</h1></div><div class="right"><h1>右區域</h1></div></div><footer><h1>底部</h1></footer> </body> </html>?
雙飛翼布局代碼展示：
通過浮動+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;/* 將左盒子移動父級寬度的100% 與父級的左邊框重合 */margin-left: -100%;}.right{width: 150px;background-color: plum;/* 將右盒子移動自身寬度的負距離 以達到右盒子右邊界與父級右邊界重合的效果*/margin-left:-150px;}.center{width: 100%;background-color: red;}.container{/* 給父級盒子清除浮動 讓父盒子擁有高度*/overflow: hidden;}.content{/* margin:上右下左 設置左右距離 以騰出中間內容盒子的位置*/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>圣杯布局與雙飛翼布局的優缺點：
圣杯布局優點：不需要添加再多添加一個dom節點（嵌套盒子） 缺點：正常情況下是沒有問題的，但是特殊情況下，當中間部分寬度小于左盒子的時候 就會發生布局混亂。
雙飛翼布局：優點：不會像圣杯布局那樣變形，CSS樣式代碼更簡潔 缺點：多加了一層dom節點。
總結
以上是生活随笔為你收集整理的手把手教你理解圣杯布局和双飞翼布局的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 人车交互论文阅读（一）Semi-Coop
- 下一篇： Pytorch详细教程——10.Flat