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

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

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. 终于会用c#中的delegate（委托）和event（事件）了

    一.开篇忏悔 对自己最拿手的编程语言C#,我想对你说声对不起,因为我到现在为止才明白c#中的delegate和event是怎么用的,惭愧那.好了,那今天就趁月黑风高的夜晚简单来谈谈delegate和e ...

  2. JavaScript之再谈回调与闭包

    前些阵子写了几篇关于回调和闭包的博文,感觉自己都是似懂非懂,最近在项目中又碰到了类似的情况,故在此咱们来重弹js中的回调与闭包. 先说说回调: 百度百科: 回调函数就是一个通过函数指针调用的函数.如果 ...

  3. strip 使用命令

    使用 通过消除使用调试器的粘合剂和符号信息,减少扩展公共对象文件格式(XCOFF)对象文件大小. 语法 strip [ -V ] [ -r [ -l ] | -x [ -l ] | -t | -H | ...

  4. 纠错《COM技术内幕》之ProgID

    近期在看<COM技术内幕>,看到第六章时发现该章节在解释ProgID时有点错误,特此记录一下,也给正在学习COM的小伙伴们一个提示. 并且我发现该问题存在于一些非常多大型软件的COM组件中 ...

  5. Hadoop上传文件的报错

    baidu了很多,都说防火墙,datanode没有正常启动的问题,可是检查了都是正常,后来还是在老外的网站上找到了解决的方法 修改了/etc/security/limits.conf文件,上传成功 这 ...

  6. Android Permission denied 错误 ( 附Android权限大全 )

    Android Permission denied 错误(附Android权限大全) java.net.SocketException: Permission denied (maybe missin ...

  7. 在面对变化，撇开NO

    参观后转到供应商,看到自己的生产线流水线半自己的钣金生产线举措.这就是我一直想厂提高生产现场的想法,因为通常当我看到工作人员努力工作和繁忙的生产,只见废现场,线解决方式时,有点莫名的兴奋. 幸亏是一家 ...

  8. SharePoint 2013 搜索SharePoint 特定列和特定文档（自己定义搜索）

    SharePoint 2013 搜索SharePoint 特定列和特定文档 1,操作步骤和图例,因语言和版本号的不同 我尽量使用抓图方式. 2.  In Central Administration, ...

  9. IOS、java支持DES加密

    转载请注明博客地址:http://blog.csdn.net/mengxiangyue/article/details/40015727 近期在考虑数据加密方面的需求,所以对数据加密简单的看了一下,当 ...

  10. 基于Cocos2dx + box2d 愤怒的小鸟的实现Demo

    1. Demo初始界面 2. 游戏界面 3. 精确碰撞检測 4. 下载  压缩文件文件夹 AngryBird source    愤慨的小鸟Demo源码,基于Cocos2dx C++,以及box2d技 ...