工作的越久,有些基础知识我们可能就逐渐淡忘了,今天我们来回顾一下css的圣杯布局和双飞翼布局,

这两个名词你可能不熟, 那三栏布局你肯定就非常熟悉了,

就是两边定宽, 中间自适应 的 布局

1 , 圣杯布局

<!--三栏布局-->
<header>三栏布局</header>
<div class="container">
<div class="center column">center</div>
<div class="left column">left</div>
<div class="right column">right</div>
</div>
<footer>footer</footer>

首先HTML结构是这样的,因为要保证中间的结构先渲染, 所以 center 要放在 最前面 。

*{
margin: 0;
padding: 0;
}
body{
min-width: 700px;
}
header , footer{
background-color: antiquewhite;
text-align: center;
}
footer{
clear: both;
}
.container{
height: 200px;
}
.container .column{
float: left;
position: relative;
height: 100%;
}
.center{
width: 100%;
background-color: tomato;
}
.left{
width: 200px;
background-color: aqua;
}
.right{
width: 200px;
background-color: chartreuse;
}

先让它们浮动, 并给left 和 right 一个 固定 宽度, center宽度100%,

footer清除浮动流, 结果变成上面这样  。

然后我们要把 left  和 right 放上去

先把left 放上去  :

.left{
width: 200px;
background-color: aqua;
margin-left: -100%;
}

加上 一个 margin-left 为  负的自己的宽度  , 变成了这样:

我们可以看到 center的文字被 left  盖住了  , 所以给container加一个padding

.container{
height: 200px;
padding: 0 200px;
}

变成了这样:

由于加了padding, 内容区域变小, left 也跟过来了, 所以要给left设置一个left:

.left{
width: 200px;
background-color: aqua;
margin-left: -100%;
left: -200px;
}

这样left 就到最左边了, center文字也出来了, 同理right

.right{
width: 200px;
background-color: chartreuse;
margin-left: -100%;
right: -100%;
}

最终效果:

2   双飞翼布局(始于淘宝的UED)

和圣杯布局差不多, 不同之处在于它们处理中间部分被两边盖住的方法不同

双飞翼布局给center加了一个inner center ,而不是在最外层加container

HTML:

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

<div class="center column">
<div class="inner-center">
center
</div>
</div>
<div class="left column">left</div>
<div class="right column">right</div> <footer>footer</footer>

然后 给 inner-center  加margin  (只列出关键代码) :

.center .inner-center{
margin-left: 200px;
margin-right: 200px;
height: 100%;
background-color: tomato;
}
.left{
width: 200px;
background-color: aqua;
margin-left: -100%;
}
.right{
width: 200px;
background-color: chartreuse;
margin-left: -200px;
}

最终效果和圣杯布局一样。。。。。。

CSS 圣杯布局 / 双飞翼布局的实现的更多相关文章

  1. CSS(五)圣杯,双飞翼布局

    双飞翼布局 <style> *{ margin:; padding:; } .main{ width: 100%; height: 200px; background: pink; flo ...

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

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

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

    圣杯布局 和 双飞翼布局 是重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局. 遵循了以下要点: 两侧宽度固定,中间宽度自适应 中间部分在DOM结构上优先,以便先行 ...

  4. css布局 -双飞翼布局&圣杯布局

    一,双飞翼布局 左右两边固定,中间可以随着浏览器放大和缩小 <!DOCTYPE html> <html lang="en"> <head> &l ...

  5. 【布局】圣杯布局&双飞翼布局

    背景 随着前端技术的发展推进,web端的布局方式已基本成熟,那么在网站布局方式中,三列布局最为常用,布局方式也有很多,渐渐的开发者们开始从效率的角度优化自己的代码"如果三排布局能将中间的模块 ...

  6. 3种常见的CSS页面布局--双飞翼布局、粘连布局、左右两列布局

    一.左右两列布局 1.代码如下,可先粘贴复制,自行运行 <!DOCTYPE html><html> <head> <meta charset="UT ...

  7. css布局-双飞翼布局

    <div class="header">Header</div> <div class="bd"> <div clas ...

  8. HTML特殊布局--------双飞翼布局

    今天看到以前写的一篇布局的例子分享给大家,双飞翼布局. 什么是双飞翼布局?? 1.三列布局,中间宽度自适应,两边固定宽度; 2.中间栏在浏览器中优先展示渲染: 双飞翼布局的原理: 中间的盒子定100% ...

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

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

随机推荐

  1. No module named zope.interface error的解决

    明明安装了 zope.interface,还是出现标题错误,错误语句是 from zope.interface import ooxx 根据 http://stackoverflow.com/ques ...

  2. Docker快速入门(二)

    上篇文章<Docker快速入门(一)>介绍了docker的基本概念和image的相关操作,本篇将进一步介绍image,容器和Dockerfile. 1 image文件 (1)Docker ...

  3. 基于Python的数据分析(3):文件和时间

    在接下来的章节中,我会重点介绍一下我自己写的基于之前做python数据分析的打包接口文件common_lib,可以认为是专用于python的第三方支持库.common_lib目前包括文件操作.时间操作 ...

  4. Oracle12c中分区(Partition)新特性之TRUNCATEPARTITION和EXCHANGE PARTITION级联功能

    TRUNCATE [SUB]PARTITION和EXCHANGE [SUB]PARTITION命令如今可以包括CASCADE子句,从而允许参照分区表向下级联这些操作.为确保该选项正常,相关外键也必须包 ...

  5. ELK 架构之 Elasticsearch 和 Kibana 安装配置

    阅读目录: 1. ELK Stack 简介 2. 环境准备 3. 安装 Elasticsearch 4. 安装 Kibana 5. Kibana 使用 6. Elasticsearch 命令 最近在开 ...

  6. spring事务机制

    一.Java动态代理 1.定义 Java动态代理是利用反射机制生成一个实现代理接口的匿名类,在调用具体方法前调用InvokeHandler来处理. 默认情况下会采用JDK的动态代理实现AOP . 2. ...

  7. QT中的相对位置,绝对位置之间的转换(maptoglobal,mapfromglobal)

    1. 相对位置:每个Qwidget都能通过pos()获取到相对自己父类窗口的位置, 2. 绝对位置:pWidget->mapToGlobal(QPoint(0,0)) ;将当前控件的相对位置转换 ...

  8. Cookie与 Session使用详解

    Cookie概念 在浏览某些 网站 时,这些网站会把 一些数据存在 客户端 , 用于使用网站 等跟踪用户,实现用户自定义 功能. 是否设置过期时间: 如果不设置 过期时间,则表示这个 Cookie生命 ...

  9. UISegmentedControl在Swift中的使用

    UISegmentedControl控件是分段显示控件,用户可以选择它上展示的任一段部分,每一个部分都像是一个按钮,如果被按下也会像UIButton一样执行相应的方法.在这篇文章中我们将创建一个UIS ...

  10. SSM-MyBatis-14:Mybatis中智能标签

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 谈论到智能,有什么要想的没有? 我下面放张图 相信都见过这个吧,你在之前没有学习过框架的时候怎么写的,动态sq ...