頁面布局需求：

1. 三列布局，左右兩端固定，中間部分自適應。
2. 中間欄DOM元素排在首位，在瀏覽器優(yōu)先渲染。

布局要求.png

圣杯布局

1. 中間元素占滿寬度100%
2. 三元素分別float:left，左右元素分別負的maigin-left，使得三元素中左右一行排列展示
3. 三元素進行相對定位：position:relative，左元素：left,右元素：right，顯示中間元素的內(nèi)容區(qū)
4. 最外層容器去掉多余的padding：padding:0 right(width) 0 left(width)

<div class="container">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.main,
.left,
.right {
    min-height: 300px;
    float: left;  //三元素一行排列
    position: relative; //相對定位
}
.container {
    padding: 0 300px 0 200px;
}
.main {
    width: 100%;
    background-color: bisque;
}
.left {
    width: 200px;
    background-color: aqua;
    margin-left: -100%;
    left: -200px;  //相對定位：解決中間元素內(nèi)容被遮擋問題
}
.right {
    width: 300px;
    background-color: darkorange;
    margin-left: -300px;
    right: -300px;
}

雙飛翼布局

雙飛翼布局區(qū)別于圣杯布局：

1. 內(nèi)部塊多了一個元素
2. 在解決內(nèi)部元素文本被遮擋問題：沒有采用相對定位，而是采用margin：0 right(width) 0 left(width)去解決，更簡潔易懂。

<div class="container">
    <div class="main">
        <div class="content">content</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.main,
.left,
.right {
    min-height: 300px;
    float: left;
} 
.main {
    width: 100%;
    background-color: bisque;
    padding: 0 300px 0 200px;  // 第一種：外層元素增加內(nèi)padding顯出內(nèi)部文本
}
.content {  
    margin: 0 300px 0 200px;  //第二種：內(nèi)部元素增加外margin以此來顯示文本
} 
.left {
    width: 200px;
    background-color: aqua;
    margin-left: -100%;
}
.right {
    width: 300px;
    background-color: darkorange;
    margin-left: -300px;
}

flex彈性布局

<div class="container">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

.container {
    display: flex;
    flex-direction: row;
}
.main,
.left,
.right {
    min-height: 300px;
}
.main {
    background-color: bisque;
    /* 第一種：flex-grow 放大中間元素的比例，使其占滿剩余全部空間，默認為0，對剩余空間不做處理  */
    flex-grow: 1;  
    flex: 1;  //第二種方法：flex:1;  使元素獨占剩余的全部
}
.left {
    width: 200px;
    background-color: aqua;
    /* order 屬性定義元素的排列順序，越小越靠前，默認值為0 */
    order: -1;
}
.right {
    width: 300px;
    background-color: darkorange;
}

絕對定位布局

1. 絕對定位：會使得元素脫離文檔流，不占據(jù)空間，所以絕對定位的元素會覆蓋頁面上的其他元素，可以通過z-index去控制文檔的堆疊層次。

<div class="container">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.main,
.left,
.right {
    min-height: 300px;
    top: 0;  // 還需要設置 `top:0` ！
}
.container {
    position: relative;  // 絕對定位必須設置父級別元素`position:relative`參照物
}
.main {
    margin: 0 300px 0 200px;
    background-color: bisque;
}
.left {
    width: 200px;
    background-color: aqua;
    //左右元素分別進行l(wèi)eft:0,right:0的決定定位，脫離文檔流，占據(jù)以一排元素的左右兩端。
    position: absolute;  
    left: 0;
}
.right {
    width: 300px;
    background-color: darkorange;
    position: absolute;
    right: 0;
}