CSS简单实现圣杯布局和双飞翼布局

一、你能学到什么？

①如何使用css变量 ②实现圣杯布局和双飞翼的简单思路 ③了解浮动和margin的特性

css变量设置(两个布局都有的部分)

:root{/* 左边栏宽度 */--lw:300px;/*负左边栏宽度*/--lwf:-300px;/* 右边栏宽度 */--rw:400px;/*负左边栏宽度*/--rwf:-400px;/* 高度 */--height:300px;
}

二、圣杯布局的html和css代码

html部分

  <div class="holyGrail"><div class="hg_main">main</div><div class="hg_left">left</div><div class="hg_right">right</div></div>

css 实现对应的四个class

.holyGrail {height: var(--height);/* 留出左右两栏的布局 为了字体不被覆盖*/padding-left: var(--lw);padding-right: var(--rw);
}
.hg_main{width:100%;float: left;height: var(--height);background-color: blanchedalmond;
}
.hg_left{position: relative;left: var(--lwf);float: left;margin-left: -100%;width:var(--lw);height: var(--height);background-color: blueviolet;
}
.hg_right{float: left;margin-right: var(--rwf);width:var(--rw);height: var(--height);background-color: brown;
}

三、双飞翼布局的html和css代码

html部分

<div class="doubleWing"><div class="dw_main"><div class="dw_con">main</div></div><div class="dw_left">left</div><div class="dw_right">right</div></div>

css 实现对应的五个class

.doubleWing{padding-right: var(--rw);
}
.dw_left{float: left;margin-left: -100%;width:var(--lw);height: var(--height);background-color: blueviolet;
}
.dw_main{width:100%;float: left;height: var(--height);background-color: blanchedalmond;
}
.dw_con {margin-left: var(--lw);
}
.dw_right{float: left;margin-right: var(--rwf);width:var(--rw);background-color: brown;height: var(--height);
}

四、学会两个布局的注意点

圣杯布局

在最外边的类（holyGrail）左右要留出左栏和右栏的宽度（使用padding-left，padding-right)
中间的div.hg_main放在最上面，优先渲染，中间div自适应，width为100%
左中右栏的div都设置浮动，左栏通过margin-left:-100%移动到和中间的div同一起点，然后通过position: relative;
left: -（左栏的宽度）；会移动到最外层div的左内边距的区域（中间div的左边）
右栏可以通过margin-right:-(右栏的宽度)；移动到最外层div的右内边距的区域（中间div的右边）

双飞翼布局

在中栏的div再加一个div,设置margin-left:左栏的宽度，这样可以省略左栏的div使用postion和left的属性移动
最外层的div可以不用预留左栏的位置了

五、两个布局的对比的优缺点

布局	优点	缺点
圣杯	无多余dom	当中间的宽度小于左右的宽度时，结构混乱
双飞翼	可以支持各种宽度，通用性强较强	需要多加一层dom

代码下载地址

记得一定要自己去实现一下

感谢

如果感觉对您的学习工作有帮助，请将它分享给需要的人，或者点赞鼓励一下，感谢支持
你可以加个收藏，我还会不断更新。。。

CSS简单实现圣杯布局和双飞翼布局相关推荐

DIV+CSS布局之圣杯布局与双飞翼布局
圣杯布局 & 双飞翼布局简单介绍一下什么是双飞翼布局和圣杯布局: 它们俩都是为了解决三栏布局问题,左右栏宽度固定,中间栏自适应(随着父盒子大小改变而改变).中间栏要放在中间以优先渲染.它们的 ...
前端必经之路：CSS页面布局(深入理解浮动布局、定位布局、圣杯布局和双飞翼布局等重要布局方案)
建筑师在对一栋建筑物进行施工之前,首先会根据建筑图纸上的平面图.立体图.剖面图和构造详图等对建筑物进行整体布局后再从局部施工(当然不排除有先装修完厕所再砌卧室围墙的奇葩).在一个网页页面的搭建过程中, ...
[css] 圣杯布局和双飞翼布局的理解和区别，并用代码实现
[css] 圣杯布局和双飞翼布局的理解和区别,并用代码实现一: section{height: 100%; overflow: hidden;clear:both; } .left{ height: ...
css和css的圣杯布局,CSS布局--圣杯布局和双飞翼布局以及使用Flex实现圣杯布局
前言我曾一度觉得总写css的前端很low,有了这种思想以后我便远离网页布局,H5的工作更不想接,沉迷于页面逻辑和封装组件.直到最近我面试,面试官说我css3理解的不熟,我起初很不屑,但后来静下来反省 ...
css圣杯布局与双飞翼布局_CSS布局研讨会已于2018年更新
css圣杯布局与双飞翼布局 Yesterday I made live fourteen brand new videos, plus a bunch of updates to existing m ...
css - 圣杯布局和双飞翼布局
参考: Flex 布局教程:语法篇 Flex布局那些年,奇妙的圣杯与双飞翼,还有负边距 CSS布局中圣杯布局与双飞翼布局的实现思路差异在哪里? CSS布局奇淫巧计之-强大的负边距聊聊为什么淘宝要提 ...
CSS经典布局--圣杯布局和双飞翼布局
圣杯布局与双飞翼布局,都是属于三列布局的经典布局. 双飞翼布局是圣杯布局的优化版,由淘宝UED提出: 它们的效果图类似,但是实现方法不同. 文章目录一.圣杯布局和双飞翼布局的常规方法 1.圣杯 po ...
【CSS】圣杯布局和双飞翼布局（包括完整代码）
1. 前言圣杯布局和双飞翼布局是各类网站经常使用的布局,本文将通过两种布局的示例图.布局过程.以及完整代码进行讲解,如果你想进行练习,可以到我的 github地址上获取已去除了关键代码的 ...
css(8)圣杯布局、双飞翼布局、两栏布局
现在已经很少用到浮动了,一般用flex就可以很好的解决了.但是面试还是考,所以还是写一下三栏布局的关键点是要答出浮动和margin-left为负值圣杯布局圣杯布局和双飞翼布局都是前端工程师需要日 ...
八十九、常见的圣杯布局和双飞翼布局
@Author:Runsen 圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式. 圣杯布局圣杯布局是经典的css布局,左右两栏的宽度固定不变,中间那一栏是自适应. 使用弹性盒子布局实现圣杯 ...

CSS简单实现圣杯布局和双飞翼布局

一、你能学到什么？

css变量设置(两个布局都有的部分)

二、圣杯布局的html和css代码

三、双飞翼布局的html和css代码

四、学会两个布局的注意点

圣杯布局

双飞翼布局

五、两个布局的对比的优缺点

代码下载地址

记得一定要自己去实现一下

感谢

CSS简单实现圣杯布局和双飞翼布局相关推荐

最新文章

热门文章