html表格圣杯布局页面,CSS什么是圣杯布局？

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

圣杯布局是两边固定宽度，中间自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染。三栏全部float:left浮动，并配合left和right属性。

原理(1.浮动2.负边距)：

浮动元素有脱离文档流的特性，负值使得自身向左移动

示例图：

通过缩放页面就可以发现，随着页面的宽度的变化，这三栏布局是中间盒子优先渲染，两边的盒子框子固定不变，即使页面宽度变小，也不影响我们的浏览。注意：当你缩放页面的时候，宽度不能小于700PX，为了安全起见，最好还是给body加一个最小宽度!

如果你有了那么一点理解以后，我们来看看圣杯布局的实现：

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

*{

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;

}

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

【完整代码示例】

*{

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%;

}

【效果预览】

更多web前端开发知识，请查阅 HTML中文网 ！！