# 页面布局

# 两栏布局

定宽 + 自适应

# 1. float

float + overflow or margin-left

<style>
	.left {
        width: 30vw;
        height: 300px;
        float: left;
        background: blue;
    }
    .right {
        margin-left: 30vw;
        height: 300px;
        background: green;
        /* overflow: auto; or */
    }
</style>
<body>
    <div class="left">left</div>
    <div class="right">right</div>
</body>

# 2. flex

<style>
    .container{
        display: flex;
    }
    .container > div{
        display: inline-block;
        height: 300px;
    }
	.left {
        background: red;
        flex: 0 0 25vw;
        /* width: 30vw; or */
    }
    .right {
        background: green;
        flex: 1;
    }
</style>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>

# 3. calc

<style>
    body{
        padding: 0;
        margin: 0;
    }
    .container{
        font-size: 0;
    }
    .container > div{
        display: inline-block;
        height: 300px;
        font-size: 14px;
    }
	.left {
        background: red;
        width: 30vw;
    }
    .right {
        background: green;
        width: calc(100vw - 30vw);
    }
</style>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>

# 三栏布局

左右固定，中间自适应，DOM结构必须是先写中间列部分，这样实现中间列优先加载。

# 1. flex

flex才是最牛逼的

<style>
    .container{
        display: flex;
    }
    .left, .right{
        width: 200px;
        height: 400px;
    }
    .center{
        flex: 1;
        order: 1;
        background: yellow;
    }
	.left {
        background: red;
    }
    .right {
        order: 2;
        background: green;
    }
</style>
<body>
    <div class="container">
        <div class="center">flex布局</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>

# 2. position

position第二牛逼

<style>
    .container {
        position: relative;
    }
    .left, .right, .main{
        min-height: 300px;
        position: absolute;
        top: 0;
        height: 300px;
        width: 200px;
    }
    .left {
        background: red;
        left: 0;
    }
    .main {
        background: yellow;
        left: 200px;
        right: 200px;
        width: auto;
        height: auto;
    }
    .right {
        right: 0;
        background: blue;
    }

</style>
<body>
    <section class="container">
        <div class="main">main</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </section>
</body>

# 3. float

<style>
    .left, .right, .main{
        min-height: 300px;
        width: 200px;
    }
    .left {
        background: red;
        float: left;
    }
    .main {
        background: yellow;
        margin: 0 210px;
        width: auto;
    }
    .right {
        float: right;
        background: blue;
    }
</style>
<body>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="main">main</div>
</body>

# 4. 圣杯布局

比较古老且有名，但这种属于淘汰的布局吧，繁琐不喜欢（flex牛逼）

<style>
.container {
    padding-left: 100px;
    padding-right: 200px;
}
.left {
    background: red;
    width: 100px;
    float: left;
    margin-left: -100%;
    position: relative;
    left: -100px;
    min-height: 300px;
}
.main {
    background: blue;
    width: 100%;
    min-height: 500px;
    float: left;
}
.right {
    background: red;
    width: 200px;
    min-height: 300px;
    float: left;
    margin-left: -200px;
    position: relative;
    right: -200px;
}
</style>
<body>
    <div class="container">
        <div class="main">Main</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>

# 5. 双飞翼布局

<style>
.left {
    background: red;
    width: 100px;
    float: left;
    margin-left: -100%;
    min-height: 300px;
}
.main {
    background: green;
    float: left;
    width: 100%;
    min-height: 500px;
}
.right {
    background: red;
    float: left;
    width: 200px;
    margin-left: -200px;
    min-height: 300px;
}
.inner {
    margin-left: 100px;
    margin-right: 200px;
}
</style>
<body>
    <div class="main">
        <div class="inner">
            Main
        </div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</body>

# 水平垂直居中

  1. absolute + transform
.outer {
    position: relative
}
.inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
  1. flex
.outer {
    display: flex;
    justify-content: center;
    align-items: center;
}
  1. flex + margin: auto
.outer {
    display: flex;
}
.inner {
    margin: auto;
}
  1. table
.inner {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

# 粘连布局

页面内容不满屏高度时，footer始终显示在底部，而当页面超出满屏的高度的时候，footer要随着高度走。

<style>
    body, html{
        height: 100%; 
        margin: 0; 
        padding: 0;
    }
    section{
        min-height: 100%; 
        padding-bottom: 200px;
        box-sizing: border-box;        
    }
    footer{
        width: 100%;
        height: 200px;
        margin-top: -200px;
        background: #666;
    }
</style>
<body>
    <section></section>	
    <footer></footer>
</body>

<style>
	body, html{ 
        height: 100%; 
        margin: 0; 
        padding: 0; 
    }
	.container{
		position: relative;
		min-height: 100%;
	}
	section{
		padding-bottom: 200px;
	}
	footer{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 200px;
		background: #666;
	}
</style>
<body>
    <div class="container">
        <section></section>	
        <footer></footer>
    </div>
</body>

选择器