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

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

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. 【Espruino】NO.15 nRF24L01+无线收发器

    http://blog.csdn.net/qwert1213131/article/details/35853747 本文属于个人理解,能力有限,纰漏在所难免,还望指正! [小鱼有点电] [Espru ...

  2. struts2基本介绍

    前言 文本 Struts2 Apache SoftWare Foundation Tomcat/Struts1/Struts2/Ibaitas/ MVC框架:Struts1/Struts2/JSF/W ...

  3. JavaScript语法细节——引用与复制

    原文:JavaScript语法细节--引用与复制 我们都知道,JS中变量的赋值有两种方式,最近在折腾自己写的标签栏插件,碰到了很多平时没注意的问题.正好,那边处理清楚了,稍微整理一下关于引用与复制相关 ...

  4. Winform: use the WebBrowser to display XML with xslt, xml, xslt 转 html 字符串

    原文:Winform: use the WebBrowser to display XML with xslt, xml, xslt 转 html 字符串 声明xml字符串: string xml = ...

  5. 设计模式组合模式(Composite)精华

    23种子GOF设计模式一般分为三类:创建模式.结构模型.行为模式. 创建模式抽象的实例,他们帮助如何创建一个系统独立.这是一个这些对象和陈述的组合. 创建使用继承类的类架构更改实例.的对象类型模型的建 ...

  6. Asp.Net MVC5入门学习系列②

    原文:Asp.Net MVC5入门学习系列② 添加一个Controller(控制器) 因为我们用的是Asp.Net MVC,MVC最终还是一套框架,所以我们还是需要遵循它才能玩下去,或者说是更好的利用 ...

  7. JS document 获取 html对象的问题

    在了解document.getElementById()方法的时候,没有留意到被获取的对象的声明时的位置, 一个很基础很细节的问题. 比如说 这个js的引入位置: -----------------a ...

  8. 一个只能用在Win下的密码验证函数(显示星号，可删除)

    以前做小程序时图好玩在网上找的代码.输入的密码会以星号显示出来,并且输入错了可以删除.因为用了专有库函数,所以只能在Windows平台使用,少用为好,不过可能还有点用.嗯…就这样了 #include ...

  9. WEB浏览器与服务器通讯过程

    以访问网页www.baidu.com为例,下面是使用Wireshark捕捉到的数据: 浏览器先发起一个TCP连接,然后发送GET报文给服务器,服务器之后返回一个Response报文. 从服务器端返回时 ...

  10. .net的页面在大并发下出现503错误

    .net的页面在大并发下偶尔出现503错误 我们开发了一个回调页面,由一个工具负责调用,由于压力非常大,回调页面通过6台服务器负载均衡的: 最近业务系统又再次扩容,回调页面压力成倍增加,在高峰时间段偶 ...