浅谈CSS布局之圣杯布局和栅格布局
myzbx 2025-02-04 15:16 22 浏览
检验前端的一个基本功就是考查他的布局。很久之前圣杯布局风靡一时，这里就由圣杯布局开始，到最流行的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类在布局中主要有两个作用：
- 在不同的宽度区间内（响应式断点）提供宽度限制。当宽度变化时，采用不同的宽度。
- 提供一个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栅格系统的精妙所在。
相关推荐
- C语言速成之数组:C语言数据处理的核心武器，你真的玩透了吗?
-
程序员Feri一名12年+的程序员,做过开发带过团队创过业,擅长Java、鸿蒙、嵌入式、人工智能等开发,专注于程序员成长的那点儿事,希望在成长的路上有你相伴！君志所向,一往无前！数组：C语言数据处理...
- ES6史上最全数JS数组方法合集-02-数组操作
-
数组生成array.ofletres=Array.of(1,2,3)console.log(res)//[1,2,3]下标定位indexOf用于查找数组中是否存在某个值，如果存...
- 前端性能拉胯?这 8 个 JavaScript 技巧让你的代码飞起来!
-
在前端开发的江湖里，JavaScript就是我们手中的“绝世宝剑”。但为啥别人用剑就能轻松斩敌，你的代码却总拖后腿，页面加载慢、交互卡顿？别着急！今天带来8个超实用的JavaScript实...
- 12种JavaScript中最常用的数组操作整理汇总
-
数组是最常见的数据结构之一，我们需要绝对自信地使用它。在这里，我将列出JavaScript中最重要的几个数组常用操作片段，包括数组长度、替换元素、去重以及许多其他内容。1、数组长度大多数人都知道可...
- 手把手教你在Webpack写一个Loader
-
前言有的时候，你可能在从零搭建Webpack项目很熟悉，配置过各种loader,面试官在Webpack方面问你，是否自己实现过一个loader?如果没有去了解过如果去实现，确实有点尴尬，其...
- const关键字到底该什么用?（可以用const关键字定义变量吗）
-
文|守望先生经授权转载自公众号编程珠玑(id：shouwangxiansheng)前言我们都知道使用const关键字限定一个变量为只读，但它是真正意义上的只读吗？实际中又该如何使用const关键字...
- “JavaScript变量声明三兄弟，你真的会用吗?
-
在JavaScript中，var、let和const是声明变量的关键字，它们在作用域、变量提升、重复声明和重新赋值等方面有显著区别。以下是它们的相同点和不同点，并通过代码示例详细说明。一、相同点声明变...
- ES6(二)let 和 const（es6 var let const区别）
-
let命令let和var差不多，只是限制了有效范围。先定义后使用不管是什么编程语言，不管语法是否允许，都要秉承先定义，然后再使用的习惯，这样不会出幺蛾子。以前JavaScript比较随意，...
- js 里面 let 和 const的区别（js中的let）
-
在JavaScript（包括Vue、Node.js、前端脚本等）中，const和let是用于声明变量的两种方式，它们的主要区别如下：constvslet的区别特性constlet是否...
- JDK21新特性:Sequenced Collections
-
SequencedCollectionsJDK21在JEP431提出了有序集合（SequencedCollections）。引入新的接口来表示有序集合。这样的集合都有一个明确的第一个元素、第二个...
- 动态编程基础——第 2 部分（动态编程是什么）
-
有两种方法可以使用动态规划来解决问题。在这篇文章中，我们将了解制表法。请参阅我的动态编程基础——第1部分了解记忆方法。记忆制表什么是动态规划？它是一种简单递归的优化技术。它大大减少了解决给定...
- Lambda 函数，你真的的了解吗（lambda函数用法）
-
什么是lambda函数lambda函数是一个匿名函数，这意味着与其他函数不同，它们没有名称。这是一个函数，它添加两个数字，写成一个命名函数，可以按其名称调用它们：defadd(x,y):...
- JavaScript 数组操作方法大全（js数组操作的常用方法有哪些）
-
数组操作是JavaScript中非常重要也非常常用的技巧。本文整理了常用的数组操作方法（包括ES6的map、forEach、every、some、filter、find、from、of等）...
- 系列专栏(六):解构赋值（解构赋值默认值）
-
ES6作为新一代JavaScript标准，已正式与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解，MozillaWeb开发者博客推出了《ES6InDepth》系列文章。CSDN...
- js列表遍历方法解读（js遍历链表）
-
JavaScript提供了多种遍历数组（或列表）的方法。以下是一些常用的方法及其解读：for循环：vararray=[1,2,3,4,5];for(vari=0;...
- 一周热门
- 最近发表
-
- C语言速成之数组:C语言数据处理的核心武器，你真的玩透了吗?
- ES6史上最全数JS数组方法合集-02-数组操作
- 前端性能拉胯?这 8 个 JavaScript 技巧让你的代码飞起来!
- 12种JavaScript中最常用的数组操作整理汇总
- 手把手教你在Webpack写一个Loader
- const关键字到底该什么用?（可以用const关键字定义变量吗）
- “JavaScript变量声明三兄弟，你真的会用吗?
- ES6(二)let 和 const（es6 var let const区别）
- js 里面 let 和 const的区别（js中的let）
- JDK21新特性:Sequenced Collections
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 选择器 (30)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)