关于圣杯布局详解 css圣杯布局原理 _生活百科-「四川龙网」

检验前端的一个基本功就是考查他的布局。很久之前圣杯布局风靡一时，这里就由圣杯布局开始，到最流行的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类在布局中主要有两个作用：

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：