圣杯布局：

<!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. Android KitKat Immersive Mode使用

    写了一个方法,在onCreate和onResume中调用即可,4.4以上可用. private void openImmersiveMode() { if (android.os.Build.VERS ...

  2. python request 和requests 的区别

    说明: 这里主要记录一下requests模块的如下几点: 1.requests模块的安装 2.requests模块发送get请求 3.requests模块发送post请求 4.requests模块上传 ...

  3. Go获取美元实时汇率

    package main import ( "encoding/json" "fmt" "io/ioutil" "net/http ...

  4. JVM垃圾收集器-Parallel Scavenge收集器

    今天我给大家讲讲JVM垃圾收集器-Parallel Scavenge收集器 Parallel Scavenge收集器 Parallel Scavenge收集器也是一个新生代收集器,它也是使用复制算法的 ...

  5. 使用find命令查找文件

    find命令用法 语法: find (选项) (参数) 常用选项: -exec<执行命令>: 假设find指令的回传值为True,就执行该指令; -ls: 假设find指令的回传值为Tru ...

  6. install MariaDB 10.2 on Ubuntu 18

    Here are the commands to run to install MariaDB 10.2 from the MariaDB repository on your Ubuntu syst ...

  7. 引擎设计跟踪(九.14.3.3) Deferred shading的一些小细节

    1.ambient light 之前的shader里面, 方向光会加上ambient 的计算. 但是如果没有方向光, 就没有ambient. 这是把全局方向光改为点光源之后发现的, 因为透明物体的fo ...

  8. git编译安装

    因yum安装的git版本过低,所以尝试使用编译安装git 以下为编译安装时执行的命令 tar xf git-2.9.5.tar.gz cd git-2.9.5yum install curl-deve ...

  9. 使用python调用其他脚本

    cmd = '<command line string>' print(cmd) p = subprocess.Popen(args=cmd, shell=True, stdout=sub ...

  10. obs源码uml