国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

【前端工程師手冊】布局

maxmin / 900人閱讀

摘要：今天總結一下布局，之前校招面試的時候貌似很喜歡考布局，例如兩欄自適應布局三欄自適應布局等等，實現(xiàn)的方法多種多樣，總結一下以后就不亂了。脫離文檔流觸發(fā)使用脫離文檔流之后，我們再利用區(qū)域不會與浮動元素重疊的特性來使剩下的元素自適應。

今天總結一下布局，之前校招面試的時候貌似很喜歡考布局，例如兩欄自適應布局、三欄自適應布局等等，實現(xiàn)的方法多種多樣，總結一下以后就不亂了。

兩欄布局

這里我們講的兩欄布局一般是左定寬右自適應的

左float+右margin-left

   html, body {
       height: 80%;
   }
   .wrapper {
       height: 100%;

   }
   .common {
       height: 100%;
   }
   .aside {
       width: 200px;
       background: green;
       float: left;
   }
   .main {
       background: red;
       margin-left: 200px;
   }
   

       

           
側欄

       

       

           
主欄

雙float+右calc

   html, body {
       height: 80%;
   }
   .wrapper {
       height: 100%;

   }
   .common {
       height: 100%;
       float: left;
   }
   .aside {
       width: 200px;
       background: green;
   }
   .main {
       background: red;
       width: calc(100% - 200px);
   }
   

       

           
側欄

       

       

           
主欄

左absolute+右margin-left

   html, body {
       height: 80%;
   }
   .wrapper {
       height: 100%;
       position: relative;
   }
   .common {
       height: 100%;
   }
   .aside {
       position: absolute;
       left: 0px;
       width: 200px;
       background: green;
   }
   .main {
       background: red;
       margin-left: 200px;
   }
      

          

           
側欄

       

       

           
主欄

雙absolute

   .wrapper {
       height: 100%;
       position: relative;
   }
   .common {
       height: 100%;
   }
   .aside {
       background: green;
       position: absolute;
       left: 0px;
       width: 200px;
   }
   .main {
       background: red;
       position: absolute;
       left: 200px;
       right: 0px;
   }
      

       

           
側欄

       

       

           
主欄

flex

   html, body {
       height: 80%;
   }
   .wrapper {
       height: 100%;
       display: flex;
   }
   .common {
       height: 100%;
   }
   .aside {
       flex: 0 1 200px;
       background: green;
   }
   .main {
       flex-grow: 1;
       background: red;
   }
   

       

           
側欄

       

       

           
主欄

三欄布局

這里說的三欄布局是左右定寬，中間自適應

float left + margin-left/margin-right + float right

   html, body {
       height: 100%;
   }
   .wrapper {
       height: 100%;
   }
   .left {
       height: 100%;
       width: 200px;
       float: left;
       background: green;
   }
   .right {
       height: 100%;
       width: 200px;
       float: right;
       background: blue;
   }
   .main {
       height: 100%;
       margin: 0px 200px;
       background: red;
   }

BFC特性的三欄布局（后面總結BFC）

   .left {
       float: left;
       height: 200px;
       width: 100px;
       background-color: red;
   }
   .right {
       width: 200px;
       height: 200px;
       float: right;
       background-color: blue;
   }    
   .main {
       height: 200px;
       overflow: hidden;
       background-color: green;
   }
   

       

           
Left

       

       

           
Right

       

       

           
Content

圣杯布局

   html, body {
       height: 100%;
   }
   .wrapper {
       height: 80%;
       padding: 0px 200px;
   }
   .common {
       position: relative;
       float: left;
       height: 100%;
       color: white;
   }
   .content {
       background: red;
       width: 100%;
   }
   .left {
       background: blue;
       width: 200px;
       margin-left: -100%;
       left: -200px;
   }
   .right {
       background: green;
       width: 200px;
       margin-left: -200px;
       right: -200px;
   }
   

       

           
Content

       

       

           
Left

       

       

           
Right

中間內(nèi)容區(qū)content在最前面，后面依次是left和right。
首先Content、Left、Right都設為float:left，然后Content寬度設為100%，此時Left和Right被擠到了下面一行；
將Left的margin-left設為-100%，Left被拉到了Content的最左邊，且遮擋了Content的左邊部分；將Right的負外左邊距設為它的寬度，Right被拉到了Content的最右邊，且遮住了Content的右邊部分
此時再設置wapper的左右padding分別為Left和Right的寬度，此時Content的寬度被壓縮到了合適的位置，但是Left和Right仍沒有到正確的位置
最后通過相對定位，設置Left和Right都為relative，且Left的left設為其負寬度，Right的right設為其負寬度

雙飛翼布局

   html, body {
       height: 100%;
   }
   .common {
       height: 100%;
       float: left;
       color: #fff;
   }
   .content {
       background: red;
       width: 100%;
   }
   .content-in {
       margin: 0px 200px;
   }
   .left {
       background: blue;
       width: 200px;
       margin-left: -100%;
   }
   .right {
       background: green;
       width: 200px;
       margin-left: -200px;
   }
   

       

           
Content

       

   

   

       
Left

   

   

       
Right

