CSS佈局之傳統方法

傳統的頁面佈局依賴於盒模型+流動模型（flow）+浮動模型（float）+層模型（layer）來實現頁面的佈局，具體方法是經過盒模型+display屬性+float屬性+position屬性來加以實現。

1、一欄固定，一欄自適應

1.1 左側固定

方法一：float + margin-left

html

    <div class="outside">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>

css

.left {
    float: left;
    width: 100px;
    background: red;
    height: 100px;
}

.right {
    height: 100px;
    margin-left: 100px;
}

方法二：position:absolute + margin-left

html

    <div class="outside">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>

css

.left {
    position: absolute;
    left: 0;
    width: 100px;
    background: red;
    height: 100px;
}

.right {
    height: 100px;
    margin-left: 100px;
}

方法二：float:left + margin-left:-100% 浮動+負邊距

html

    <div id="left">
        Left Sidebar
    </div>
    <div id="content">
        <div id="contentInner">
            Main Content
        </div>
    </div>

css

* {
    margin: 0;
    padding: 0;
}

#left {
    background-color: green;
    float: left;
    width: 220px;
    /* margin-right:百分比相對於container的寬度 */
    margin-right: -100%;
}

#content {
    float: left;
    width: 100%;
}

#contentInner {
    margin-left: 220px;
    /*==等於左邊欄寬度值==*/
    background-color: orange;
}

　　

 

 

右側固定

2、兩側固定，一側自適應

聖盃佈局

雙飛翼佈局

3、