# 一、单列布局
1.普通布局（头部、内容、底部）
```html
```
2.内容居中（内容区域为80%宽度，采用margin:0 auto;实现水平居中）
```html
Document
```
# 二、两栏布局
1.采用float 左边固定大小，右边自适应，左侧采用float:left往左浮动，右侧margin-left:200px,留出左侧内容的空间。
```html
Document
```
2.采用display: inline-block; 和 calc() 实现。由于inline-会把空格和回车算进去，所以我们在wrappper中设置font-size:0来清除影响。当然，打包出来的压缩格式可以忽略。
```html
Document
```
3.采用flex实现，左侧固定大小，右侧设置flex:1,即可实现自适应，HTML不变，css如下
```html
.wrapper {
/* width:80%;和margin 是为了方便我截图*/
width: 80%;
margin: 50px auto;
border:2px solid red;
box-sizing: border-box;
/*flex布局*/
display: flex;
}
.nav {
width: 200px;
background: #faa;
height: 500px;
}
.content {
flex: 1;
height: 500px;
background-color: #aaf;
}
```
# 三、三栏布局
1.采用float浮动,左右大小固定，中间自适应
```html
Document
```
2.采用inline-block 与两栏布局类似
```html
.wrapper {
width: 100%;
margin-bottom: 30px;
border:2px solid red;
box-sizing: border-box;
font-size: 0;
}
.wrapper .left {
display: inline-block;
width: 200px;
height: 300px;
background: #faa;
}
.wrapper .right {
display: inline-block;
width: 200px;
height: 500px;
background: #afa;
}
.wrapper .content {
width: calc(100% - 400px);
display: inline-block;
height: 400px;
background-color: #aaf;
}
```
我们可以发现他是底部对齐的，只需改变他的对其方式即可。vertical-align: top;
```css
.wrapper .left {
display: inline-block;
width: 200px;
height: 300px;
background: #faa;
vertical-align: top;/*添加*/
}
.wrapper .right {
display: inline-block;
width: 200px;
height: 500px;
background: #afa;
vertical-align: top;
}
.wrapper .content {
width: calc(100% - 400px);
display: inline-block;
height: 400px;
background-color: #aaf;
vertical-align: top;
}
```
3.采用flex布局
```html
.wrapper {
width: 100%;
margin-bottom: 30px;
border:2px solid red;
box-sizing: border-box;
display: flex;
}
.wrapper .left {
width: 200px;
height: 300px;
background: #faa;
}
.wrapper .right {
width: 200px;
height: 500px;
background: #afa;
}
.wrapper .content {
flex: 1;
height: 400px;
background-color: #aaf;
}
```
# 四、圣杯布局
圣杯布局和双飞翼布局这两个布局非常重要，性能什么的都要比上面好很多，主要是为了让content内容区域优先加载。
```html
```
上面是html，发现了吧，middle写在最前面，这样网页在载入时，就会优先加载。
具体实现思路，通过给 container 左右固定的padding来预留出left和right的空间
```html
.container {
position: relative;;
height: 300px;
background: #ddd;
padding: 0 300px 0;
}
.container .middle{
float: left;
width: 100%;
height: 300px;
}
.container .left{
float: left;
position: relative;
height: 300px;
width: 300px;
margin-left: -100%;
left: -300px;
}
.container .right {
float: left;
position: relative;
width: 300px;
height: 300px;
margin-left: -300px;
left: 300px;
}
```
所以内部元素都是左浮动的，主要区域宽度100%;
左侧区域通过margin-left:100%;使它浮动到左方，然后更具自身定位 left：-300px;将之移动到父容器的padding中
右侧同理，只不过只需要margin自己本身的宽度。
结果：左右固定宽度300px，中间自适应
# 五、双飞翼布局
双飞翼布局和圣杯差不多，主要是将padding换成了margin而且只需要包裹middle即可。
```html
```
```css
.container{
float: left;
width: 100%;
height: 300px;
background: #ddd;
}
.container .middle{
height: 300px;
margin: 0 300px;
}
.left{
float: left;
position: relative;
width: 300px;
height: 300px;
margin-left: -100%;
}
.right{
float: left;
position: relative;
width: 300px;
height: 300px;
margin-left: -300px;
}
```