css常用布局记录

常用水平垂直居中方式

1. psoition + 负margin
2. position + margin auto
3. position + transform
4. position + calc
5. flex

三栏布局（两边固定，中间自适应）

双飞翼(float + 负margin)

<!-- center在前面 -- >
<div id = parent>
	<div id="center">
		<div id="center-box">中间</div>
	</div>
	<div id="left">左边</div>
	<div id="right">右边</div>
</div>

#center{
	float:left;
	width:100%;
	height:200px;
	backgroud:red
}
#left{
	float:left;
	width:100;
	margin-left:-100%; /*重点*/
	backgroud:blue;
}
#right{
	float:left;
	width:200;
	margin-left:-200;/*重点*/
	backgroud:yellow;
}
#center-box{
	margin:0 200px 0 100px;/*重点*/
}

圣杯布局（float + position + 负margin）

<div id = parent>
	<div id="center">中间</div>
	<div id="left">左边</div>
	<div id="right">右边</div>
</div>

#parent {
    height: 500px;
    padding: 0 215px 0 115px;  /*为了使#center摆正,左右padding分别等于左右盒子的宽,可以结合左右盒子相对定位的left调整间距*/
}
#center{
    float: left;
    width: 100%;
    background: red;
}
#left{
    float: left;
    width: 100px;
    position: relative;
    left: -115px;
    margin-left: -100%;
    background: rosybrown;
}
#right{
    float: left;
    width: 200px;
    position: relative;
    left: 215px;
    margin-left: -200px;
    background: salmon;

}

等高布局

有很多方式，包括假等高和真等高，但是这里推荐两种

flex布局

flex布局中，子元素都默认拉伸为父亲元素的高度，不考虑IE低版本兼容推荐使用

<div id="parent">
	<div id="left">121</div>
	<div id="center">1212</div>
	<div id="right">1212</div>

</div>

#parent{
 display:flex;
}
#left,#right,#center{
flex:1
}

position(absolute)

<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>left</p>
    </div>  
    <div class="center" style="background-color: pink;">
        <p>center</p>
        <p>center</p>
    </div>          
    <div class="right" style="background-color: lightgreen;">
        <p>right</p>
    </div>        
</div>

.parent{
    position: relative;
    height: 40px;
}
.left,.center,.right{
    position: absolute;
    top: 0;
    bottom: 0;
}
.left{
    left: 0;
    width: 100px;
}
.center{
    left: 120px;
    right: 120px;
}
.right{
    width: 100px;
    right: 0;
}