昨天面试前端,一面危险通过,面试官建议我看看“圣杯布局”,听起来很玄妙的名字,花了一晚上弄明白怎么回事,惊讶于前端工作的细节和技巧!

我先看几个基础,在后面要用到的:

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:“圣杯布局”的更多相关文章

  1. css圣杯布局的实现方式

    css圣杯布局思路: 外面一个大div,里面三个小div(都是浮动).实现左右两栏宽度固定,中间宽度自适应.中间栏优先渲染. 资源网站大全 https://55wd.com 设计导航https://w ...

  2. CSS | 圣杯布局、双飞翼布局 | 自适应三栏布局

    圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局 虽然两者的实现方法略有差异,不过都遵循了以下要点: 1.两侧宽度固定 ...

  3. CSS 圣杯布局

    前端的两个经典布局想必大家都有多了解--圣杯布局和双飞翼布局,因为它既能体现你懂HTML结构又能体现出你对DIV+CSS布局的掌握. 事实上,圣杯布局其实和双飞翼布局是一回事.它们实现的都是三栏布局, ...

  4. CSS 圣杯布局升级版---多个固定宽度一个自适应宽度

    1.一个div固定,一个div自适应宽度.两种情况,固定在左或者在右. HTML: <div class="box1"> <div class="mai ...

  5. CSS 圣杯布局 / 双飞翼布局的实现

    工作的越久,有些基础知识我们可能就逐渐淡忘了,今天我们来回顾一下css的圣杯布局和双飞翼布局, 这两个名词你可能不熟, 那三栏布局你肯定就非常熟悉了, 就是两边定宽, 中间自适应 的 布局 1 , 圣 ...

  6. WEB前端 CSS(非布局)

    目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器 直接选择器 组合选择器 分组选择器 也叫并集选择器 属性选择器 伪类选择器 伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...

  7. css——圣杯布局

    圣杯布局要求 header和footer各自占领屏幕所有宽度,高度固定 中间dontainer部分为左中右三栏式布局 三栏布局中左右两侧宽度固定,中间部分自动填充 实现方式 1.浮动 先定义heade ...

  8. css圣杯布局、等高布局

    所谓圣杯布局,就是自适应浏览器的分辨率,也称双飞翼布局. 例子: <style> body{margin:0;} .center{height:600px;background:#f60; ...

  9. CSS圣杯布局、双飞翼布局详解

    三栏布局中,经典中的经典应该就是圣杯布局.双飞翼布局没跑了.双飞翼布局和圣杯布局其实是一样的,只不过在写法上有些不同,其布局都是左右固定宽度,中间宽度自适应. 先熟悉一下圣杯布局.双飞翼布局中的特点: ...

  10. css圣杯布局

    HTML <div class="container"> <div class="content">content</div> ...

随机推荐

  1. 多维算法思考(三):AB组合问题

    多维算法思考(三):AB组合问题 题目:x个A,y个B可以组合成多少个不同排列的问题. 首先,我们用数学的方式思考,这个问题属于<组合数学>的问题,我们的第一种方法可以用组合思路来求解. ...

  2. Unit Test Via Visual Studio

    转载Unit Test Via Visual Studio-Part1 写在开头:Coding ain't done until all the tests run. No unit test no ...

  3. UVA Getting in Line

    题目例如以下: Getting in Line  Computer networking requires that the computers in the network be linked. T ...

  4. linux Packet socket (1)简单介绍

    本文主要来自于linux自带的man packet手冊: http://man7.org/linux/man-pages/man7/packet.7.html 平时常常使用的INET套接字提供的是7层 ...

  5. java界面编程(8) ------ 组合框(下拉列表)

    本文是自己学习所做笔记,欢迎转载,但请注明出处:http://blog.csdn.net/jesson20121020 与一组单选button的功能类似,组合框(下拉列表)也是强制用户从一组可能的元素 ...

  6. Mediator - 中介者模式

    定义 用一个中介对象来封装一系列的对象的交互.中介者使各对象不须要显示地相互使用,从而使其耦合松散,并且能够独立的改变他们之间的交互. 案例 比方有一个图像界面,在界面上有一个输入框LineEdit, ...

  7. c# Buffer.BlockCopy 合并 byte 数组

    今天遇到点问题需要合并 多个  byte[] 参见 :  http://q.cnblogs.com/q/30534/ 今天复习了 所有数组的基类是 Array

  8. Android 数据库加密

    一 一个简短的引论   SQLite是一个轻量的.跨平台的.开源的数据库引擎.它的读写效率.资源消耗总量.延迟时间和总体简单性上具有的优越性,使其成为移动平台数据库的最佳解决方式(如Android.i ...

  9. SSAS系列——【03】多维数据(多维数据集对象)

    原文:SSAS系列--[03]多维数据(多维数据集对象) 1.什么是Cube? 简单 Cube 对象由基本信息.维度和度量值组组成. 基本信息包括多维数据集的名称.多维数据集的默认度量值.数据源和存储 ...

  10. 孙陪你,了解它的力量——unity3d流程暂停

    干unity3dproject什么时候,有时需要对进程暂停一段时间. 有人建议使用yield return new WaitForSeconds(value);使用的方法如以下: IEnumerato ...