一，圣杯布局

　　1,什么是圣杯布局?

　　　所谓圣杯布局就是用于实现一个两侧宽度固定，中间宽度自适应的三栏布局

　　2，构建圣杯布局的步骤：

　　　　2.1，添加一个容器，在这个容器中添加放三个盒子（左、中、右）；

　　　　2.2，设置两侧盒子（左、右）的宽度 ，使其宽度固定；

　　　　2.3，设置中间盒子的宽度为100%，这是中间盒子宽度自适应的关键；

　　　　2.4，设置容器的padding-left和padding-right属性，属性值分别为左盒子的宽度和右盒子的宽度；

　　　　2.5，让三个盒子都向左浮动，向右浮动可能会出现问题，所以都设置向左浮动；

　　　　2.6，设置左盒子的margin-left属性为-100%；

　　　　2.7，通过相对定位调整左边的盒子, 使左边的盒子不盖住中间盒子的区域；

　　　　2.8，设置右边盒子的margin-left属性为负的自身的宽度；

　　　　2.9，同样的通过相对定位调整右边的盒子, 使右边的盒子不盖住中间盒子的区域；

　　　　2.10，最后一步就是给容器设置一个最小宽度min-width属性，防止它缩小后变形。

　　3，具体示例如下

<style>

        *{

            margin:;

            padding:;

        }

        .left, .right{

            width: 200px;

            height: 200px;

            background-color: red;

            float: left;

        }

        .left{

            margin-left: -100%;

            position: relative;

            left: -200px;

        }

        .right{

            margin-left: -200px;

            position: relative;

            right: -200px;

        }

        .center{

            width: 100%;

            height: 200px;

            background-color: green;

            float: left;

        }

        .box{

            padding: 0 200px;

            min-width: 400px;

        }

    </style>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>圣杯布局</title>

</head>

<body>

    <div class="box">

        <div class="center">圣杯布局圣杯布局圣杯布圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局

            圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局

            圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局</div>

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

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

    </div>

</body>

</html>

　

　二，双飞翼布局

　　1，什么是双飞翼布局　　

　　　和圣杯布局一样，双飞翼布局也是用于实现一个两侧宽度固定，中间宽度自适应的三栏布局，就是布局的形式上存在差异　　　　

　　2，构建双飞翼布局的步骤

　　　　2.1，添加一个容器，在这个容器中添加三个盒子（左、中、右）；

　　　　2.2，设置两侧盒子（左、右）的宽度 ，使其宽度固定；

　　　　2.3，设置中间盒子的宽度为100%，这也是双飞翼布局中中间盒子宽度自适应的关键；

　　　　2.4，让三个盒子都向左浮动，向右浮动可能会出现问题，所以都设置向左浮动；

　　　　2.5，再给中间的盒子添加一个子盒子；

　　　　2.6，设置子盒子margin-left和margin-right属性，属性值分别为左盒子的宽度和右盒子的宽度；

　　　　2.7，设置左盒子的margin-left属性为-100%；

　　　　2.8，设置右边盒子的margin-left属性为负的自身的宽度；

　　3，具体示例如下

<style>

        *{

            margin:;

            padding:;

        }

        .left, .right{

            width: 200px;

            height: 200px;

            background-color: skyblue;

            float: left;

        }

        .left{

            margin-left: -100%;

        }

        .right{

            margin-left: -200px;

        }

        .center{

            width: 100%;

            height: 200px;

            background-color: brown;

            float: left;

        }

        .center>.center_in{

            margin: 0 200px;

            height: 200px;

            background-color: yellow;

        }

        .box{

            overflow: hidden;

        }

    </style>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

</head>

<body>

    <div class="box">

        <div class="center">

            <div class="center_in">双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局

                双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局

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

        </div>

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

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

    </div>

</body>

</html>

