摘要：圣杯布局对于三栏布局来说，左右两栏一般放置目录等简要信息，中间一栏是主要信息。无论是三栏布局还是两栏布局，以上方法都适用。纯浮动布局左右两栏分别向左右浮动，中间设置值，宽度自适应。
圣杯布局
对于三栏布局来说，左右两栏一般放置目录等简要信息，中间一栏是主要信息。页面加载时，用户最希望第一时间看到的是中间一栏内容，所以根据文档流加载顺序（从上到下），中间一栏必须放在左右两栏的前面。而实际布局需要将中间一栏居中放置，所以在布局的时候就稍有不同，这是就需要用到圣杯布局。（原因or背景)
下面是代码示例：
圣杯布局
Header
Center
Left
Right
body{padding:0;margin:0}
.header,.footer{width:100%; background: #666;height:30px;clear:both;}
.container{
padding-left:150px;
padding-right:200px;
}
.left{
background: #34934D;
width:150px;
float:left;
margin-left:-100%;
position: relative;
left:-150px;
}
.center{
background: #D6D6D6;
width:100%;
float:left;
}
.right{
background: #EF4400;
width:200px;
float:left;
margin-left:-200px;
position:relative;
right:-200px;
}
运行结果：
需要注意的地方：
在HTML中center是在left和right前面。
左右两栏的宽度是固定的，中间一栏宽度是随浏览器宽度变化而变化
当left负外边距使得left脱离container时，会升上去。（right同理）
第三步中left和right升上去后会左右挡住center，所以需要container设置padding，在将left和right定位。
当然这里只是简单的举例，为使代码更加简洁清楚，container没有加清浮动，此时他的高度为0.
圣杯布局的进化：双飞翼布局双飞翼布局是在圣杯布局上进行改进，当left和right设置负margin，会上升并挡住center，圣杯布局是采用padding+relative定位，而双飞翼布局是采用margin解决。
具体代码如下
双飞翼布局
Header
Center
Left
Right
body{padding:0;margin:0}
.header,.footer{width:100%; background: #666;height:30px;clear:both;}
.left{
background: #34934D;
width:150px;
float:left;
margin-left:-100%;
}
.center{
background: #D6D6D6;
width:100%;
float:left;
}
.center-inner{
margin-left: 150px;
margin-right: 200px;
}
.right{
background: #EF4400;
width:200px;
float:left;
margin-left:-200px;
}
与圣杯运行结果一样。
需要注意的是
这里是在center里面套了一个div，再设置margin值。
left和right没有使用定位。
圣杯布局的退化前面两个布局是考虑到中间一栏先加载，但有些场景并不需要，此时可以很快的得到简单的三栏布局。
代码示例如下：
圣杯布局退化
Header
Left
Center
Right
body{padding:0;margin:0}
.header,.footer{width:100%; background: #666;height:30px;clear:both;}
.container{
padding-left: 150px;
padding-right: 200px;
}
.left{
background: #34934D;
width:150px;
float:left;
margin-left:-150px;
}
.center{
background: #D6D6D6;
width:100%;
float:left;
}
.right{
background: #EF4400;
width:200px;
float:right;
margin-right: -200px;
}
结果与圣杯布局一样。
需要注意的是:
在HTML中left放在center的前面。
主要实现的思路：根据文档流从上到下为：left-center-right。首先将container设置左右padding，在将left和right设置负margin值，使其刚好落在container的padding中。
无论是三栏布局还是两栏布局，以上方法都适用。
纯浮动布局左右两栏分别向左右浮动，中间设置margin值，宽度自适应。
代码如下：
纯浮动
Header
Left
Right
Center
body{padding:0;margin:0}
.header,.footer{width:100%; background: #666;height:30px;clear:both;}
.left{
background: #34934D;
width:150px;
float:left;
}
.center{
background: #D6D6D6;
margin-left: 150px;
margin-right: 200px;
}
.right{
background: #EF4400;
width:200px;
float:right;
}
运行结果与圣杯布局一样。
需要注意的点：
浮动的left和right需要放在center前面。浮动前面有非浮动的元素，后面浮动元素只能在其后面。
center的width应为auto。
绝对定位纯浮动是利用浮动将左右两栏定位，这里也可以绝对定位。center依旧设置margin值留出左右空位。
代码如下：
绝对定位
Header
Left
Right
Center
body{padding:0;margin:0}
.header,.footer{width:100%; background: #666;height:30px;clear:both;}
.container{
position: relative;
}
.left{
background: #34934D;
width:150px;
position: absolute;
top: 0px;
left: 0px;
}
.center{
background: #D6D6D6;
margin-left: 150px;
margin-right: 200px;
}
.right{
background: #EF4400;
width:200px;
position: absolute;
top: 0px;
right: 0px;
}
运行结果与圣杯布局一样。
需要注意：container需要加position：relative（或其他非static）。
以上就是几种常见的布局，可根据不同的场景选择相应的布局。如有错误的地方还望指出，有更好的布局欢迎补充。
新年的第一篇博客完成啦，接下来要将之前所学的知识写成一篇篇博文，2017年加油吧！！！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115460.html
摘要：重点介绍一下常见的三列布局之圣杯布局和双飞翼布局。两种布局方式的不同之处在于如何处理中间主列的位置圣杯布局是利用父容器的左右内边距定位双飞翼布局是把主列嵌套在后利用主列的左右外边距定位。 CSS总结 由于最近在准备前端方面的面试，所以对自己平常工作中用到的地方做出一些总结。该篇是CSS部分(上)，有许多地方叙述的并不是十分详细，只是大致的描述一下，给自己提供一个知识轮廓。本篇中主要描述...
摘要：本文概要本文将介绍如下几种常见的布局其中实现三栏布局有多种方式，本文着重介绍圣杯布局和双飞翼布局。借助等高布局正负可解决，下文会介绍双飞翼布局特点同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。 本文概要 本文将介绍如下几种常见的布局： showImg(https://segmentfault.com/img/remote/14600000...
摘要：本文概要本文将介绍如下几种常见的布局其中实现三栏布局有多种方式，本文着重介绍圣杯布局和双飞翼布局。借助等高布局正负可解决，下文会介绍双飞翼布局特点同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。 本文概要 本文将介绍如下几种常见的布局： showImg(https://segmentfault.com/img/remote/14600000...
摘要：本文概要本文将介绍如下几种常见的布局其中实现三栏布局有多种方式，本文着重介绍圣杯布局和双飞翼布局。借助等高布局正负可解决，下文会介绍双飞翼布局特点同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。 本文概要 本文将介绍如下几种常见的布局： showImg(https://segmentfault.com/img/remote/14600000...
摘要：本文概要本文将介绍如下几种常见的布局其中实现三栏布局有多种方式，本文着重介绍圣杯布局和双飞翼布局。借助等高布局正负可解决，下文会介绍双飞翼布局特点同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。 本文概要 本文将介绍如下几种常见的布局： showImg(https://segmentfault.com/img/remote/14600000...
摘要：常用于控制页面布局的定位机制普通流相对定位绝对定位和固定定位。左右布局最常用的就是通过浮动左浮或右浮来实现浮动。可以通过设置左右的外边距为值来居中包括图片。 这里，就CSS左右布局，左中右布局，水平与垂直居中，进行讨论。 CSS常用于控制页面布局的定位机制：普通流、相对定位、绝对定位和固定定位。还可以使用float属性来让元素浮动。 1.左右布局 最常用的就是通过浮动（左浮或右浮）来实...
阅读 1331·2021-09-23 11:21
阅读 2105·2021-09-07 10:13
阅读 665·2021-09-02 10:19
阅读 989·2019-08-30 15:44
阅读 1616·2019-08-30 13:18
阅读 1808·2019-08-30 11:15
阅读 986·2019-08-29 17:17
阅读 1901·2019-08-29 15:31
