当前位置：首页 > Web前端 > CSS

圣杯布局的三种实现方法

时间：2023-03-30 17:39:29 CSS

圣杯布局的三种实现圣杯布局是一种非常常见的CSS布局。他要求：上下各占满屏幕宽度。上下两部分之间的部分是三列布局。三栏式布局两侧宽度不变，中间部分自动填满整个区域。中段的高度是三列最高区域的高度。本文将使用三种方式来实现圣杯布局，分别是floating、flexbox和cssgrid。浮动实现原理外框这里是头部

这里是底部

。页眉,.页脚{高度:200px;宽度：100%；背景：红色；}.container{padding-left:200px;padding-right:300px;}在填充三列这一步中，首先清除浮动的底部区域，防止与上面的区域一起浮动。另外：设置中心、左、右区域浮动。给左右两个区域一个固定的宽度，中间部分的宽度设置为100%。这样，因为浮动的关系，[middle]会占据[container]的所有部分，而左右两个区域会被挤到下方。但是由于第一步设置的内边距的关系，所以[container]的Left和rightareas的left和rightarea的宽度是一样的。这里是头部

中间部分左侧右边这是底部.header,.footer{height:40px;宽度：100%；背景：红色；}.footer{clear:both;}.container{padding-left:200px;padding-right:300px;}.containerdiv{float:left;}.middle{width:100%;背景：黄色；}。左{宽度：200px;背景：粉色；}.right{宽度：300px；background:aqua;}移动左侧区域接下来要做的是将左右区域移动到腾出的填充空间中。先向左移动，添加新样式margin-left:-100%。这样，因为浮动的关系，左边的块被上移到[中]的左边，与之交织在一起，右边的列自动向左移动。然后给左边的列一个偏移量，正好是它的宽度。这一步，设置[container]的位置相对这里是header中间部分LeftRight这是底部的.header，.footer{高度：40px;宽度：100%；背景：红色；}.footer{clear:both;}.container{padding-left:200px;padding-right:300px;}.containerdiv{position:relative;浮动：左；}.middle{宽度：100%；背景：黄色；}.left{宽度：200px；背景：粉色；100%；右：200px;}.right{宽度：300px;background:aqua;}移动右边和上一步一样，右边的区域也往上移动，负边距设置为和自己的宽度一样。这里是头部中间部分左侧右边这是底部.header,.footer{height:40px;宽度：100%；背景：红色；}.footer{clear:both;}.container{padding-left:200px;padding-right:300px;}.containerdiv{position:relative;浮动：左；}.middle{宽度：100%；背景：黄色；}.left{宽度：200px；背景：粉色；左边距：-100%；右：200px;}.right{宽度：300px;背景：浅绿色；Flexbox实现flexbox对于实现HolyGrail布局来说特别简单。你只需要对中间部分使用flex布局。这是头部左侧中间部分右边这是底部.header,.footer{height:40px;宽度：100%；背景：红色；}.container{显示：flex；}.middle{flex：1；背景：黄色；}.left{宽度：200px；背景：粉色；}.right{背景：浅绿色；width:300px;}很简单，写html的时候，因为不再涉及浮动，只需要按照左中右的顺序写就可以了。左右区域的宽度是硬编码的，中间区域的flex属性设置为1。CSSgridGrid网格是一种新的布局方式。截至2018年初，大多数浏览器已经支持CSS网格。原理就是把页面的区域一格一格地划分，就像围棋的棋盘一样。使用网格解决圣杯问题可以摆脱在弹性盒子中添加【容器】的问题，即左中右三个区域不需要再额外包裹一个div。先看代码：headerleftmiddlerightfooterbody{display:grid;}#header{background:red;网格行：1；网格列：1/5;}#left{网格行：2;网格列：1/2；背景：橙色；}#right{网格行：2；网格列：4/5；背景：cadetblue;}#middle{grid-row:2;网格列：2/4；背景：rebeccapurple}#footer{背景：金色；网格行：3；grid-column:1/5;}简单说一下代码的实现。后面会专门看cssgrid的细节。首先设置要显示的最外层body：grid。当然只要是外层父元素即可，不一定是body。Grid-row表示从上到下，#header占据第一格，#left,#middle,#right占据第二格，#footer占据第三格。grid-column表示在水平方向上从左到右分成五个格子。#header和#footer占据全部。#left占据第一个方格，#middle占据第二到第四个方格，#right占据第五个方格。实现和理解都非常方便。关于cssgrid，下次继续总结。总结总的来说，我认为使用灵活的盒子布局来实现圣杯模式是最方便快捷的，不用担心移动端的适配问题。cssgridgrid并不是所有浏览器都支持的，所以暂时不建议大规模使用。至于第一种方法，在面试的时候做好准备是非常有好处的。

上一篇：不，不是还有人不知道绝对定位和相对定位的区别

下一篇：如果你能用CSS做到，就别用JavaScript

圣杯布局的三种实现方法相关文章

最新推荐

猜你喜欢