浅谈面试中常考的两种经典布局——圣杯与双飞翼
圣杯和双飞翼布局介绍
最近正好碰到了写这种布局,一直没有总结过正好借这次机会总结一波,同时加强一下自己的理解。
博客链接:http://www.xluos.com/index.ph...
圣杯布局和双飞翼布局作为经典的三栏式布局是面试中的常客。两种布局达到效果上基本相同,都是两边两栏宽度固定,中间栏宽度自适应。在HTML结构上中间栏在最前面保证了最先渲染中间提升性能(因为这两种布局都比较老,我认为在现代浏览器中这点儿性能优化效果并不是很大),并且兼容性良好。两种布局的实现方法前半部分相同,后半部分的实现各有利弊,下面会简单介绍两者的区别。
Demo和代码
- 圣杯布局Demo、代码
- 双飞翼布局Demo、代码
两种布局的实现
首先,既然是三栏式布局我们需要三个div
<header>圣杯布局</header><div class="bd"><div class="main text">main</div><div class="left text">left</div><div class="right text">right</div></div><footer>footer</footer>
给main
设置width: 100%
,让它始终占满窗口,这样才有自适应的效果。
然后我们给它加上点儿样式区分,效果如下:
为了形成在一行三栏布局,给三个方块都加上浮动float: left;
(注意清除浮动,因为浮动会导致父元素高度塌陷)
接着我们要把三个方块拉到一行,这里要利用负margin的技巧。
- left要放到main的左边,设置
margin-left: -100%
,因为margin
的百分比是相对与父元素的,所以需要整整一行的宽度才能补偿这个margin的值,所以left就能到main的左边。 - 接着让right到main的右边,只需要设置
margin-left
的值为负的right的宽,比如margin-left: -200px;
,正好使main重叠right的宽度,因为设置了浮动所以right就会到main的右边了。
下面我们来看一下效果:
看样子好像我们已经成功达到了效果?不要急给两个方块变透明,再给中间加点儿内容看看。
我们发现当内容变多之后,因为三个方块都是设置的浮动,脱离的文档流,两边固定宽度的两栏会挡住我们的内容。
所以要想两边不遮挡内容,就需要中间栏给两边的位置腾出来。我们可以想到padding
和margin
都可以用来腾出位置,这两个属性就是圣杯布局的双飞翼布局的区别,不过双飞翼布局还需要稍微改造一下HTML的结构,这个等一下再说。
1.圣杯布局——使用padding
属性
- 第一步:为三个元素的父元素加上
padding
属性,腾开位置 - 第二步:由于腾开位置后会产生空白,所以使用
position: relative;
属性来移动左右两栏,这样就不会遮挡了。
不过这样布局有一个问题就是:有一个最小宽度,当页面小于最小宽度时布局就会乱掉。所以最好给body
设置一个min-width
。这个min-width
肯定不能是试出来的,怎么计算呢?就是left-width * 2 + right-width,至于为什么,简单的说就是:“由于设置了相对定位,所以当left原来的位置和right的位置产生重叠时,由于浮动的原因一行放不下就会换行”。所以布局就被打乱了。使用双飞翼布局就可以避免这个问题。
2.双飞翼布局——使用margin
属性
首先我们要对HTML结构稍微改变一下:
<header>双飞翼布局</header><div class="bd"><div class="main text"><div class="main-content">main</div></div><div class="left text">left</div><div class="right text">right</div></div>
<footer>footer</footer>
可以看到,我们在main
里面又加了一个内容层。如果知道盒子模型,就知道我们是不能直接给main
添加margin
属性,因为我们已经设置了width:100%
,再设置margin
的话就会超过窗口的宽度,所以我们再创造一个内容层,将所有要显示的内容放到main-content
中,给main-content
设置margin
就可以了。
- 因为不改变父元素所以只需要给
main-content
设置margin: 0 200px 0 200px;
属性就可以了达到效果
两种布局的区别
圣杯布局是中间栏为两边腾开位置。
双飞翼布局则是中间栏不变,将内容部分为两边腾开位置
参考
https://www.cnblogs.com/lovem...
https://www.zhihu.com/questio...
浅谈面试中常考的两种经典布局——圣杯与双飞翼相关推荐
- 浅谈面试中常考的两种经典布局——圣杯与双飞翼 1
2019独角兽企业重金招聘Python工程师标准>>> 圣杯和双飞翼布局介绍 最近正好碰到了写这种布局,一直没有总结过正好借这次机会总结一波,同时加强一下自己的理解. 圣杯布局和双飞 ...
- 浅谈面试中常提到的乐观锁与悲观锁
首先来看一下什么是锁? 在并发环境下,会出现多个线程对同一个资源进行争抢的情况,假设A线程对资源正在进行修改,此时B线程此时又对资源进行了修改,这就可能会导致数据不一致的问题.为了解决这个问题,很多编 ...
- mopso算法代码程序_JAVA程序员的必杀技,面试中常考的8个经典算法题,过程精妙,代码精炼...
总有一些题,超越了岁月,即便是经过了新框架的层层迭代,它依然散发着令人回味无穷的味道.下面的几个笔试题目,是JAVA面试中经常遇见的,大家一定要牢记于心,可别复习到了到时候又说不出来.我就吃过这种亏, ...
- 机器学习(Machine Learning)、深度学习(Deep Learning)、NLP面试中常考到的知识点和代码实现
网址:https://github.com/NLP-LOVE/ML-NLP 此项目是机器学习(Machine Learning).深度学习(Deep Learning).NLP面试中常考到的知识点和代 ...
- python中怎么计数_浅谈python中统计计数的几种方法和Counter详解
1) 使用字典dict() 循环遍历出一个可迭代对象中的元素,如果字典没有该元素,那么就让该元素作为字典的键,并将该键赋值为1,如果存在就将该元素对应的值加1. lists = ['a','a','b ...
- 单一修改高程值lisp_浅谈AutoCAD中修改高程的四种方法
浅谈 AutoCAD 中修改高程的四种方法 摘 要: 在使用 AutoCAD 进行数字化成图工作中,经常遇到线划的标高不为零,及高程点的值与实地不符,需要对其进行修改等情况,结合实 际工作经验,简单介 ...
- 反射 字段_详解面试中常考的 Java 反射机制
反射(Reflection) 是 Java 程序开发语言的特征之一,它允许运行中的 Java 程序对自身进行检查,或者说"自审",并能直接操作程序的内部属性和方法. 反射是一项高级 ...
- 【2023校招刷题】笔试及面试中常考知识点、手撕代码总结
文章目录 一.笔试/面试常考知识点 二.面试常考手撕代码 2.1.基本电路设计 2.2.复杂电路设计 2.3.跨时钟域设计 一.笔试/面试常考知识点 奇.偶.小数分频 [Verilog基础]分频器实现 ...
- 浅谈面试中的乐观锁与悲观锁
乐观锁与悲观锁 一.什么是乐观锁(Optimistic Locking)? 二.什么是悲观锁(Pessimistic Lock)? 悲观锁主要分为共享锁和排他锁 注意 三.并发控制 一.什么是乐观锁( ...
最新文章
- Cannot open D:\Program Files\Anaconda3\Scripts\pip-script.py
- 想要求职Web安全相关的岗位,你就必须要懂的知识
- (转)通过maven,给没有pom文件的jar包生成pom文件,maven项目引入本地jar包
- python消息订阅_python rabbitmq消息发布订阅
- leetcode 354. 俄罗斯套娃信封问题(dp+二分)
- LeetCode 1111. 有效括号的嵌套深度(奇偶分离)
- Permutations II
- 编程不需要天赋和激情
- Linux中的df命令
- 谈谈主策划需要的能力
- python中turtle画树
- 给Ubuntu18.04/Nvidia nano永久分配swap空间
- python爬虫如何使用代理ip
- mmo中匹配机制的思考与实现
- java鸡兔同笼:鸡兔同笼,鸡与兔,一共35只,共有94条脚,问,一个鸡有多少只,兔有多少只?
- oca sci 计算机视觉,张启灿
- 如何自动生成独一无二的漂亮高分辨率图片 - 图片背景生成器教程
- 【Linux】Linux中的文件搜索和查看
- 自学英语的手机软件哪个好,负基础
- 音乐标签修改器——Mp3tag