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

我先看几个基础，在后面要用到的：

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. Linux而不必进入password登陆自己主动sshserver方法

    使用OpenSSH在linux通过登陆sshserver时间,系统会提示您输入每次password,和用途vim 的netrw保存编辑后的每一个变化必须失去远程文件时,插件password,很多麻烦. ...

  2. 【C++基础】类的组合

    所谓类的组合是指:类中的成员数据是还有一个类的对象或者是还有一个类的指针或引用.通过类的组合能够在已有的抽象的基础上实现更复杂的抽象. 比如: 1.按值组合 #include<iostream. ...

  3. Java NIO的多路复用及reactor

    (from:http://developer.51cto.com/art/201112/306489.htm) 以下描述,为了说明问题,就提提历史(类似的东西,网上一搜一大把,但是希望你能在这里止步, ...

  4. SQL代理执行EXE可执行程序

    原文:SQL代理执行EXE可执行程序  1.如果没有启用xp_cmdshell安全配置是不可以使用的-- 启用xp_cmdshellEXEC sp_configure 'xp_cmdshell', 1 ...

  5. c# 数据类型转换 as（C# 参考）

    as    运算符类似于强制转换操作.               但是,因此,如果转换是不可能的,as 返回 null 而不引发异常.  请看下面的示例: expression is type ? ...

  6. .net中用Action等委托向外传递参数

    原文:.net中用Action等委托向外传递参数      一般我们可以使用ref,out达到向外传递参数目的. Action<T>是一个特殊的委托,除了常规应用.我们还可以用它来实现简单 ...

  7. 自动引用计数(ARC)

    1.1什么是自动引用技术 顾名思义,自动引用计数(ARC, Automatic Reference Counting)是指内存管理中对引用采取自动计数的技术.以下摘自苹果官方说明: 在Objectiv ...

  8. JSR303 Bean Validation 技术规范特性概述

    概述 Bean Validation 规范 Bean 是 Java Bean 的缩写,在 Java 分层架构的实际应用中,从表示层到持久化层,每一层都需要对 Java Bean 进行业务符合性验证,如 ...

  9. Kafka集群在空载情况下Cpu消耗比较高的问题

    线上kafka与storm的空载情况下负载都比较高, kafka达到122%, storm平均负载达到, 20%,  当前是通过Ambari下管理kafka的, a. 先停止s5的kafka进程.b. ...

  10. .net下二进制序列化的格式分析[转]

    .net下二进制序列化的格式分析[转] -- 综合应用 (http://www.Host01.Com/article/Net/00020003/) --- .net下二进制序列化的格式分析 (http ...