百度360必应搜狗淘宝本站头条
HTML APICSS 语法HTML5 支持CSS 谷歌字体HTML URL 编码
当前位置：网站首页 > 技术文章 > 正文

浅谈CSS布局之圣杯布局和栅格布局

myzbx 2025-02-04 15:16 14 浏览

　　检验前端的一个基本功就是考查他的布局。很久之前圣杯布局风靡一时，这里就由圣杯布局开始，到最流行的Bootstrap栅格布局。


圣杯布局

　　先来看看圣杯布局，这是一种三列布局，两边定宽，中间自适应的布局，案例如下

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta http-equiv="window-target" content="_top">
<title>布局案例1</title>
<style type="text/css">
* {
    box-sizing: border-box;
}
html, body{
    width: 100%;
    height: 100%;
    margin: 0;
}
.container{
    width:100%;
}
.container:after{
    display: table;
    content:".";
    clear:both;
}
.container .cl{
    float:left;
    border: 1px solid red;
    height: 200px;
}
.main{
    width:100%;
    padding 0 290px 0 320px;
    background-color: blue;
}
.sub{
    width: 320px;
    margin-left:-100%;
    background-color: white;
}
.extra{
    width: 290px;
  margin-left:-290px;
  background-color: yellow;
}
</style>
</head>
<body>
<div class="container">
    <div class="cl main">
    </div>
    <div class="cl sub"></div>
    <div class="cl extra"></div>
</div>
</body>

圣杯布局的原理就是当子元素处于浮动状态时，设置负margin，子元素会叠盖到兄弟元素之上。　

　　那么能否用现在想要将其中蓝色区域再次划分成三个区域，相信有很多种办法。但能否通过嵌套的方式实现呢？我们可以试一下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta http-equiv="window-target" content="_top">
<title>布局案例2</title>
<style type="text/css">
    * {
        box-sizing: border-box;
    }
    html, body{
        width: 100%;
        height: 100%;
        margin: 0;
    }
    .container{
        width:100%;
    }
    .container:after{
        display: table;
        content:".";
        clear:both;
    }
    .container .cl{
        float:left;
        border: 1px solid red;
        height: 200px;
    }
    .main{
        width:100%;
        padding: 0 290px 0 320px;
        background-color: blue;
    }
    .sub{
        width: 320px;
        margin-left:-100%;
        background-color: white;
    }
    .extra{
        width: 290px;
        margin-left:-290px;
        background-color: yellow;
    }
</style>
</head>
<body>
<div class="container">
    <div class="cl main">
        <div class="container">
            <div class="cl main"></div>
            <div class="cl sub"></div>
            <div class="cl extra"></div>
        </div>
    </div>
    <div class="cl sub"></div>
    <div class="cl extra"></div>
</div>
</body>
</html>

可以看到蓝色区域已被划分成三个区域。这个过程是不是很像bootstrap中的栅格嵌套？诚然，利用圣杯布局我们可以实现一套简单的栅格系统，但栅格布局就是简单地嵌套出来的吗，很明显答案是否定的。栅格设计系统（又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格），是一种平面设计的方法与风格。运用固定的格子设计版面布局，其风格工整简洁，已成为今日出版物设计的主流风格之一。那么如何来设计栅格系统呢？我们往下看

栅格系统的原理

　　假设：Flowline的宽度为W，column的宽度为c，Gutter的宽度为g，Margin的宽度为m，栅格列数为N

　　W = c*N + g*(N-1) + 2m；g的宽度通常为m的两倍，所以：

　　W = (c+g) * N；把c+g记为C，得：

　　W = C * N;

　　大部分的栅格系统都是此公式的变体。

Bootstrap的栅格系统

　　下面我们将一起来看一下常见的栅格布局的设计和bootstrap中的设计实现。BootStrap中合理的使用栅格布局，必须将列放入row中，而row必须放入container中。container类在布局中主要有两个作用：

  1. 在不同的宽度区间内（响应式断点）提供宽度限制。当宽度变化时，采用不同的宽度。
  2. 提供一个padding，阻止内部内容触碰到浏览器边界。

　　Bootstrap中使用padding代替上文中的margin。大小为15px，如下图所示，粉红色为padding大小。

　　Row是column的容器，每个row中的column之和必须为12，不过我们可以通过嵌套的方式扩展。Row的左右margin都为-15px，用来抵消container中的padding，如下图蓝色部分所示：

　row的这种设计主要为了方便嵌套，后文中会提到。

　　Colomn是栅格系统的主角，每个column左右padding都为15px，上文中row的负margin抵消了container的padding，所以为每个column设置padding就是为了防止内容直接触碰边界，同时不同的column之间拥有30px的卡槽（Gutter）。如下图黄色部分所示：

　　现在想想上文中提到的公式：W = C * N;

