【CSS】 布局之圣杯布局
在看众多大神的css布局指南时，经常看到一个布局：圣杯布局（也有称为双飞翼布局的）。今天我们也来剖析一下。
其实，对于众多css布局，我们只要明确理解了3种技术，那么基本上大多数布局都难不倒我们了：
浮动 float
绝对定位和相对定位 negative margin
负边距 relative position
浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。（w3c）
上面是官方的界定。我们可以用"float:left"和"float:right"来使元素块向左向右浮动。
当一个元素块被浮动后，其在原文档流中的空间被关闭，后面的内容会向前补充，这样很容易造成后面的元素包围了浮动的元素块。
为了解决这个问题，我们可以用clear方法来阻止行框包围元素块。
绝对定位和相对定位
我们通过position属性来声明这个元素块进行绝对定位或者相对定位。如果要进行定位的是行内元素，首先需要用display:block来将其声明为一个块级元素。
两者的区别为：
相对定位是相对于自身在文档流中的原有位置的起点为基准进行位移定位。其在文档流中的位置不会被关闭。
绝对定位是相对于最接近的已定位父元素的起点为基准，如果没有已定位的父元素，则为其最初的包含快，也就是body。绝对定位相对于相对定位的不同，是其在文档流中的元素框被关闭，该位置被后面的元素填充。
负边距
在css中，有两种边距，分别为内边距padding和外边距margin。
内边距padding是元素内动与边框之间的距离，外边距margin为元素边框到父元素框外边距之间的距离。
内边距padding只能设置为正值，而外边距margin可以设置为正值也可以设置为负值。
我们还需要了解一点，元素的背景是可以占用内边距padding距离的。
了解了以上三种方法，我们就可以通过这三种方法来实现我们的各种布局。
这包括了下面介绍的圣杯布局：
先写一个基本布局：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>圣杯布局/双飞翼布局</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
text-Align: center;
}
#parents {
width: 600px;
border: 2px solid;
margin: 0 auto;
}
#top {
background: #666;
}
#left {
background: #E79F6D;
}
#content {
background: #D6D6D6;
}
#right {
background: #77BBDD;
}
#foot {
background: #666;
}
</style>
</head>
<body>
<div id="parents">
<div id="top">这是Top!</div>
<div id="main">
<div id="left">这是Left!</div>
<div id="content">这是Content!</div>
<div id="right">这是Right!</div>
</div>
<div id="foot">这是Foot!</div>
</div>
</body>
</html>
效果：
我们将中间left、content和right向左浮动，并设置left和right的宽度分别设置为100px和150px，将三者的父元素的左右内边距设置为100px和150px，与left和right的宽度相同。然后我们将foot清除浮动。
<style type="text/css">
* {
margin: 0;
padding: 0;
text-Align: center;
}
#parents {
width: 600px;
border: 2px solid;
margin: 0 auto;
}
#top {
background: #666;
}
#main {
margin-left: 100px;
margin-right: 150px;
}
#left {
background: #E79F6D;
float: left;
width: 100px;
}
#content {
background: #D6D6D6;
float: left;
width: 100%;
}
#right {
background: #77BBDD;
float: left;
width: 150px;
}
#foot {
background: #666;
clear: both;
}
</style>
效果：
我们发现，由于content宽度设置了100%，故而其宽度不够，所以content和right就掉下来了，对于这个我们可以为content和right设置一个margin-left属性来解决这个问题。
#left {
background: #E79F6D;
float: left;
width: 100px;
}
#content {
background: #D6D6D6;
float: left;
width: 100%;
margin-left: -100px;
}
#right {
background: #77BBDD;
float: left;
width: 150px;
margin-left: -150px;
}
效果：
上图中left被content挡住了。
随后，我们用相对定位把left向左移，right向右移。并把top和foot设置高度为50px;
#top {
background: #666;
height: 50px;
}
#main {
padding-left: 100px;
padding-right: 150px;
}
#left {
background: #E79F6D;
float: left;
width: 100px;
position: relative;
left: -100px;
}
#content {
background: #D6D6D6;
float: left;
width: 100%;
margin-left: -100px;
}
#right {
background: #77BBDD;
float: left;
width: 150px;
margin-left: -150px;
position: relative;
left: 150px;
}
#foot {
background: #666;
clear: both;
height: 50px;
}
效果：
看起来差不多了，不过我们还需要处理一个问题，就是中间三列的等高问题，这个是在前面已经探讨过的多列等高问题。
<style type="text/css">
* {
margin: 0;
padding: 0;
text-Align: center;
}
#parents {
width: 600px;
border: 2px solid;
margin: 0 auto;
}
#top {
background: #666;
height: 50px;
}
#main {
padding-left: 100px;
padding-right: 150px;
overflow: hidden;
}
#left,#content,#right {
padding-bottom: 2000px;
margin-bottom: -2000px;
}
#left {
background: #E79F6D;
float: left;
width: 100px;
position: relative;
left: -100px;
}
#content {
background: #D6D6D6;
float: left;
width: 100%;
margin-left: -100px;
}
#right {
background: #77BBDD;
float: left;
width: 150px;
margin-left: -150px;
position: relative;
left: 150px;
}
#foot {
background: #666;
clear: both;
height: 50px;
}
</style>
效果:
这样就没问题了，当我们给三者无论哪个添加内容时，三列的高度总会以最高的那列为准维持等高。
在这个布局中，主要内容content的宽度是自适应的，而left和right的宽度是固定的，当我们增加parents的宽度时，content的宽度随之增加，left和right保持不变。
这就是圣杯布局，也有叫做双飞翼布局的。
而且我们通过相对定位，可以通过计算，随意定制left、content和right三者的前后顺序。
关于圣杯布局，引用一下CobbySung总结的优缺点:
优点:
- 实现了内容与布局的分离，即Eric提到的Any-Order Columns.
- content部分是自适应宽度的，很容易在定宽布局和流体布局中切换。
- 任何一栏都可以是最高栏，不会出问题。
- 需要的hack非常少（就一个针对ie6的清除浮动hack:_zoom: 1;）
- 在浏览器上的兼容性非常好，IE5.5以上都支持。
不足:
- content需要添加一个额外的包裹层。
- 等待你的发现与反馈。
最后附上完整代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>圣杯布局/双飞翼布局</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
text-Align: center;
}
#parents {
width: 1000px;
border: 2px solid;
margin: 0 auto;
}
#top {
background: #666;
height: 50px;
}
#main {
padding-left: 100px;
padding-right: 150px;
overflow: hidden;
}
#left,#content,#right {
padding-bottom: 2000px;
margin-bottom: -2000px;
}
#left {
background: #E79F6D;
float: left;
width: 100px;
position: relative;
right: 150px;
left: 100px; }
#content {
background: #D6D6D6;
float: left;
width: 100%;
margin-left: -100px;
position: relative;
left: -100px;
}
#right {
background: #77BBDD;
float: left;
width: 150px;
margin-left: -150px;
position: relative;
left: 150px;
}
#foot {
background: #666;
clear: both;
height: 50px;
}
</style>
</head>
<body>
<div id="parents">
<div id="top">这是Top!</div>
<div id="main">
<div id="left">这是Left!</div>
<div id="content">这是Content!<br><br><br><br>这是多行高度！<br></div>
<div id="right">这是Right!</div>
</div>
<div id="foot">这是Foot!</div>
</div>
</body>
</html>
【CSS】 布局之圣杯布局的更多相关文章
- CSS布局经典—圣杯布局与双飞翼布局
在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...
- css布局记录之双飞翼布局、圣杯布局
双飞翼布局和圣杯布局是比较常用的布局方式,都是为了实现一行三列,并且两侧列固定宽度,中间列宽度自适应的效果:直接上代码记录下: <!DOCTYPE html> <html lang= ...
- CSS布局之圣杯布局和双飞翼布局
其实圣杯布局和双飞翼布局实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应,也就是我们常说的固比固布局.它们实现的效果都是一样的,差别在于其实现的思想. 一.圣杯布局 html代码中,将重要的内容 ...
- css中的圣杯布局和双飞翼布局
圣杯布局 布局要求: 三列布局,中间自适应,两边定宽 中间栏要在浏览器优先渲染 允许任意列的高度最高 用最简单的CSS.最少的HACK语句 解释说明: 1.min-width:700px是为了当页面缩 ...
- css display:table圣杯布局
圣杯布局指的是一个网页由页眉,3等高列(2个固定侧栏和中心内容主体)和贴在页面底部的页脚组成. 主要思路是对整个容器使用地上diaplay:table 的css规则,然后分别对页眉页脚使用displa ...
- 几种常见的css布局_l流体布局、圣杯布局、双飞翼布局
1.流体布局: <!DOCTYPE html><html> <head> <meta charset="utf-8"> <ti ...
- css两栏布局、圣杯布局、双飞翼布局
最近几个月一直用vue在写手机端的项目,主要写业务逻辑,在js方面投入的时间和精力也比较多.这两天写页面明显感觉css布局方面的知识有不足,所以复习一下布局方法. 两栏布局 1.浮动 .box1 .l ...
- CSS中的圣杯布局与双飞翼布局
一,圣杯布局 1,什么是圣杯布局? 所谓圣杯布局就是用于实现一个两侧宽度固定,中间宽度自适应的三栏布局 2,构建圣杯布局的步骤: 2.1,添加一个容器,在这个容器中添加放三个盒子(左.中.右): 2. ...
- 【布局】圣杯布局&双飞翼布局
背景 随着前端技术的发展推进,web端的布局方式已基本成熟,那么在网站布局方式中,三列布局最为常用,布局方式也有很多,渐渐的开发者们开始从效率的角度优化自己的代码"如果三排布局能将中间的模块 ...
随机推荐
- SpringCloud 教程 | 第一篇： 服务的注册与发现Eureka(Finchley版本)
一.spring cloud简介 鉴于<史上最简单的Spring Cloud教程>很受读者欢迎,再次我特意升级了一下版本,目前支持的版本为Spring Boot版本2.0.3.RELEAS ...
- JavaScript函数参数问题
声明一个回调函数 function(){ alert(data); } 这个时候,若调用这个函数的传入了一个同名data,则这里会引用到data的值,因为他们处于同一作用域.
- 利用 StartLoadingStatus 和 FinishLoadingStatus 读取数据特别是大数据时增加渐隐渐显等待特效 - Ehlib学习(三)
代码很简单: DBGrideh.StartLoadingStatus(' Loading ... '); Sleep(500); DBGrideh.FinishLoadingStatus; 做下变动: ...
- .net 有参属性 index （索引）
public class IndexTempte { public ArrayList nameList = new ArrayList(); public string this[int index ...
- Backup--压缩备份和数据库压缩
1> 即使数据库启用了页压缩或行压缩,压缩备份也可以有效减小备份的大小,压缩备份的压缩效率取决于表中的数据类型 2> 数据库压缩有利于降低备份时间(因为数据库变小) 3> 对已启用压 ...
- Partition--分区切换
现有数据表[dbo].[staging_TB1_20131018-104722]和分区表[dbo].[TB1],需要将分区表和数据表中做数据交换 CREATE TABLE [dbo].[staging ...
- 实战iOS7之NSURLSession
NSURLSession VS NSURLConnection NSURLSession可以看做是NSURLConnection的进化版,其对NSURLConnection的改进点有: * 根据每个S ...
- pycharm中使用git
注册GitHub https://www.jb51.net/article/135606.htm pycharm中配置git https://www.cnblogs.com/feixuelove100 ...
- Python短路原则
1.括号内逻辑先执行 2.and优先级大于or 3.and一假为假 4.or一真为真 and:如果左边为假,返回左边值.如果左边不为假,返回右边值. or:如果左边为真,返回左边值.如果左边不为真,返 ...
- Sql2012 AlwaysOn
准备: 两台宿主机,两台虚拟机,一根交叉线 系统都是windows server 2012 步骤 1.两台虚拟机均为双网卡 2.配置故障转移群集 3.执行AlwaysOn配置(增加Listen此步骤上 ...