关键词：
今天突然想起了温习一下css布局。之前看双飞翼布局只是粗略的看了一下，大概明白怎么做，但是并没有去延伸一下...还有它的孪生兄弟：圣杯布局。今天仔细的琢磨了一下；突然发现其实内容还不少的样子。
双飞翼布局或者说圣杯布局它们都是三列布局；（一列自适应和两列固定列）。当然，除了三列布局，还有一列布局（自适应居中）、两列布局(一列自适应一列固定列)。
其他两种都相对来说简单些。就着重说一下三列布局。
一、双飞翼布局
先给出效果图：
其中中间一部分是自适应宽度，其他两列是固定列大小。
有两种方式可以实现布局，这是第一种；另外一种方式其实和第一种没有多大的差别。只是一个用的margin一个用的padding
body代码：
style代码部分
在这部分中，布局利用了margin-left为负值来完成；详细的在代码中说明
第二种实现方法类似第一种，不过做一点微调
body代码：
在中间列的里面加一个内部的div盒子，用它来装内容。
style代码部分：
前面的一模一样。在.main那里开始变化；最后给inner加一个样式就ok。
二、圣杯布局
它和双飞翼相似。但是实现的思想略有一点不同。
body部分：
style代码部分：
第二种实现方法纯属我按照自己的想法来解释和实现，是我自己的一个理解。实现的效果是相同的，是我自己在测试的时候，发现.container设置内边距和设置外边距的效果是相同的。但是就只改变padding为margin的话，效果如下图
纳里。。什么意思？两边的列呢？打开盒模型检查的时候发现，两边的列是好好的呆在两边的啊。乍一看！原来是被隐藏掉了。我只改变了padding为margin。然后两边就被
隐藏掉了。找了半天。问题出现了在overflow：hidden的那里，因为我这时候为container设置的是外边距：即container和其他外围盒子之间的距离。当给两列设置偏移量时是补外边距的空白。将两列放在了外边距中就会产生内容溢出的问题，这样用overflow：hidden的话，就会隐藏溢出的内容；自然就看不见了固定的两列。方法就是换一种方法来清除浮动。这里我直接给footer元素加上clear:left;就清除了浮动就ok了。得到效果图:
css布局之圣杯布局和双飞翼布局
1、写在前面 圣杯布局和双飞翼布局网上有很多的文章来介绍。有的图文并茂的写的很细，看着很舒服。有的写的格式很乱，没图没真相，看着很捉急。然而这些文章里没有一篇是让自己看完后完全明白的，于是仔细了解了... 查看详情
圣杯布局和双飞翼布局的实现过程
相信很多人都搜过圣杯布局和双飞翼布局，也知道他们的由来，在这里我就不一一赘述了，今天主要讲的是当我遇到两个布局时，我是怎样一步一步从开始到实现的过程，例如：刚开始我也不懂为什么圣杯布局和双飞翼布局的区... 查看详情
圣杯布局和双飞翼布局(代码片段)
三栏布局圣杯布局和双飞翼布局是经典的三栏布局方案圣杯布局圣杯布局通过margin负值和相对定位实现的思路：（1）在一个大的盒子设置padding-left和padding-right值（这三个盒子是兄弟关系）。（2）两个... 查看详情
圣杯布局/双飞翼布局异同和比较
<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <title>圣杯/双飞翼布局</title> <style> /*圣杯布局*/ /*.container{ padding:0200px; } .center{ float:l 查看详情
圣杯布局和双飞翼布局
圣杯布局和双飞翼布局基本上是一致的，都是两边固定宽度，中间自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染。解决方案大体相同，都是三栏全部float:left浮动，区别在于解决中间栏div的内容不被遮挡上，... 查看详情
圣杯布局和双飞翼布局(代码片段)
圣杯布局<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>圣杯布局</title><styletype="text/css">#boxpadding:0200px0100px;height:100px;#middlefloat:left;width:1 查看详情
css布局--圣杯布局和双飞翼布局以及使用flex实现圣杯布局
前言我曾一度觉得总写css的前端很low，有了这种思想以后我便远离网页布局，H5的工作更不想接，沉迷于页面逻辑和封装组件。直到最近我面试，面试官说我css3理解的不熟，我起初很不屑，但后来静下来反省了一下并不是我不熟... 查看详情
css布局--圣杯布局和双飞翼布局以及使用flex实现圣杯布局
前言我曾一度觉得总写css的前端很low，有了这种思想以后我便远离网页布局，H5的工作更不想接，沉迷于页面逻辑和封装组件。直到最近我面试，面试官说我css3理解的不熟，我起初很不屑，但后来静下来反省了一下并不是我不熟... 查看详情
css-圣杯布局和双飞翼布局
【圣杯布局】在这里，实现了左(200px)右(220px)宽度固定，中间自适应，container部分高度保持一致。DEMO稍微说明一下：html代码中 middle部分首先要放在container的最前部分。然后是left,right1.将三者都float:left,再加上一个position:relati... 查看详情
css中的圣杯布局和双飞翼布局
圣杯布局布局要求： 三列布局，中间自适应，两边定宽 中间栏要在浏览器优先渲染 &n 查看详情
解析双飞翼布局
...此衍生了另一个效果相同、结构稍有不同的布局结构——双飞翼布局。因为两种布局结构非常相似(略有不同)，为了不弄混淆，便于区分，没有将它们写在一篇。更加便于理解，思路更加清晰。 布局思路：前面所说，圣杯布... 查看详情
css布局--圣杯布局和双飞翼布局(代码片段)
圣杯布局和双飞翼布局是经典的三栏式布局。两种布局达到效果上基本相同，都是两边两栏宽度固定，中间栏宽度自适应。（这两种布局都比较老）在HTML结构上中间栏在最前面保证了最先渲染中间提升性能，并且兼容性良好。... 查看详情
css3之圣杯布局和双飞翼布局(代码片段)
圣杯布局：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>圣杯布局</title><!--圣杯布局：--><!--1搞一个容器，里面放三个盒子--><!--2设置两侧盒子的宽度固定--><!--3设置中间盒子 查看详情
web之圣杯和双飞翼布局floatclearboth(代码片段)
文章目录介绍圣杯布局双飞翼布局介绍1、双飞翼布局的middle、left、right的父元素是body，圣杯布局的middle、left、right的父元素是container，因此双飞翼布局需要在middle中内嵌一个inside，方便在middle中写内容，而圣杯... 查看详情
web之圣杯和双飞翼布局floatclearboth(代码片段)
文章目录介绍圣杯布局双飞翼布局介绍1、双飞翼布局的middle、left、right的父元素是body，圣杯布局的middle、left、right的父元素是container，因此双飞翼布局需要在middle中内嵌一个inside，方便在middle中写内容，而圣杯... 查看详情
圣杯布局与双飞翼布局(代码片段)
...左右固定中间自适应的效果，听到的有人对于圣杯布局和双飞翼布局的描述很形象，首先一个圣杯的左右把柄和圣杯是一体的，所以body里面的代码是这样的：1<divclass="container">2<divclass="center"></div>3<divclass="left">&... 查看详情
双飞翼布局和圣杯布局(代码片段)
双飞翼布局：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metacharse 查看详情
css中的圣杯布局与双飞翼布局
一，圣杯布局 1,什么是圣杯布局? 所谓圣杯布局就是用于实现一个两侧宽度固定，中间宽度自适应的三栏布局 2，构建圣杯布局的步骤： 2.1，添加一个容器，在这个容器中添加放三个盒子（左、中、右）... 查看详情