CSS布局之传统方法

传统的页面布局依赖于盒模型+流动模型（flow）+浮动模型（float）+层模型（layer）来实现页面的布局，具体方法是通过盒模型+display属性+float属性+position属性来加以实现。

一、一栏固定，一栏自适应

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;
}

　　

 

 

右侧固定

二、两侧固定，一侧自适应

圣杯布局

双飞翼布局

三、