三栏，两栏布局的那点little

作者: 燃烧吧_小宇宙 | 来源:发表于2016-03-20 12:29 被阅读115次

三栏，两栏布局的那点little
布局
用CSS实现布局（两栏布局，多栏布局）
CSS布局分类
Flex布局
CSS布局
CSS Flex实现各种布局
CSS中的圣杯布局和双飞翼布局的实现，以及它们的异同
我的布局实例
CSS三栏布局的四种方法

1、负边距在让元素产生偏移时和position: relative有什么区别?

元素使用负边距，是元素没有脱离文档流，会直接影响到后面元素的布局。
position：relative是对元素自身位置的发生偏移，不会影响到后面的元素，但是会遮挡后面的元素。

2、使用负 margin 形成三栏布局有什么条件?

1、三栏布局中的三个元素都使用浮动，但是中间的一栏的元素必须放到第一个位置。并且父容器要清除浮动（优先加载）

ct:after{
content: '';
display: block;
claer: both;
}

2、父容器要设置padding，padding值=左右两边侧边栏宽度。也就是说padding值是给侧边栏的宽度。
3、在左右两个侧边栏设置margin-left值，让三个浮动元素在同一行。
4、在左右两个侧边栏设置position：relative；对侧边栏进行定位，最后形成三栏布局。

3、圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤。

圣杯布局是三个元素进行浮动，设置两边元素的负margin值，最后设置position：relative值进行定位，形成圣杯布局。

.ct{               /*设置padding值，预留出两边栏的空间，左右分别对应两侧边栏的宽度*/
    padding: 0 100px;  
}
.ct:after{      /*为父容器ct清除浮动*/
    content: '';
    display: block;         
    clear: both;
}
/*三个栏设置左浮动*/
.main{               /*设置宽度100%形成自适应页面*/
    width:100%;
    min-height: 200px;
    background-color: red;
    float: left;
}

.left{               
    width: 100px;
    min-height: 100px;
    background-color: yellow;
    float: left;
    margin-left:-100%;     /*通过负边距使left的位置在main的左上角*/
    position: relative;          /*通过相对定位，值为自身宽度，达到紧贴着main*/
    left: -100px;
}
.right{
    width: 100px;
    min-height: 100px;
    background-color: blue;
    float: left;
    margin-left: -200px;      /*通过负边距使right的位置在main右上角*/
    position: relative;          /*通过相对定位，值为自身宽度，达到紧贴着main*/
    left: 200px;
}

<body>
    <div class="header">header</div>
    <div class="ct">
        <div class="main">main</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
</body>

4、双飞翼布局的原理? 实现步骤?

双飞翼布局，在main元素里面加一个div，设置div的margin-left值和margin-right的值，为两边栏预留出空间。

.wrap{
    margin:0 200px;          /*设置margin给预留出空间，左右分别是左右侧边栏的宽度*/
    background-color: green;
    min-height: 300px;
}
.ct:after{          /*给ct元素周围清除浮动*/
    content: "";
    display: block;
    clear: both;
}
/*三栏元素均需设置左浮动*/
.main{
    width: 100%;       /*宽度100%以适应页面*/
    float: left;
}
.left{
    width: 200px;
    min-height: 300px;
    background-color: red;
    float: left;
    margin-left: -100%;       /*负margin定位到左上角，不需要使用相对定位*/
}
.right{
    min-height: 300px;
    width: 200px;
    background-color: blue;
    float: left;
    margin-left: -200px;        /*负margin定位到右上角，不需要使用相对定位*/
}
<body>
    <div class="header">header</div>
    <div class="ct">
        <div class="main">
            <div class="wrap">中间部分</div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
</body>

代码