页面布局

　　1、三列布局,中间自适应

<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的位置可以随意替换.  这样可以实现优先展示中间区域的内容:先写中间区域的内容

 

　　2、使用浮动

<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必须写在最后

 

　　3、圣杯模式

圣杯布局的原理是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的宽度。

 

　　4、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一定要放到中间。

 

转载于:https://www.cnblogs.com/Ashton-ldb/p/11469973.html