其实圣杯布局和双飞翼布局实现的都是三栏布局，两边的盒子宽度固定，中间盒子自适应，也就是我们常说的固比固布局。它们实现的效果都是一样的，差别在于其实现的思想。

一、圣杯布局

html代码中，将重要的内容middle放在container的最前面，然后是left、right

1、将三者均设置

float:left

2、将middle的宽度设置为

width:100%;

使得middle占满一行

3、将left放在middle所在行的最左边，给left设置

margin-left:-100%;

4、left覆盖了middle内容的最左端，此时给container设置

padding:0 100px;

5、将left填充container最左边的空白部分，为left设置

position:relative;

left:-100px;

6、同理先给right设置

margin-left:-100px;

7、然后给right添加

position:relative;

right:-100px;

实现圣杯布局的代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>圣杯布局</title>

<meta name="description" content="">

<meta name="keywords" content="">

<style>

    html,body{

        margin:0;

        padding:0;

    }

    .container{

        border:1px solid;

        padding:0 100px;

        width:500px;

    }

    .container:after{

        content:'';

        display: block;

        clear:both;

        height: 0;

    }

    .main{

        width:100%;

        height:300px;

        background-color: red;

        float:left;

    }

    .aside{

        width:100px;

        height:100px;

        background:blue;

        float:left;

        position: relative;

        left:-100px;

        margin-left:-100%;

    }

    .extra{

        width:100px;

        height:100px;

        float:left;

        background:yellow;

        position: relative;

        left:100px;

        margin-left:-100px;

    }

</style>

</head>

<body>

    <div class="container">

        <div class="middle"></div>

        <div class="left"></div>

        <div class="right"></div>

    </div>

</body>

</html>

二、双飞翼布局

双飞翼布局与圣杯布局不同的是，在中间重要的内容块里面再嵌套了一个div用于放内容，然后设置该div的margin，来达到三栏式的效果。

1、将三者均设置

float:left

2、将middle的宽度设置为

width:100%;

使得middle占满一行

3、将left放在middle所在行的最左边，给left设置

margin-left:-100%;

4、将right放到middle所在行的最右变，给right设置

margin-left:-100px;

5、middle的一部分给left和right覆盖了，给middle中添加

<div class="wrap"></div>

6、然后设置wrap

margin:0 110px;

双飞翼的代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>双飞翼布局</title>

<meta name="description" content="">

<meta name="keywords" content="">

<style>

    html,body{

        margin:0;

        padding:0;

    }

    .container{

        border:1px solid;

        width:500px;

    }

    .container:after{

        content:'';

        display: block;

        clear:both;

        height: 0;

    }

    .middle{

        width:100%;

        height:300px;

        float:left;

    }

    .middle .wrap{

        background:pink;

        height:300px;

        margin-left: 100px;

        margin-right: 100px;

    }

    .left{

        width:100px;

        height:100px;

        background:blue;

        float:left;

        margin-left:-100%;

    }

    .right{

        width:100px;

        height:100px;

        float:left;

        background:yellow;

        margin-left:-100px;

    }

</style>

</head>

<body>

    <div class="container">

        <div class="middle">

            <div class="wrap"></div>

        </div>

        <div class="left"></div>

        <div class="right"></div>

    </div>

</body>

</html>

三、两个布局的异同

  • 1.两种布局方式都是把主列放在文档流最前面，使主列优先加载；
  • 2.两者在实现上的相同点在于都让三列浮动，然后通过负外边距形成三列布局；
  • 3.两种布局方式的不同在于如何处理中间主列的位置：圣杯布局是利用父容器的左右内边距定位；双飞翼布局是把主列嵌套在div后利用主列的左右外边距定位。

