CSS_圣杯布局和双飞翼布局
参考:
圣杯布局的来历是2006年发在a list part上的这篇文章:
http://alistapart.com/article/holygrail
双飞翼布局介绍-始于淘宝UED:
http://www.imooc.com/wenda/detail/254035
博客:http://www.cnblogs.com/imwtr/p/4441741.html
理解:
圣杯布局和双飞翼布局均可以实现一个三栏布局:中间栏先加载,然后是左栏,右栏;左右两栏宽度固定,中间栏宽度自适应(会根据浏览器的窗口的大小而变化。)
圣杯布局实现原理:
(1)定义一个div,class为container容器,包含以下三个div,分别表示main(中间栏),left(左栏),right(右栏),注意:div的顺序分别是main,left,right,因为根据HTML文档的加载原理,写在前面的先加载到,所以要把main写在最前面。
(2)让main ,left, right都左浮动。
(2)定义高度。
(3)定义宽度:main为100%,left和right可以为一个固定的宽度,eg:300px;
(4)由于main的宽度有100%,所以会left和right会被挤到下面。
此时需要定义左栏left浮动到最左边:margin-left : -100%;同理定义右栏浮动到最右边:margin-left:-300px;
(5)通过以上四步,实现了三栏,中间自适应布局,但是由于main的宽度是100%,此时main中的内容是会被left和right遮挡住的。
因此需要为container容器定义padding-left和padding-right,宽度分别为left和right的宽度,但是这样会导致left和right也会更着过来,不再是在浏览器窗口的最左端和最右端,如下图所示:(红色画圈部分为设置的padding,这里还是会遮挡住main的内容。)
(6)对left和right进行相对定位:分别是:left:-300px;right:-300px;使其回到浏览器的最左端和最右端。自此,完成,main的内容也不会被遮挡了。
1.圣杯布局(完整代码)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
min-width: 700px;
}
.clearfloat:after{
display: block;
clear:both;
content: "";
visibility: hidden;
height: 0;
}
.container{
overflow: hidden;
padding: 0 300px;
}
.col{
position: relative;
height: 700px;
float: left;
color: #fff;
}
.left,.right{
width: 300px;
background-color: #3b3b3b;
}
.main{
width: 100%;
background-color: #b3b3b3;
}
.left{
margin-left: -100%;
left: -300px;
}
.right{
margin-left:-300px;
right: -300px;
} </style>
</head>
<body>
<div class="container .clearfloat">
<div class="main col">main</div>
<div class="left col">left</div>
<div class="right col">right</div>
</div>
</body>
</html>
双飞翼布局实现原理:
双飞翼布局的前四步和圣杯布局是相同的,只是在处理main内容被遮挡的方法不同:双飞翼布局采用的方法是为main加一个div的遮罩,为这个遮罩设置margin-left和margin-right,左栏和和右栏宽度都为300px的div,遮罩可以这样设置:margin:0 300px;
2.双飞翼布局(完整代码)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
min-width: 700px;
}
.clearfloat:after{
display: block;
clear:both;
content: "";
visibility: hidden;
height: 0;
}
.col{
height: 700px;
float: left;
color: #fff;
}
.left,.right{
width: 300px;
background-color: #3b3b3b;
}
.main{
width: 100%;
background-color: #b3b3b3;
}
.main-wrap{
margin: 0 300px;
}
.left{
margin-left: -100%;
}
.right{
margin-left: -300px;
}
</style>
</head>
<body>
<div class="container .clearfloat">
<div class="main col">
<div class="main-wrap">
main
</div>
</div>
<div class="left col">left</div>
<div class="right col">right</div>
</div>
</body>
</html>
CSS_圣杯布局和双飞翼布局的更多相关文章
- 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布局笔记(三)圣杯布局,双飞翼布局
圣杯布局和双飞翼布局都是三列布局,两边定宽,中间自适应布局,中间栏要在放在文档流前面以优先渲染. 圣杯布局如下 <!-- 圣杯布局 --> <!DOCTYPE html> &l ...
- CSS布局之圣杯布局和双飞翼布局
其实圣杯布局和双飞翼布局实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应,也就是我们常说的固比固布局.它们实现的效果都是一样的,差别在于其实现的思想. 一.圣杯布局 html代码中,将重要的内容 ...
- CSS | 圣杯布局、双飞翼布局 | 自适应三栏布局
圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局 虽然两者的实现方法略有差异,不过都遵循了以下要点: 1.两侧宽度固定 ...
- CSS圣杯布局、双飞翼布局详解
三栏布局中,经典中的经典应该就是圣杯布局.双飞翼布局没跑了.双飞翼布局和圣杯布局其实是一样的,只不过在写法上有些不同,其布局都是左右固定宽度,中间宽度自适应. 先熟悉一下圣杯布局.双飞翼布局中的特点: ...
- CSS经典布局——圣杯布局与双飞翼布局
一.圣杯布局和双飞翼布局的目的 实现三栏布局,中间一栏最先加载和渲染 两侧内容固定,中间内容随着宽度自适应 一般用于PC网 二.圣杯布局的实现 技术要点: 设置最小宽度min-width 使用floa ...
- css两栏布局、圣杯布局、双飞翼布局
最近几个月一直用vue在写手机端的项目,主要写业务逻辑,在js方面投入的时间和精力也比较多.这两天写页面明显感觉css布局方面的知识有不足,所以复习一下布局方法. 两栏布局 1.浮动 .box1 .l ...
随机推荐
- React 记录(6)
React文档:https://www.reactjscn.com/docs/react-component.html 慢慢学习:对照教程文档,逐句猜解,截图 React官网:https://reac ...
- OpenStack VS Kubernetes,谁是你心中的王者?
当下云计算的领域里热度最高的两个项目,无疑是OpenStack和Kubernetes.如果云计算是一个风起云涌的江湖,毫不夸张的说OpenStack和Kubernetes就是江湖里的泰山北斗.Op ...
- 02 Redis关闭服务报错---(error) ERR Errors trying to SHUTDOWN. Check logs.
127.0.0.1:6379> shutdown (error) ERR Errors trying to SHUTDOWN. Check logs. 1.在redis.conf中修改日志文件的 ...
- UE4材质特别属生记录
tangent space normal 切线空间法线 材质默认使用的切线空间法线,可切换为对象空间法线(彩色贴图) Separate Translucency 单独半透明 允许半透明被渲染到一个单独 ...
- Django-1-URL路由系统
一.分发地址 在APP中创建urls.py文件,将属于该APP的url地址都写入到这个文件中,当程序收到用户发送的请求时,先在根目录的urls.py文件中查找该地址属于哪个APP,将这个请求分发到该A ...
- Xpath初了解
如下一段html: <html> <body> <form id="loginForm"> <input name="usern ...
- openssl-1.1.0g reference
include/openssl aes.h: struct aes_key_st { aes.h: unsigned long rd_key[4 * (AES_MAXNR + 1)]; aes.h: ...
- 【原创】Java基础之常用JVM工具
查看当前所有java进程 # jps 查看某个进程的堆内存占用情况 # jmap -heap $pid 查看某个进程的堆内存中对象分布情况 # jmap -histo $pid 将某个进程的堆内存导出 ...
- [Linux]ln -al输出内容解析
第一项的第一位是文件类型:-: 表示普通文件d: 目录b: 块特殊文件c: 字符特殊文件l: 符号链接文件p: 命名管道文件FIFOs: 套接字文件 第二项是该文件的inode的链接计数,即stat ...
- 列表生成式,迭代器&生成器
python3中range(10)就 是迭代器 列表生成式 #列表生成式 a=[0,1,2,3,4,5] b=[] for index,i in enumerate(a): a[index]+1 pr ...