您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“JavaScript圣杯布局與雙飛翼布局如何實(shí)現(xiàn)”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“JavaScript圣杯布局與雙飛翼布局如何實(shí)現(xiàn)”吧!
圣杯布局和雙飛翼布局是三欄布局中的兩種布局方式,他們實(shí)現(xiàn)的效果是相同的,區(qū)別就是實(shí)現(xiàn)方法。
header和footer各自占領(lǐng)屏幕所有寬度,高度固定;
中間的outer是一個三欄布局;
三欄布局中l(wèi)eft和right不變,center填充其他地方;
中間部分的高度是三欄中最高的區(qū)域的高度。
其實(shí)這個并不是圣杯布局中的要求,圣杯布局是可以指定高度的,但是可以作為一個思考;
方法就是使用flex布局,將主軸設(shè)置為縱軸,再將outer的flex設(shè)為1,意思就是填充多余空白,即可達(dá)到自適應(yīng)屏幕高度的效果。
body{ display: flex; width: 100%; height: 100%; flex-direction: column; } .header{ background-color:grey; height: 50px; } .footer{ background-color:grey; height: 50px; } .outer{ flex:1; }
將center盒子寫在最前面,保證center盒子最先渲染;
給outer盒子指定padding-left 和 padding-right值,留出left和right的位置;
三個盒子都設(shè)置float:left,這時left和right就會被擠到下一行;
left設(shè)置margin-left:-100%;相對定位+left:-left的寬度;right設(shè)置margin-left=-right的寬度;相對定位+right:-right的寬度即可將兩個盒子歸位。
<style> * { padding: 0; margin: 0; text-align: center; } html{ height: 100%; } body{ display: flex; flex-direction: column; height: 100%;; } .header{ width: 100%; height: 50px; background-color:dimgray; } .footer{ width: 100%; height: 50px; background-color:dimgray; } .outer{ flex:1; padding-left: 100px; padding-right: 200px; } .center{ float: left; background-color: darkslateblue; height: 100%; width: 100%; } .left{ float: left; width: 100px; margin-left: -100%; background-color: burlywood; height: 100%; position: relative; left: -100px; } .right{ float: left; width: 200px; margin-left: -200px; height: 100%; position: relative; right: -200px; background-color: cyan; } </style> <body> <div class="header">header</div> <div class="outer"> <div class="center">center</div> <div class="left">left</div> <div class="right">right</div> </div> <div class="footer">footer</div> </body>
給三個盒子都設(shè)置為左浮動;
center的寬度設(shè)為100%;
left設(shè)置margin-left:-100%;right設(shè)置margin-left=-right的寬度即可將兩個盒子歸位,但是將center的兩端擋住了;
在center盒子中再寫一個content盒子,設(shè)置margin-left和margin-right為兩側(cè)的寬度,content盒子作為內(nèi)容。
<style> *{ padding: 0; margin: 0; } html{ width: 100%; height: 100%; text-align: center; } body{ display: flex; width: 100%; height: 100%; flex-direction: column; } .header{ background-color:grey; height: 50px; } .footer{ background-color:grey; height: 50px; } .outer{ flex:1; } .center{ float: left; width: 100%; background-color: darkslateblue; height: 100%; } .left{ float: left; margin-left: -100%; width: 100px; background-color: burlywood; height: 100%; } .right{ float: left; width: 200px; background-color: cyan; margin-left: -200px; height: 100%; } .content{ margin-left: 100px; margin-right: 200px; height: 100%; } </style> <body> <div class="header">header</div> <div class="outer"> <div class="center"> <div class="content">content</div> </div> <div class="left">left</div> <div class="right">right</div> </div> <div class="footer">footer</div> </body>
圣杯布局是利用padding將中間部分留出,再利用定位、margin的方式將左右盒子歸位,因此不需要外層div;
雙飛翼布局是先設(shè)置中間盒子的寬度為100%,再用margin移動左右盒子覆蓋了中間盒子的兩側(cè),再將outer中間加入一個盒子,留出兩側(cè)的margin值,達(dá)到三欄布局的效果。
回答:圣杯布局和雙飛翼布局都可以實(shí)現(xiàn)三欄布局,即兩側(cè)寬度固定,中間自適應(yīng)的效果。圣杯布局是先用padding將中間內(nèi)容留出,再定位左右盒子到相應(yīng)位置;而雙飛翼布局首先將中間盒子的寬度設(shè)為了100%,在定位左右盒子的時候會覆蓋中間盒子的兩端,這樣就需要在中間盒子中在定義一個盒子,并留出margin的兩側(cè)值。兩種布局都需要把center盒子寫在left和right前面,為了最先渲染。
到此,相信大家對“JavaScript圣杯布局與雙飛翼布局如何實(shí)現(xiàn)”有了更深的了解,不妨來實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。