CSS布局之圣杯布局和双飞翼布局的更多相关文章

  1. CSS圣杯布局、双飞翼布局详解

    三栏布局中,经典中的经典应该就是圣杯布局.双飞翼布局没跑了.双飞翼布局和圣杯布局其实是一样的,只不过在写法上有些不同,其布局都是左右固定宽度,中间宽度自适应. 先熟悉一下圣杯布局.双飞翼布局中的特点: ...

  2. 【CSS】 布局之圣杯布局

    在看众多大神的css布局指南时,经常看到一个布局:圣杯布局(也有称为双飞翼布局的).今天我们也来剖析一下. 其实,对于众多css布局,我们只要明确理解了3种技术,那么基本上大多数布局都难不倒我们了: ...

  3. CSS布局 -- 圣杯布局 & 双飞翼布局

    按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应. 但在这里实现起来还是有一些区别的 [圣杯布局] 在这里,实现了左(200px) 右(220px) 宽度固定,中 ...

  4. CSS布局经典—圣杯布局与双飞翼布局

    在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...

  5. CSS之圣杯布局与双飞翼布局

    圣杯布局 三行等高 HTML: <!DOCTYPE html><html><head>    <meta charset="utf-8"& ...

  6. CSS经典布局-圣杯布局、双飞翼布局

    圣杯布局的来历是2006年发在a list part上的这篇文章:In Search of the Holy Grail · An A List Apart Article圣杯是西方表达“渴求之物&q ...

  7. CSS 圣杯布局 / 双飞翼布局的实现

    工作的越久,有些基础知识我们可能就逐渐淡忘了,今天我们来回顾一下css的圣杯布局和双飞翼布局, 这两个名词你可能不熟, 那三栏布局你肯定就非常熟悉了, 就是两边定宽, 中间自适应 的 布局 1 , 圣 ...

  8. css布局记录之双飞翼布局、圣杯布局

    双飞翼布局和圣杯布局是比较常用的布局方式,都是为了实现一行三列,并且两侧列固定宽度,中间列宽度自适应的效果:直接上代码记录下: <!DOCTYPE html> <html lang= ...

  9. css布局笔记（三）圣杯布局，双飞翼布局

    圣杯布局和双飞翼布局都是三列布局,两边定宽,中间自适应布局,中间栏要在放在文档流前面以优先渲染. 圣杯布局如下 <!-- 圣杯布局 --> <!DOCTYPE html> &l ...

  10. css中的圣杯布局和双飞翼布局

    圣杯布局 布局要求: 三列布局,中间自适应,两边定宽 中间栏要在浏览器优先渲染 允许任意列的高度最高 用最简单的CSS.最少的HACK语句 解释说明: 1.min-width:700px是为了当页面缩 ...

随机推荐

  1. c++高精度计算（加法）

    本文提供给刚入坑的新手 关于高精度的计算网上百度一下可以了解到许多 今天我分享的只是一些自己的心得,更详细的可以去看原博主的原创文章(https://blog.csdn.net/fanyun_01/a ...

  2. Windows10系统在VMware中安装CentOS7操作系统并实现图形化用户界面Gnome

    由于操作系统课程需要,我尝试在windows10环境下安装linux虚拟机,最终采用centOS7和Gnome图形用户界面,在安装和使用过程中出现一些问题,在这里将其记录下来,以便后续查阅. 第一部分 ...

  3. 偏前端-vue.js学习之路初级（二）组件化构建

    vue.js   组件化构建 组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型.自包含和通常可复用的组件构建大型应用.仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树: ...

  4. 03.搭建Spark集群(CentOS7+Spark2.1.1+Hadoop2.8.0)

    接上一篇:https://www.cnblogs.com/yjm0330/p/10077076.html 一.下载安装scala 1.官网下载 2.spar01和02都建立/opt/scala目录,解 ...

  5. 分布式日志收集框架Flume

    分布式日志收集框架Flume 1.业务现状分析 WebServer/ApplicationServer分散在各个机器上 想在大数据平台Hadoop进行统计分析 日志如何收集到Hadoop平台上 解决方 ...

  6. STM32利用CUBEMX建立自定义HID工程，并且完成64字节的IN，OUT传输功能。

    STM32 Customed HID开发流程 本文介绍的是STM32的cubeMX自定义HID的开发流程 cubeMX配置customed HID模式.更多详细配置壳查看代码CubeMX的配置文件. ...

  7. 每天一个Linux命令之mkdir

    Linux mkdir命令 mkdir [-p] filename 用于创建一个空目录 如果该目录下有相同名称的目录那么会报错 apple@apple-Pro  ~/Documents/java_d ...

  8. 中国大学MOOC-JAVA学习（浙大翁恺）—— 时间换算

    import java.util.Scanner; public class Main { public static void main(String[] args) { // TODO Auto- ...

  9. 使用VS2015 编译 64位的boost库

    别人写的编译参考: 目标:使用VS2015 编译 64位的boost库. 一直以来都是在Win32环境下Build和使用boost,但现在基本上每天都在64位Win7下工作,所以很有必要把这几天的经验 ...

  10. Angular 7 版本

    Angular 7 版本 这是跨整个平台的主要版本,更新包括核心框架,Angular Material和CLI. 如何更新到v7 可以访问update.angular.io以获取有关更新应用程序的详细 ...