基本布局，圣杯布局，双飞翼布局
?
1.圣杯布局
? ?圣杯布局就是兩邊固定寬度，中間自適應(yīng)的三欄布局，其中，中間欄放到文檔流前面，保證可以優(yōu)先渲染。
2.雙飛翼布局
? ?雙飛翼布局和圣杯布局基本是一致的，都是兩邊固定，中間自適應(yīng)的三欄布局，主要區(qū)別就在于雙飛翼布局在 中間欄的DIV 中嵌套類一個(gè)div ，內(nèi)容寫在里面的div里面，然后對嵌套的div設(shè)置 margin-left，margin-right 。 效果就像左右兩欄在中間欄的上面，中間欄還是100%的寬度，就是中間欄的內(nèi)容通過margin的值顯示在中間而已。
相同點(diǎn)：
????????兩種布局都將將盒子設(shè)置為右浮動(dòng)，同時(shí)在HTML中盒子加載的順序都是中左右，給定中間容器100%的寬度讓其可以隨著頁面寬度的變化而變化。然后再用左邊距將左右容器覆蓋在中間容器上。
不同點(diǎn)：
????????當(dāng)將三個(gè)容器拉到同一行時(shí)，圣杯布局是調(diào)整左右容器的位置，用相對定位的方式將左右容器移出中間容器，同時(shí)再給最外層容器一個(gè)內(nèi)邊距，防止覆蓋中間容器。雙飛翼布局是給中間容器再套一層內(nèi)層容器，將內(nèi)容在內(nèi)層容器中顯示，而不是在中間容器中。再給內(nèi)層一個(gè)內(nèi)邊距，使內(nèi)容不會(huì)被左右容器遮擋。
代碼片段。
<title>雙飛翼布局</title><style>*{margin: 0;padding: 0;}/* 先設(shè)置三欄的寬高 以及浮動(dòng) 背景顏色 */.left,.right{width: 200px;height: 200px; background-color: red;float: left;}.center{height: 200px;background-color: pink;float: left;width: 100%;}/* 然后給 中間欄容器里面的 div設(shè)置 外邊距撐開空間 */.inner{margin: 0 200px;height: 200px;}/* 直接給left 左外邊覆蓋到中間欄的最左側(cè) */.left{margin-left: -100%;}/* 直接給left 左邊距 覆蓋到最右側(cè) */.right{margin-left: -200px;}</style> </head> <body><div class="box"><div class="center"><div class="inner">center </div></div><div class="left">left</div><div class="right">right</div></div> </body>代碼片段（圣杯）
<title>圣杯布局</title><style>* {padding: 0;margin: 0;}/* 先給給外層容器設(shè)置內(nèi)邊距 給左右兩個(gè)欄預(yù)留位置 */.box {padding: 0 200px;height: 2000px;}/* 然后在渲染 左中右三欄的容器 *//* 給中間一欄設(shè)置寬度為100%，讓他撐滿整個(gè)容器 給三個(gè)欄都設(shè)一個(gè)高度方便看效果*/.center {width: 100%;background-color: pink;height: 200px;}.left,.right {height: 200px;width: 200px;background-color: red;}/* 給盒子里所有的div一個(gè)浮動(dòng) */.box div {float: left;}/* 現(xiàn)在需要把兩個(gè)左右欄，放到上面兩個(gè)空欄位置 *//* 先移動(dòng)左邊欄，給他一個(gè)相對定位， */.left {/* 先給一個(gè)相對 左邊負(fù)他自身的寬度，讓他唯一到最左邊給他預(yù)留的位置。 */position: relative;left: -200px;/* 然后通過左外邊距的 -100% 唯一到中間欄的左邊 */margin-left: -100%;}.right {/* 右邊是相反的 *//* 先是相對定位向右移動(dòng) 200px */position: relative;left: 200px;/* 然后給左邊一個(gè)左的外邊距 -200px 為他自身的寬度*/margin-left: -200px;}</style></head><body><div class="box"><div class="center">center</div><div class="left">left</div><div class="right">right</div></div></body>總結(jié)
以上是生活随笔為你收集整理的基本布局，圣杯布局，双飞翼布局的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： VR电力安全警示教育：身临其境体验事故伤
- 下一篇： MDT 2013 从入门到精通之DHCP