圣杯布局：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>圣杯布局</title>

  <!--圣杯布局：-->

  <!--1 搞一个容器，里面放三个盒子-->

  <!--2 设置两侧盒子的宽度 固定-->

  <!--3 设置中间盒子的宽度等于容器的宽度(100%)-->

  <!--4 设置容器的padding等于两侧盒子的宽度-->

  <!--5 让三个盒子在同一方向上浮动-->

  <!--6 设置左边盒子的margin-left = -100%-->

  <!--7 通过定位调整左边的盒子，让左边的盒子不要盖住中间的区域-->

  <!--8 设置右边盒子的margin-left = -自身的宽度-->

  <!--9 通过定位调整右边的盒子，让右边的盒子不要盖住中间的区域-->

  <!--10 给容器设置一个最小的宽度，防治缩小后变形-->

  <style>

    *{

      margin: 0;

      padding: 0;

    }

    .box

    {

      background-color: purple;

      padding-left: 200px;

      padding-right: 200px;

      overflow: hidden;/*清除浮动，方便观察，不是必须的*/

      min-width: 500px;;

    }

    .center{

      width: 100%;

      background-color: green;

      float: left;

      height: 500px;

    }

    .left{

      width: 200px;

      background-color: yellow;

      float: left;

      height: 500px;

      margin-left:-100%;

      position: relative;

      left:-200px;

    }

    .right{

      width: 200px;

      background-color: skyblue;

      float: left;

      height: 500px;

      position: relative;

      margin-left: -200px;

      left: 200px;;

    }

  </style>

</head>

<body>

<div class="box">

  <div class="center">

测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试

  </div>

  <div class="left">

  </div>

  <div class="right">

  </div>

</div>

</body>

</html>

双飞翼布局：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

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

  <!--双飞翼实现步骤-->

  <!--1 搞一个容器，里面放三个盒子-->

  <!--2 设置两侧盒子的宽度(固定)-->

  <!--3 设置中间盒子的宽度等于容器的宽度(100%)-->

  <!--4 让三个盒子都在同一个方向上浮动-->

  <!--5 给中间的盒子添加一个子盒子-->

  <!--6 给子盒子设置margin：0 两侧盒子的宽度-->

  <!--7 设置左边盒子的margin-left：-100%-->

  <!--8 设置右边盒子的margin-left:-自身的宽度-->

  <style>

    *{

      margin: 0;

      padding: 0;

    }

    .box

    {

      background-color: purple;

      overflow: hidden;

      /*min-width: 500px;;*/

    }

    .center{

      width: 100%;

      background-color: green;

      float: left;

      height: 500px;

    }

    .center_in {

      margin: 0 200px;

      height: 500px;

      background-color: pink;

    }

    .left{

      width: 200px;

      background-color: yellow;

      float: left;

      height: 500px;

      margin-left:-100%;

    }

    .right{

      width: 200px;

      background-color: skyblue;

      float: left;

      height: 500px;

      margin-left: -200px;

    }

  </style>

</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>

效果如下：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. Pick the Right Shoes

    shoe-->shoes pointed shoes ballet shoes high heel wedged boots strappy sandals绑带凉鞋 t-straps丁字鞋 co ...

  2. JavaScript中易混淆的DOM属性及方法对比

    JavaScript中易混淆的DOM属性及方法对比 ParentNode.children VS Node.prototype.childNodes ParentNode.children:该属性继承 ...

  3. python开发流程及项目目录规范

    # 项目开发流程 1.调研 2.需求分析   ---产品经理 3.任务分配   ---项目经理 4.写项目demo   ---项目经理.架构师.程序猿 5.架构分析   ---项目经理.架构师 6.编 ...

  4. linux三剑客之grep

    linux基础三剑客之grep 1.grep命令 基本介绍 grep命令是文本本过滤工具,是基于一个模式匹配文件的每一行,grep分类:egrep个fgrep. grep英文名:Global  sea ...

  5. python基础（九）

    一.私有 class DB: port = 3306 #类变量 def __init__(self): self.host = '127.0.0.1' self.__user = 'root' #实例 ...

  6. SQL Server信息偏差影响表联结方式统计

    SQL Server统计信息偏差影响表联结方式案例浅析   我们知道数据库中的统计信息的准确性是非常重要的.它会影响执行计划.一直想写一篇关于统计信息影响执行计划的相关博客,但是都卡在如何构造一个合适 ...

  7. Python实例之抓取HTML中的数据并保存为TXT

    本实例实现了抓取捧腹网中存储于html中的笑话数据(非JSON数据) 通过浏览器相关工具发现捧腹网笑话页面的数据存储在HTML页面而非json数据中,因此可以直接使用soup.select()方法来抓 ...

  8. 加密算法HASH和MD5模块hsahlib

    HASH Hash,一般翻译做"散列",也有直接音译为"哈希"的,就是把任意长度的输入(又叫做预映射,pre-image),通过散列算法,变换成固定长度的输出, ...

  9. JavaList列表的一些方法

    import java.util.ArrayList;import java.util.Iterator;import java.util.List; public class Test1 { pub ...

  10. 常识判断-科技-day123

    PS: 在常识中科技是最难的 PS: 20-2w  HZ是人能听到的频率 PS: 物体的熔点和凝固点是一致的 PS: 氮肥如果多了,可能只是长叶子不结果: 磷肥促进开花结果 PS; 病毒是介于生物和非 ...