應屆生都會的多種佈局方法

時間 2019-11-22

標籤應屆都會多種佈局方法简体版

原文原文鏈接

流體佈局

.left{            
    float: left;            
    width: 100px;            
    height: 100px;            
    background: red;        
}        
.right{            
    float: right;            
    width: 100px;            
    height: 100px;            
    background: blue;        
}        
.center{            
    margin-left: 100px;            
    margin-right: 100px;            
    height: 100px;            
    background: orange;        
}

<div class="container">        
    <div class="left"></div>        
    <div class="right"></div>        
    <div class="center"></div>    
</div>
複製代碼

原理: 左右模塊各自向左右浮動，並設置中間模塊的margin值使中間模塊寬度自適應瀏覽器

缺點: 主要內容沒法最早加載，當頁面內容較多時會影響用戶體驗
bash

BFC 三欄佈局

.left{            
    float: left;            
    width: 100px;            
    height: 100px;            
    background: red;        
    }        
.right{            
    float: right;            
    width: 100px;            
    height: 100px;            
    background: blue;        
}        
.center{            
    overflow: hidden;            
    height: 100px;            
    background: orange;        
}

<div class="container">        
    <div class="left"></div>        
    <div class="right"></div>        
    <div class="center"></div>    
</div>複製代碼

原理: BFC規則有這樣的描述：BFC 區域不會與浮動元素重疊, 所以咱們能夠利用這一點來實現 3 列布局
佈局

缺點: 主要內容模塊沒法最早加載，當頁面中內容較多時會影響用戶體驗。所以爲了解決這個問題，有了下面要介紹的佈局方案雙飛翼佈局學習

雙飛翼佈局

.container{            
    float: left;            
    width: 100%;        
}        
.center{            
    margin-left: 100px;            
    margin-right: 100px;            
    height: 100px;            
    background: orange;        
}        
.left{            
    float: left;            
    margin-left: -100%;            
    width: 100px;            
    height: 100px;            
    background: red;        
}        
.right{            
    float: left;            
    margin-left: -100px;            
    width: 100px;            
    height: 100px;            
    background: blue;        
}

<div class="container">        
    <div class="center"></div>    
</div>
<div class="left"></div> 
<div class="right"></div>複製代碼

原理: 利用的是浮動元素margin負值的應用 flex

優勢: 主體內容能夠優先加載ui

缺點: HTML代碼結構稍微複雜點。
spa

聖盃佈局

.container{            
    margin-left: 100px;            
    margin-right: 100px;        
}        
.center{            
    float: left;            
    width: 100%;            
    height: 100px;            
    background: orange;        
}        
.left{            
    float: left;            
    margin-left: -100%;            
    position: relative;            
    left: -100px;            
    width: 100px;            
    height: 100px;            
    background: red;        
}        
.right{            
    float: left;            
    margin-left: -100px;            
    position: relative;            
    right: -100px;            
    width: 100px;            
    height: 100px;            
    background: blue;        
}

<div class="container">        
    <div class="center"></div>        
    <div class="left"></div>        
    <div class="right"></div>    
</div>
複製代碼

和與雙飛翼佈局的區別: 與雙飛翼佈局很像，有一些細節上的區別，相對於雙飛翼佈局來講，HTML 結構相對簡單，可是樣式定義就稍微複雜，也是優先加載內容主體。
code

Flex佈局

.container{            
    display: flex;        
}        
.center{            
    flex-grow: 1;            
    height: 100px;            
    background: orange;        
    }        
.left{            
    order: -1; /* order屬性定義項目的排列順序 數值越小 排列越靠前 默認爲0 */            
    flex: 0 1 100px; /* flex-grow flex-shrink flex-basis */            
    height: 100px;            
    background: red;        
}        
.right{            
    flex: 0 1 100px;            
    height: 100px;            
    background: blue;        
}        
/*            
    flex-grow屬性定義項目的放大比例 默認爲0 即若是存在剩餘空間 也不放大            
    flex-shrink屬性定義了項目的縮小比例 默認爲1 即若是空間不足 該項目將縮小            
    flex-basis屬性定義了在分配多餘空間以前 項目佔據的主軸空間（main size） 
        瀏覽器根據這個屬性 計算主軸是否有多餘空間 它的默認值爲auto 即項目的原本大小        
*/

<div class="container">        
    <div class="center"></div>        
    <div class="left"></div>        
    <div class="right"></div>    
</div>複製代碼

優勢: 簡單實用，將來的趨勢，string

缺點: 須要考慮瀏覽器的兼容性。
it

Table佈局

.container{            
    display: table; /* 此元素會做爲塊級表格來顯示（相似 <table>）表格先後帶有換行符 */  
    width: 100%;        
}        
.left,        
.center,        
.right{            
    display: table-cell; /* 此元素會做爲一個表格單元格顯示（相似 <td> 和 <th>） */        
}        
.left{            
    width: 100px;            
    height: 100px;            
    background: red;        
}        
.center{            
    background: orange;        
}        
.right{            
    width: 100px;            
    height: 100px;            
    background: blue;        
}

<div class="container">        
    <div class="left"></div>        
    <div class="center"></div>        
    <div class="right"></div>    
</div>複製代碼

缺點：沒法設置欄間距

絕對定位佈局

.container{            
    position: relative;        
}        
.center{            
    margin-left: 100px;            
    margin-right: 100px;            
    height: 100px;            
    background: orange;        
}        
.left{            
    position: absolute;            
    left: 0;            
    top: 0;            
    width: 100px;            
    height: 100px;            
    background: red;        
}        
.right{            
    position: absolute;            
    right: 0;            
    top: 0;            
    width: 100px;            
    height: 100px;            
    background: blue;        
}

<div class="container">        
    <div class="center"></div>        
    <div class="left"></div>        
    <div class="right"></div>    
</div>複製代碼

優勢: 簡單實用，而且主要內容能夠優先加載。

網格佈局(Grid佈局)

.container{            
    display: grid;            
    grid-template-columns: 100px auto 100px;            
    /*                
        用於設置網格容器的列屬性 其實就至關於列的寬度 當咱們須要幾列展現時                    
        就設置幾個值 這個屬性能夠接收具體數值好比100px 也能夠接收百分比值                    
        表示佔據容器的寬度               
        須要注意的是: 當給容器設定了寬度時 
        grid-template-columns設定的百分比值是以容器的寬度值爲基礎計算的                    
        若是未設置寬度時 會一直向上追溯到設置了寬度的父容器 直到body元素。            
    */            
    grid-template-rows: 100px;            
    /*             
        用於設置網格容器的行屬性 其實就至關於行的高度                 
        其特性與grid-template-columns屬性相似             
    */        
    }        
.left{            
    background: red;        
}        
.center{            
    background :orange;        
}        
.right{            
    background: blue;        
}

<div class="container">        
    <div class="left"></div>        
    <div class="center"></div>        
    <div class="right"></div>    
</div>複製代碼

優勢: Grid佈局是一種新的佈局方式，經過建立網格的方式實現佈局，

缺點: 須要適配其餘瀏覽器。

你的點贊是我持續輸出的動力但願能幫助到你們互相學習有任何問題下面留言必定回覆