CSS中的圣杯布局与双飞翼布局的更多相关文章

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

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

  2. CSS | 圣杯布局、双飞翼布局 | 自适应三栏布局

    圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局 虽然两者的实现方法略有差异,不过都遵循了以下要点: 1.两侧宽度固定 ...

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

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

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

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

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

    其实圣杯布局和双飞翼布局实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应,也就是我们常说的固比固布局.它们实现的效果都是一样的,差别在于其实现的思想. 一.圣杯布局 html代码中,将重要的内容 ...

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

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

  7. css两栏布局、圣杯布局、双飞翼布局

    最近几个月一直用vue在写手机端的项目,主要写业务逻辑,在js方面投入的时间和精力也比较多.这两天写页面明显感觉css布局方面的知识有不足,所以复习一下布局方法. 两栏布局 1.浮动 .box1 .l ...

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

    一.圣杯布局和双飞翼布局的目的 实现三栏布局,中间一栏最先加载和渲染 两侧内容固定,中间内容随着宽度自适应 一般用于PC网 二.圣杯布局的实现 技术要点: 设置最小宽度min-width 使用floa ...

  9. 中间自适应，左右定宽的两种经典布局 ---- 圣杯布局 VS 双飞翼布局

    一.引子 最近学了些js框架,小有充实感,又深知如此节奏的前提需得基础扎实,于是回头想将原生CSS和Javascript回顾总结一番,先从CSS起,能集中它的就在基础的布局上,便查阅了相关资料,将布局 ...

  10. CSS_圣杯布局和双飞翼布局

    参考: 圣杯布局的来历是2006年发在a list part上的这篇文章: http://alistapart.com/article/holygrail 双飞翼布局介绍-始于淘宝UED: http: ...

随机推荐

  1. QTP测试web时：打开ie浏览器进行录制但qtp录制脚本为空

    1. 关闭ie的保护模式:设置——internet选项——安全——取消勾选“启用保护模式” 这一步很关键,之前试过很多步骤,只有这个成功了. 修改后如果可行即可.如果不行再进行下面操作: 2.关闭杀毒 ...

  2. HDS协议介绍

    一.什么是HTTP Dynamic Streaming 使用传统的HTTP协议进行在线播放叫做“渐进下载”,所有的视频内容从头到尾必须从服务器传输到客户端,用户只能在传输完的视频长度中选择播放点,而不 ...

  3. idea 2019.3 破解激活码

    idea激活码(亲测 idea 2019.3可用)有效期到2021年3月: QYYBAC9D3J-eyJsaWNlbnNlSWQiOiJRWVlCQUM5RDNKIiwibGljZW5zZWVOYW1 ...

  4. VS2013 连接 Oracle出现尝试加载 Oracle 客户端库时引发 BadImageFormatException 32位与64位问题解决方案

    摘自 :https://blog.csdn.net/similing/article/details/54318434 遇到这种问题是64位系统安装32位Oracle与VS2010的连接出现问题 解决 ...

  5. CUDA学习（七）之使用CUDA内置API计时

    问题:对于使用GPU计算时,都想知道kernel函数运行所耗费的时间,使用CUDA内置的API可以方便准确的获得kernel运行时间. 在CPU上,可以使用clock()函数和GetTickCount ...

  6. Lambda 表达式入门，看这篇就够了

    说出来怕你们不相信,刚接到物业通知,疫情防控升级了,车辆只能出不能进,每户家庭每天可指派 1 名成员上街采购生活用品.这不是谣言,截个图自证清白,出自洛阳市湖北路街道处. 看来事态严峻,这样看似好心, ...

  7. 《windows程序设计》第三章学习心得

    第三章是基于对一个windows窗口的学习,来达到对windows程序运行机制的理解. 从语言的角度看消息机制,Windows给程序发消息的本质就是调用"窗口过程"函数. Don' ...

  8. 最大连续和（dp复习）

    最大连续和:给出一段序列,选出其中连续且非空的一段使得这段和最大. stdin: 7 2 -4 3 -1 2 -4 3 stdout: 4 状态转移方程:dp[i]=max(dp[i-1]+a[i], ...

  9. @ComponentScan注解，basePackages参数通配符

    @ComponentScan(basePackages = "com.ofo.test")当basePackages的直使用通配符,使用**,不能使用*.引用:https://bl ...

  10. 机器学习（ML）十三之批量归一化、RESNET、Densenet

    批量归一化 批量归一化(batch normalization)层,它能让较深的神经网络的训练变得更加容易.对图像处理的输入数据做了标准化处理:处理后的任意一个特征在数据集中所有样本上的均值为0.标准 ...