CSS经典布局——圣杯布局与双飞翼布局
一、圣杯布局和双飞翼布局的目的
- 实现三栏布局，中间一栏最先加载和渲染
- 两侧内容固定，中间内容随着宽度自适应
- 一般用于PC网
二、圣杯布局的实现
技术要点：
- 设置最小宽度min-width
- 使用float布局，注意清除浮动
- 使用margin负值
- 对三栏整体区域设置左右内边距，宽度为left和right的宽度，避免内容重叠
- 使用定位
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 <title>圣杯布局</title>
9 </head>
10 <style>
11 body {
12 //设置屏幕最小宽度
13 min-width: 500px;
14 text-align: center;
15 }
16
17 header,
18 footer {
19 width: 100%;
20 background-color: grey;
21 }
22
23 section {
24 /*清除浮动*/
25 overflow: hidden;
26 /*左右设置内边距*/
27 padding-left: 150px;
28 padding-right: 200px;
29 }
30
31 #center {
32 width: 100%;
33 background-color: red;
34 }
35
36 #left {
37 /* 相对自身的定位 */
38 position: relative;
39 width: 150px;
40 /*向左平移一个父元素的宽度 */
41 margin-left: -100%;
42 /* 向左平移150px */
43 right: 150px;
44 background-color: pink;
45 }
46
47 #right {
48 width: 200px;
49 /* 可以当做right右侧元素向左平移200px，将right元素挤到上面一排显示。注：这里由于浮动，中间的元素都是连接在一起的，也就是说center与right是首尾相连的 */
50 margin-right: -200px;
51 background-color: yellow;
52 }
53
54 .culomn {
55 float: left;
56 }
57 </style>
58
59 <body>
60 <header>this is header</header>
61 <section>
62 <div id="center" class="culomn">this is center</div>
63 <div id="left" class="culomn">this is left</div>
64 <div id="right" class="culomn">this is right</div>
65 </section>
66 <footer>this is footer</footer>
67 </body>
68 </html>
三、双飞翼布局的实现
技术要点：
- 设置最小宽度min-width
- 使用float布局，注意清除浮动
- 使用margin负值（双飞翼布局不需要使用margin-right负值）
- 对center设置左右外边距，避免与侧边栏内容重叠
代码如下：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>双飞翼布局</title>
</head>
<style>
body {
min-width: 500px;
} header,
footer {
text-align: center;
width: 100%;
background-color: grey;
} #contain {
width: 100%;
} #center {
/* 对center元素设置左右外边距，分别是left和right元素的宽度，避免内容重叠 */
margin-left: 150px;
margin-right: 200px;
background-color: red;
} #left {
width: 150px;
/* left元素向左平移一个父元素的宽度 */
margin-left: -100%;
background-color: pink; } #right {
width: 200px;
/* right元素向左平移自身的宽度 */
margin-left: -200px;
background-color: yellow;
} .culomn {
float: left;
text-align: center;
} /* 清除浮动 */
footer {
clear: both;
}
</style> <body>
<header>this is header</header>
<section>
<div id="contain" class="culomn">
<div id="center">this is center</div>
</div>
<div id="left" class="culomn">this is left</div>
<div id="right" class="culomn">this is right</div>
</section>
<footer>this is footer</footer>
</body> </html>
圣杯布局与双飞翼布局效果图如下：
四、圣杯布局与双飞翼布局的区别
- 圣杯布局使用了margin-right负值，相对来说比较难理解
- 圣杯布局设置的是内边距padding，避免内容重叠。而双飞翼布局是给center元素添加了一个父盒子，只需要设置center的外边距即可避免与左右侧边栏重叠
五、总结
圣杯布局和双飞翼布局的技术总结：
- 使用了float布局
- 两侧使用margin负值，以便和中间内容横向重叠
- 防止中间内容被两侧覆盖，一个用padding，一个用margin
CSS经典布局——圣杯布局与双飞翼布局的更多相关文章
- CSS布局 -- 圣杯布局 & 双飞翼布局
按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应. 但在这里实现起来还是有一些区别的 [圣杯布局] 在这里,实现了左(200px) 右(220px) 宽度固定,中 ...
- css中的圣杯布局和双飞翼布局
圣杯布局 布局要求: 三列布局,中间自适应,两边定宽 中间栏要在浏览器优先渲染 允许任意列的高度最高 用最简单的CSS.最少的HACK语句 解释说明: 1.min-width:700px是为了当页面缩 ...
- 双飞翼布局介绍-始于淘宝UED
仔细分析各种布局的技术实现,可以发现下面三种技术被经常使用: 浮动 float 负边距 negative margin 相对定位 relative position 这是实现布局的三个最基本的原子技术 ...
- 双飞翼布局介绍-始于淘宝UED-2011年淘宝玉伯写的
仔细分析各种布局的技术实现,可以发现下面三种技术被经常使用: 浮动 float 负边距 negative margin 相对定位 relative position 这是实现布局的三个最基本的原子技术 ...
- HTML特殊布局--------双飞翼布局
今天看到以前写的一篇布局的例子分享给大家,双飞翼布局. 什么是双飞翼布局?? 1.三列布局,中间宽度自适应,两边固定宽度; 2.中间栏在浏览器中优先展示渲染: 双飞翼布局的原理: 中间的盒子定100% ...
- CSS布局经典—圣杯布局与双飞翼布局
在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...
- CSS经典布局-圣杯布局、双飞翼布局
圣杯布局的来历是2006年发在a list part上的这篇文章:In Search of the Holy Grail · An A List Apart Article圣杯是西方表达“渴求之物&q ...
- 中间自适应，左右定宽的两种经典布局 ---- 圣杯布局 VS 双飞翼布局
一.引子 最近学了些js框架,小有充实感,又深知如此节奏的前提需得基础扎实,于是回头想将原生CSS和Javascript回顾总结一番,先从CSS起,能集中它的就在基础的布局上,便查阅了相关资料,将布局 ...
- CSS之圣杯布局与双飞翼布局
圣杯布局 三行等高 HTML: <!DOCTYPE html><html><head> <meta charset="utf-8"& ...
随机推荐
- ELK学习实验020：ELK使用kafka缓存
首先安装一个kafka集群,但是zookeeper使用单节点,可以让kafka快速跑起来,后续再研究kafka和zokkeeper的集群 1 安装Kafka集群 下面是三个节点都要做 [root@no ...
- shell基础之后台运行脚本
使shell脚本后台执行,基本的方法有两种,第一种为在脚本后面追加&符号,第二种为在脚本前面使用nohup命令,结尾再追加&符号 一.后台运行脚本1 1.执行脚本test.sh:./t ...
- 第六章 XaaS和IT服务标准
从云计算(Cloud Computing)谈起 云计算是一种按使用量付费的模式,这种模式提供可用的.便捷的.按需的网络访问,进入可配置的计算资源共享池(资源包括网络,服务器,存储,应用软件,服务),这 ...
- SUSE12 操作系统安装
今天开发同事需要一个客户的SUSE环境,原来没有安装过这个操作系统,网络配置方面有些问题见下一篇 镜像:SLE-12-SP3-Server-DVD-x86_64-GM-DVD1.iso 安装过程: 选 ...
- Oracle和MySQL差异总结
常用功能差异 锁差异: • Oracle锁加在数据块上 • InnoDB 是在索引上加锁,所以MySQL锁的粒度没有Oracle 精细. 导入导出: • Oracle采用EXP /IMP ,EXPDP ...
- 实践指南-网页生成PDF
一.背景 开发工作中,需要实现网页生成 PDF 的功能,生成的 PDF 需上传至服务端,将 PDF 地址作为参数请求外部接口,这个转换过程及转换后的 PDF 不需要在前端展示给用户. 二.技术选型 该 ...
- 如何优雅的做参数校验-JSR330
前言: 本文不是讲@Validate.@Valid是如何使用的.区别是什么,想看这些内容的请换篇文章. 背景: 当前端传过来的参数是进行对称性加密.base64加密等处理后过的参数时,在control ...
- GO学习-(5) Go语言基础之基本数据类型
Go语言中有丰富的数据类型,除了基本的整型.浮点型.布尔型.字符串外,还有数组.切片.结构体.函数.map.通道(channel)等.Go 语言的基本类型和其他语言大同小异. 基本数据类型 整型 整型 ...
- 转载 | Scala 如何避免使用 Null
在 Java 里,null 是一个关键字,不是一个对象,所以对它调用任何方法都是非法的. Scala 的 Option类型 Scala在变量和函数返回值可能不会引用任何值的时候使用 Option 类型 ...
- Windows家庭版打开或关闭Hyper-V
打开hyper-v 创建open_hyper-v.bat文件 pushd "%~dp0" dir /b %SystemRoot%\servicing\Packages\*Hyper ...