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