頁面佈局

　　一、三列布局,中間自適應

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

*{

margin:0;

padding:0;

}

.container{

min-width: 650px;

width: 80%;

height: 1200px;

margin:0 auto; //此處設置讓包裹器自適應劇中

background-color: aqua;

position: relative;//此處設置讓該容器做爲觸發bfc元素的父級,使子類始終在該包裹器內

}

.left{

top:0;

position: absolute;//觸發bfc,脫離文檔流,經過left或者right定位

width:200px;

height:100%;

left:0;

background-color: red;

}

.right{

top:0;

right:0;

position: absolute;

width:200px;

height:100%;

float: right;

background-color: black;

}

.center{

min-width: 200px;

margin:0 210px;

background-color: yellow;

height:500px;

}

 　　不足:若是頂部還有自適應高度的東西,如導航,則top的值難以肯定.

　　好處:三個div的位置能夠隨意替換.  這樣能夠實現優先展現中間區域的內容:先寫中間區域的內容

 

　　二、使用浮動

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

*{
    margin:0;
    padding:0;
}
.container{
    min-width: 650px;
    width: 80%;
    height: 1200px;
    margin:0 auto;    //此處設置讓包裹器自適應劇中      
    background-color: aqua;
}
.left{
    float:left;
    width:200px;
    height:100%;
    left:0;
    background-color: red;
}
.right{
    float:right;
    width:200px;
    height:100%;
    float: right;
    background-color: black;
}
.center{
    min-width: 200px;
    margin:0 210px;
    background-color: yellow;
    height:500px;
}

　　不足:center必須寫在最後

 

　　三、聖盃模式

聖盃佈局的原理是margin負值法。使用聖盃佈局首先須要在center元素外部包含一個div，包含div須要設置float屬性使其造成一個BFC，並設置寬度，而且這個寬度要和left塊的margin負值進行配合

 

<div class="container">  
        <div class="wrapper">
            <div class="center"></div>
        </div>
        <div class="left"></div>  
        <div class="right"></div>
    </div>

 

*{
    margin:0;
    padding:0;
}
.container{
    min-width: 650px;
    width: 80%;
    height: 1200px;
    margin:0 auto;    //此處設置讓包裹器自適應劇中      
    background-color: aqua;
}
.wrapper{
    width: 100%;
    height:100%;
    float:left;
}
.center{
    margin:0 210px;
    background-color: black;
    height: 100%;
}
.left{
    float:left;
    background-color: yellow;
    width:200px;
    height:100%;
    margin-left: -100%;
}
.right{
    float:left;
    background-color: yellow;
    width:200px;
    height:100%;
    margin-left: -200px;
}

 

　　center必須先寫,而後left和right利用margin的負值實現佈局;

　　要點:對於left快的margin負值必定要等於wrap的寬度。

 

　　四、css3新特性

在外圍包裹一層div，設置爲display：flex；中間設置flex：1；可是盒模型默認牢牢挨着，可使用margin控制外邊距。

<div id = "box">
         <div id = "left_box"></div>
         <div id = "center_box"></div>
         <div id = "right_box"></div>
</div>

 

#box{width:100%;display: flex; height: 100px;margin: 10px;}
#left_box,#right_box{width: 200px;height: 100px; margin: 10px; background-color: lightpink}
#center_box{ flex:1; height: 100px;margin: 10px; background-color: lightgreen}

 

注意： center必定要放到中間。