首先Content、Left、Right都設置float:left；
將Left的margin-left設為-100%，Left被拉到了Content的最左邊，且遮擋了Content的左邊部分；將Right的負外左邊距設為它的寬度，Right被拉到了Content的最右邊，且遮住了Content的右邊部分
Content-in設置左右margin分別為Left寬度和Right寬度即可

絕對定位

   .wrapper {
       height: 80%;
       position: relative;
   }
   .common {
       height: 100%;
       color: white;
   }
   .left {
       position: absolute;
       top: 0px;
       left: 0px;
       width: 200px;
       background: green;
       
   }
   .right {
       position: absolute;
       top: 0px;
       right: 0px;
       width: 200px;
       background: blue;
   }
   .content {
       background: red;
       margin: 0 200px;
   }
   

        

           
Content

       

       

           
Left

       

       

           
Right

flex

   html, body {
       height: 100%;
   }
   .wrapper {
       height: 80%;
       display: flex;
   }
   .common {
       height: 100%;
       color: white;
   }
   .content {
       flex-grow: 1;
       background: red;
   }
   .left {
       flex: 0 1 200px;
       order: -1;
       background: blue;
   }
   .right {
       flex: 0 1 200px;
       background: green;
   }
   

       

           
Content

       

       

           
Left

       

       

           
Right

總結

總結發(fā)現(xiàn)實現(xiàn)兩欄或者三欄布局的方法大概有這么幾種

脫離文檔流+margin
在上面的實現(xiàn)方式中使用float和position:absolute來脫離文檔流，然后再讓剩下的元素調(diào)整外邊距margin來做成自適應。

脫離文檔流+觸發(fā)BFC
使用float脫離文檔流之后，我們再利用BFC區(qū)域不會與浮動元素重疊的特性來使剩下的元素自適應。

純絕對定位
所有的欄都設置position:absolute，然后定寬元素設置寬度、left和Right位置，自適應元素只設置left和right位置

flex
使用flex的flex-grow和flex-shrink可以來實現(xiàn)自適應布局

其他
類似雙飛翼和圣杯布局其實也是部分利用了浮動和定位的知識，以及負margin相關的操作，總體的知識并不變化

參考資料
http://zh.learnlayout.com/dis...
http://www.cnblogs.com/imwtr/...
https://zhuanlan.zhihu.com/p/...

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115883.html

相關文章

  • 【前端工程師手冊】關于flexbox的why、what和how

    摘要：如何使用首先梳理一下，將屬性分為兩類作用在容器元素上的有個，其實容器元素上還有一個設置的屬性作用在子元素上的有個當時設置布局之后，子元素的的屬性將會失效。 why——為什么使用flex 長久以來，網(wǎng)頁布局是一個比較難搞的地方，各種前端前輩嘔心瀝血總結了各種奇淫巧技，比如利用float和position來實現(xiàn)居中、兩欄、三欄等等布局。然而css并不存在一個官方的布局方案，終于一種新的布局...

    meteor199 評論0 收藏0

  • 前端資源系列（4）-前端學習資源分享&前端面試資源匯總

    摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 本以為自己收藏的站點多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業(yè)務工作時也會不定期更...

    princekin 評論0 收藏0

  • 【前端工程師手冊】前端應該知道的各種寬高

    摘要：和都是相對于內(nèi)邊距邊界的。和即為向上滾動時，元素內(nèi)容區(qū)被遮住的那一部分。同理參考中的各種寬高屬性 引子 曾經(jīng)校招面試的時候，學習了三個月前端的我去某廠面試，面試官循循善誘考察了一個開發(fā)中的實際場景，其中有需要用到某元素的高度，面試官問我clientHeight和offsetHeight的區(qū)別是什么，我當時一臉懵逼，這個問題對于當時的我來說已經(jīng)完全超綱了...面試結果自然是面試官感謝我來...

    jayce 評論0 收藏0

  • 【前端工程師手冊】前端應該知道的各種寬高

    摘要：和都是相對于內(nèi)邊距邊界的。和即為向上滾動時，元素內(nèi)容區(qū)被遮住的那一部分。同理參考中的各種寬高屬性 引子 曾經(jīng)校招面試的時候，學習了三個月前端的我去某廠面試，面試官循循善誘考察了一個開發(fā)中的實際場景，其中有需要用到某元素的高度，面試官問我clientHeight和offsetHeight的區(qū)別是什么，我當時一臉懵逼，這個問題對于當時的我來說已經(jīng)完全超綱了...面試結果自然是面試官感謝我來...

    Hujiawei 評論0 收藏0

  • 【前端工程師手冊】學習回流和重繪（reflow和repaint）

    摘要：重繪元素做了一些不影響排版的改變，比如背景色下劃線等等，只需要重新繪制的過程，叫做重繪。顯然回流帶來的代價大于重繪，因為重繪僅僅是重新畫一遍元素而已，但是重繪是重新計算重新畫。不然這會導致大量地讀寫這個結點的屬性。 瀏覽器的大概工作流程 以普通的HTML頁面為例： 解析HTML文檔，生成dom樹 解析css產(chǎn)生css規(guī)則樹 解析JavaScript，通過DOM-API來操作dom樹和...

    liuyix 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<