CSS经典布局之“圣杯布局”

在CSS的经典布局中，圣杯布局和双飞翼布局是十分典型的代表，在众多前端面试中也常常会遇到。今天我们就一起来聊聊“圣杯布局”是怎么一回事吧~

圣杯布局效果图

效果预览图

【解决需求】

同一行中部分宽度固定，部分宽度自适应的情况

【实际应用】

左右侧边栏+中间主要内容区域的布局，即俗称的“固比固布局”（本文以此为例）；

左边栏固定宽度，右边栏自适应宽度；

右边栏固定，左边栏自适应宽度。

应用实例图解

【解决方案】

利用负边距，内边距控制内部宽度、相对定位实现中间区域宽度自适应。

1. 首先写好html，然后分别设置左右边栏和中间部分的宽度，中间部分宽度设置为100%；

html代码

```

*{

padding: 0;

margin:0;

}

.wrap{

color: #fff;

width: 100%;

overflow: hidden;

background: #eee;

}

.main{

background: #333;

width: 100%;

}

.left{

width: 100px;

background: #DC3E3E;

}

.right{

width: 100px;

background: #DC3E3E;

}

```

本步效果图

2. 负边距：为了让主要内容预先渲染，在html文档中将中间部分放在左右边栏前面。如果按照正常的顺序显示即做右边栏一定在中间部分后面。为了使左右边栏分别位于中间部分的左右两侧，将三个元素全部向左浮动，利用负边距设置左边栏左边距为-100%，右边栏左边距为右边栏宽度的负值，则左右边栏此时已经分别在中间部分的左右两边了。

```

.main{

float: left;

}

.left{

margin-left: -100%;

float: left;

}

.right{

float: left;

margin-left: -100px;

}

```

本步效果图

3. 内边距控制内部宽度

到目前为止，左右边栏分别位于中间栏的两侧，但是左右边栏浮动在中间栏的上方，会挡住中间栏内容的显示，此时可以通过外部包裹的wrap的内边距来控制中间栏100%的宽度，使左右两边空出位置，然后通过相对定位将左右边栏分别移动到左右两侧，达到效果。

不过此处要注意的是，在wrap内加内边距会使得wrap的宽度撑大，此时需要使用box-sizing:border-box的属性使得内边距计算在既定宽度内。

```

.wrap{

padding: 0 100px;

box-sizing: border-box;

}

```

本步效果图

4. 如上一步所讲的，利用相对定位将做右边栏置于空出来的空白处。

```

.left{

position: relative;

left: -100px;

}

.right{

position: relative;

left: 100px;

}

```

本步效果图

此时，我们基本已经达到了我们得目的，最后我们还可以配合之前所讲过的高度布局实现我们平常经常会见到的网站布局。

高度布局：http://www.jianshu.com/p/2e907874d5be

【完整代码示例】

HTML代码

```

*{

padding: 0;

margin:0;

}

.wrap{

color: #fff;

width: 100%;

overflow: hidden;

padding: 0 100px;

background: #eee;

box-sizing: border-box;

position: absolute;

top: 0;

bottom: 0;

}

.main{

background: #333;

width: 100%;

float: left;

height: 100%;

}

.left{

width: 100px;

margin-left: -100%;

float: left;

background: #DC3E3E;

position: relative;

left: -100px;

height: 100%;

}

.right{

float: left;

width: 100px;

margin-left: -100px;

background: #DC3E3E;

position: relative;

left: 100px;

height: 100%;

}

```

【效果预览】

效果预览图

到这里就大功告成啦，欢迎大家指正我的错误，希望能跟大家学到更多

｡:.ﾟヽ(｡◕‿◕｡)ﾉﾟ.:｡+ﾟ