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

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

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. API接口开发 配置、实现、测试

    Yii2 基于RESTful架构的 advanced版API接口开发 配置.实现.测试 环境配置: 开启服务器伪静态 本处以apache为例,查看apache的conf目录下httpd.conf,找到 ...

  2. python_random随机

    在数据清洗,评估 ,抽验等等过程中,经常有这样的应用场景 : 需要在一个大的数据集合中随机出来样本,进行人工评估.为了保证足够随机,借助脚本来实现. 下面一个脚本  ,用于应对这种应用场景. 使用方法 ...

  3. CQRS 示例

    CQRS 示例 上一篇:<IDDD 实现领域驱动设计-CQRS(命令查询职责分离)和 EDA(事件驱动架构)> 学习架构知识,需要有一些功底和经验,要不然你会和我一样吃力,CQRS.EDA ...

  4. 冒泡排序与简单选择排序——Java实现

    1.冒泡排序 1)原理说明:反复遍历要排序的数列,一次比較两个元素,假设他们的顺序错误就把他们交换过来.走訪数列的工作是反复地进行直到没有再须要交换,也就是说该数列已经排序完毕. 2)代码实现: pa ...

  5. Redis源代码分析（一）--Redis结构解析

    从今天起,本人将会展开对Redis源代码的学习,Redis的代码规模比較小,很适合学习,是一份很不错的学习资料,数了一下大概100个文件左右的样子,用的是C语言写的.希望终于能把他啃完吧,C语言好久不 ...

  6. 分享一个解析XML成为php数组的方法

    原文:分享一个解析XML成为php数组的方法 <?php /* * To change this template, choose Tools | Templates * and open th ...

  7. Socket 学习（三）

    前2节,说的是 Server 与 Client 的数据交互.服务端IP.端口固定,客户端 网服务端发送消息的时候,他的Socket对面被服务端获取到了,而且链接没有中断,他当然可以很容易回复信息. 现 ...

  8. jQuery按回车键执行指定方法

    1.按Enter键执行指定方法: //按回车进入页面 $(function(){ $(document).keydown(function(event){ if (event.keyCode == 1 ...

  9. IOS中UIDatePicker

    UIDatePicker 1.常见属性 /* 样式 UIDatePickerModeTime,时间 UIDatePickerModeDate,日期 UIDatePickerModeDateAndTim ...

  10. ASP.NET MVC基于标注特性的Model验证：一个Model，多种验证规则

    原文:ASP.NET MVC基于标注特性的Model验证:一个Model,多种验证规则 对于Model验证,理想的设计应该是场景驱动的,而不是Model(类型)驱动的,也就是对于同一个Model对象, ...