前端css：“圣杯布局”
昨天面试前端，一面危险通过，面试官建议我看看“圣杯布局”，听起来很玄妙的名字，花了一晚上弄明白怎么回事，惊讶于前端工作的细节和技巧！
我先看几个基础，在后面要用到的：
1.CSS right/left 属性
right/left属性规定元素的右/左边缘。定义了定位元素右/左外边，与其包含块右/左边界之间的偏移。
right:50px：设置元素位置，使其右边缘距离其包含元素的右边缘5。它的右边和包含它的元素的右边之间的距离5px；
<html>
<head>
<style type="text/css"></style>
<meta charset="UTF-8">
<style type="text/css">
.left {
position:absolute;
background: red;
right: 10px;
}
</style>
</head>
<body>
<div class="left">
pppppppppppp<br />
</div>
</div>
</body>
</html>
元素位于最右侧距离窗口右侧10px处；
2.margin-left:-100% 这种表示中负数什么意思？
先看一个例子：
<html>
<head>
<style type="text/css"></style>
<meta charset="UTF-8">
<style type="text/css">
.center {
float:left;
width:600px;
background:red;
}
.left {
float:left;
width:170px;
background:blue;
border:1px solid green;
}
</style>
</head>
<body>
<div class="wrap">
<div class="center">
<div class="box">
tttttttttttttt<br />
tttttttttttttt<br />
tttttttttttttt<br />
tttttttttttttt<br />
tttttttttttttt<br />
tttttttttttttt<br />
tttttttttttttt<br />
tttttttttttttt<br />
tttttttttttttt<br />
</div>
</div>
<div class="left">
pppppppppppp<br />
pppppppppppp<br />
pppppppppppp<br />
pppppppppppp<br />
pppppppppppp<br />
</div>
</div>
</body>
</html>
我们知道，浮动的元素，只有在位置不够的时候才会被挤到第二行。上面两个div都有足够的位置，所以排在一行没有换行：
使用margin-left:-600px;后是这样：
<style type="text/css">
.center {
float:left;
width:600px;
background:red;
}
.left {
float:left;
width:170px;
background:blue;
border:1px solid green;
margin-left:-600px;
}
</style>
margin-left：10px 是左边距10px，效果是content向右移10px，那么-10px就是content，就是蓝色块向左移10px；
这里刚好移动-600px达到红色box的左边！
如果红色块如果宽度设置为100%，蓝色块只浮动，不使用margin左负值，后面的元素是会被挤在第二行的。
<style type="text/css">
.center {
float:left;
width:100%;
background:red;
}
.left {
float:left;
width:170px;
background:blue;
border:1px solid green;
}
</style>
如果把宽度设为-100%：
<style type="text/css">
.center {
float:left;
width:100%;
background:red;
}
.left {
float:left;
width:170px;
background:blue;
border:1px solid green;
margin-left:-100%;
}
</style>
我们可以通过以上方式，让红色box的width=100%，自适应窗口大小，然后让左右两边通过负边距来放置两个box；实现如下：
下面，我们尝试实现“圣杯布局”
利用浮动元素的负边距来定位，代码如下：
<html>
<head>
<meta content="text/html; charset=utf-8" />
<style type="text/css">
body{
min-width: 800px;
text-align: center;
}
#head{
background:green;
clear:both;
}
#footer{
background:red;
clear:both;
}
#container{
overflow: auto;
}
.column{
float:left;
min-height: 300px;
}
#center{
background:blue;
width: 100%;
}
#left{
background:green;
width:190px;
margin-left:-100%;
}
#right{
background:yellow;
width: 190px;
margin-left: -190px;
}
</style>
</head> <body>
<div id="head">
<h1>head</h1>
</div>
<div id="container">
<div id="center" class="column">center</div>
<div id="left" class="column">left</div>
<div id="right" class="column">right</div>
</div>
<div id="footer">
<h1>footer</h1>
</div>
</body>
</html>
现在，通过简单的负边距，已经让left和right定位到正确的位置，剩下的问题是如何让center也定位到正确的位置（现在center是100%铺满的，第一个想法就是在center两侧预留两块位置给left 和 right）：
试着给container添加padding:
#container{
overflow: auto;
padding: 0 190px 0 190px;
结果现在center定位正确了，left和right位置不对了！如何修改left和right？
我们尝试在其现有位置上进行偏移，用position: relative！
#left{
background:green;
width:190px;
margin-left:-100%;
position: relative;
left: -190px;
}
#right{
background:yellow;
width: 190px;
margin-left: -190px;
position: relative;
right: -190px;
}
相对其原来位置再进行偏移：
基本上效果出来了！
不过感觉用former也可以达到这个效果！求讨论。
前端css：“圣杯布局”的更多相关文章
- css圣杯布局的实现方式
css圣杯布局思路: 外面一个大div,里面三个小div(都是浮动).实现左右两栏宽度固定,中间宽度自适应.中间栏优先渲染. 资源网站大全 https://55wd.com 设计导航https://w ...
- CSS | 圣杯布局、双飞翼布局 | 自适应三栏布局
圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局 虽然两者的实现方法略有差异,不过都遵循了以下要点: 1.两侧宽度固定 ...
- CSS 圣杯布局
前端的两个经典布局想必大家都有多了解--圣杯布局和双飞翼布局,因为它既能体现你懂HTML结构又能体现出你对DIV+CSS布局的掌握. 事实上,圣杯布局其实和双飞翼布局是一回事.它们实现的都是三栏布局, ...
- CSS 圣杯布局升级版---多个固定宽度一个自适应宽度
1.一个div固定,一个div自适应宽度.两种情况,固定在左或者在右. HTML: <div class="box1"> <div class="mai ...
- CSS 圣杯布局 / 双飞翼布局的实现
工作的越久,有些基础知识我们可能就逐渐淡忘了,今天我们来回顾一下css的圣杯布局和双飞翼布局, 这两个名词你可能不熟, 那三栏布局你肯定就非常熟悉了, 就是两边定宽, 中间自适应 的 布局 1 , 圣 ...
- WEB前端 CSS(非布局)
目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器 直接选择器 组合选择器 分组选择器 也叫并集选择器 属性选择器 伪类选择器 伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...
- css——圣杯布局
圣杯布局要求 header和footer各自占领屏幕所有宽度,高度固定 中间dontainer部分为左中右三栏式布局 三栏布局中左右两侧宽度固定,中间部分自动填充 实现方式 1.浮动 先定义heade ...
- css圣杯布局、等高布局
所谓圣杯布局,就是自适应浏览器的分辨率,也称双飞翼布局. 例子: <style> body{margin:0;} .center{height:600px;background:#f60; ...
- CSS圣杯布局、双飞翼布局详解
三栏布局中,经典中的经典应该就是圣杯布局.双飞翼布局没跑了.双飞翼布局和圣杯布局其实是一样的,只不过在写法上有些不同,其布局都是左右固定宽度,中间宽度自适应. 先熟悉一下圣杯布局.双飞翼布局中的特点: ...
- css圣杯布局
HTML <div class="container"> <div class="content">content</div> ...
随机推荐
- android如何在代码中设置margin
1.首先看你要设置组件的父容器是什么. 例如,我是FrameLayout其中包括组件.如果调用bottomLayout这是: FrameLayout.LayoutParams lp = new Fra ...
- HDOJ 3518 Boring counting
SAM基本操作 拓扑寻求每个节点 最左边的出现left,最右边的出现right,已经有几个num ...... 对于每个出现两次以上的节点.对其所相应的一串子串的长度范围 [fa->len+1 ...
- s3c2440 的 rtc 操作
实时时钟(RTC)其主要功能是电源故障的制度下,使用后备电源,时钟继续.为了不浪费时间信息. s3c2440内部集成了RTC模块,并且用起来也十分简单. 其内部的寄存器BCDSEC,BCDMIN,BC ...
- visual studio 辅助工具
resharper 这是一个收费软件 需要下载对应版本的注册机. 效果如图所示: 这里的using 很多没有用到,他会用灰色标记,你都可以统统去掉. 声明一个类 ,要求 首字母大写,如果你小写了,他 ...
- Swift入门教程:基本语法(三)
打印输出 Swift提供了2个打印输出函数 println :输出内容后会自动换行 print :对比println,少了个自动换行的功能 示例 输出字符串 println("欢迎学习传智播 ...
- <<Python基础课程>>学习笔记 | 文章13章 | 数据库支持
备注:本章介绍了比较简单,只是比较使用样品,主要假设是把握连接,利用数据库.和SQLite做演示样本 ------ Python数据库API 为了解决Python中各种数据库模块间的兼容问题,如今已经 ...
- java设计模式之四建造者模式（Builder）
工厂类模式提供的是创建单个类的模式,而建造者模式则是将各种产品集中起来进行管理,用来创建复合对象,所谓复合对象就是指某个类具有不同的属性,其实建造者模式就是前面抽象工厂模式和最后的Test结合起来得到 ...
- CSS3可按进度变色的进度条
原文:CSS3可按进度变色的进度条 今天是周末,看到一款利用CSS3实现的进度条应用,觉得非常棒,就将它分享给大家,并且将这款CSS3进度条的实现过程大致整理了一下,实现的关键是根据当前的进度需要能改 ...
- javascript6
eval("3+2")//5 eval():全局eval():严格eval() 函数和可执行的对象(callable object) delete一元操作符,善处对象属性或者数组元 ...
- AngularJS学习笔记（一）——一些基本知识
(一)Hello Angular index.html <!DOCTYPE html> <html ng-app> <head> <title>Test ...