　　上文提到row的负margin设计主要为了嵌套，如果要在column中嵌套column首先要把被嵌套的column放到row中，把row放到作为容器的column中，而不需要在放置一个container。如下图中蓝色所示，是放入column中的row的负margin区域。

　　现在将被嵌套的column放入row中，如下图所示，上层column便是起到了container的作用。

　　如此我们便看到了Bootstrap栅格系统的精妙所在。

相关推荐

MORROR ART:毫无音质可言，真的只是好看而已...

今天早上我在微博上发了一条短视频，内容是某款网红音箱正在放声歌唱——这玩意就是此前曾经在网上挺火的所谓“悬浮歌词音箱”。这款产品是我同事收到的礼品，但她嫌在家里放着没用，所以拿到公司里做我们的拍摄道具...

「JS优化篇」你的 if - else 代码肯定没我写的好

作者：小生方勤转发链接：https://mp.weixin.qq.com/s/JzOQ_OwAYoP5Ic1VBtCZNA前言最近部门在对以往的代码做一些优化，我在代码中看到一连串的if(){}el...

细聊微内核架构在前端的应用「干货」

作者：semlinker转发链接：https://mp.weixin.qq.com/s/ywc98dS4TVB4t3L2tIyk8g一、微内核架构简介1.1微内核的概念微内核架构（Microke...

ThreeJS 入门教程(一) 是选择桌面的固守还是云原生?

导读：最近我购置了一台新的电脑，硬盘空间只有1T。我很担心这个电脑还能用多久。性能限制或者空间的限制，都使得在未来3-5年内，这个电脑会被淘汰。但是，基于云APP的使用，老的电脑是足够了，而且，我们也...

推荐三款正则可视化工具「JS篇」（正则在线调试）

作者：代码先森转发链接：https://mp.weixin.qq.com/s/rw29yKBwti5sIsx2GKG9pw前言最近老王对可视化非常着迷。例如，算法可视化、正则可视化、Vue数据劫持可...

Javascript 多线程编程的前世今生

作者：jolamjiang腾讯技术工程转发链接：https://mp.weixin.qq.com/s/87C9GAFb0Y_i5iPbIL5Hzg为什么要多线程编程大家看到文章的标题《Javasc...

Pug 3.0.0正式发布，不再支持 Node.js 6/8

作者：李俊辰前端之巅转发链接：https://mp.weixin.qq.com/s/q-49Gf-SFijeu7d2MqztIQ前言近日，Pug3.0.0正式发布，Pug原名Jade，是由...

36个工作中常用的JavaScript函数片段「值得收藏」

作者：Eno_Yao转发链接：https://segmentfault.com/a/1190000022623676前言如果文章和笔记能带您一丝帮助或者启发，请不要吝啬你的赞和收藏，你的肯定是我前进的...

深入JavaScript教你内存泄漏如何防范

作者：大道至简转发链接：https://mp.weixin.qq.com/s/0w6aWwpR3MAJnmyLwDnAzA前言一般情况下，忽视内存管理不会对传统的网页产生显著的后果。这是因为，用户刷新...

由浅入深，66条JavaScript面试知识点(七)

作者：JakeZhang转发链接：https://juejin.im/post/5ef8377f6fb9a07e693a6061目录由浅入深，66条JavaScript面试知识点（一）由浅入深，66...

用STM32做了个电子秤，成本仅两位数，精度高!解析一下原理

俗话说得好！人在胖，秤在看！所以，我想DIY一个精度高的体重秤！并希望它不只能称体重：还能像这样称克重（可设置KG，G，最低可称100克）……这样一来，做甜品的时候，还能拿来应应急。保姆级教程，记录在...

前端开发需要了解常用7种JavaScript设计模式

作者|Deven译者|王强策划|小智转发链接：https://mp.weixin.qq.com/s/Lw4D7bfUSw_kPoJMD6W8gg前言JavaScript中的设计模式指的是...

毛姆的一个手法|王培军（毛姆作品简介）

鲁本斯画《海伦娜·芙尔曼肖像》钱锺书在《宋诗选注》文同小传中说：“具体的把当前风物比拟为某种画法或某某大画家的名作”，是“从文同正式起头”。如钱先生所举的：“峰峦李成似，涧谷范宽能”，“独坐水轩人不到...

欣赏 | 朝戈:我渴望找到直达心灵的永恒

朋友，通过艺术让我们共同感知世界的永恒与不朽。——朝戈橙色的人物117X71cm布面油画2003包与陈185cm×103cm2007年白色80cm×40cm2009年光布面油画-Light-Oilo...

Web页面如此耗电!到了某种程度，会是大损失

现在用户上网大多使用移动设备或者笔记本电脑。对这两者来说，电池寿命都很重要。在这篇文章里，我们将讨论影响电池寿命的因素，以及作为一个web开发者，我们如何让网页耗电更少，以便用户有更多时间来关注我们的...

一周热门
最近发表
标签列表