前端布局:圣杯布局/双飞翼布局(两者小小的区别)
今天逛知乎日常搜索了几个关于前端面试的问题,本以为学了react之类的框架就可以放弃css,现在想想自己真是太天真了。老前辈们说过:“Css你可以不把每一个属性全都记住,但是你一定要在你需要的时候知道去哪里找。”不过这句话有迷惑性,我再来改一下,常见的属性你一定要记住,不常见,不经常使用的你需要记住有这个属性,在你看到这个属性的时候,你要知道你见过,不要一头雾水一脸懵逼。
圣杯布局有好几种方法实现,它并不是只有一种固定格式.
最常见的圣杯布局MDN官方文档,基本上就是圣杯布局的大概思路.
页面nav占据最大的宽度,然后两边固定宽度,中间内容可以根据用户使用自动缩放。
1.flex 实现
如果要用flex实现的话 需要把<nav >和footer拿出来,给中间三个内容一个单独的父容器,给父容器一个display:flex (或许有更好的方法不用分离,但是目前我只想到了分离出来nav和footer)
我们要求的大概思路就是,nav和footer占据用户屏幕的百分百宽度,中间内容分为三列,脑子里一定要有一个清晰的网页轮廓。
给左右两边定宽,然后给中间内容一个flex:1,这里左右两边的宽度也可以用flex-basis表示,这里需要理解的点上flex:1这个地方,flex:number (代表着这个元素可以如何分配剩下的空间,因为左右默认值为0,我单独给center设置了1,那么代表着center将独自享有剩下的所有空间,那么就实现了我们想要的效果。)要注意的是flex:1是flex的简写模式,它的简写值可以有三个,在这里就不过多赘述.自行查阅mdn。
2.负margin 加浮动(这个太经典了,建议熟读百遍)
同样是这样的布局模式;
通过上面简单的样式布局,呈现出页面效果如下(左右两边的空白是content的padding,准备放入left和right 的div的,通常情况padding的值就是左右两边sider的宽度,一般是固定宽度,你也可以设置margin来等效替换padding,得到的布局效果是一样的)
这时候我们需要用到浮动来将我们的左右元素移动到相应的位置,
这里为什么要margin-100%呢?你可以想象本来这三个元素应该是在同一行的,但是由于center盒子宽度满了,强行把left和right挤到下一行了,但是其实他们应该排在center盒子的最右边,因为div盒子是center left right这个上下文顺序在html文档里写,
我们给左边盒子一个-margin,注意margin是相对于父亲元素来说的,我的-100%,也就是紧挨着父亲元素的最左边,此时left盒子和center盒子的左边重合。这时候我需要左边盒子再往左移动300px,也就是父亲盒子为它空出去的宽度。
!!!!注意float是沿容器,容器,容器,并没有脱离父元素的限制!!!
(到这你应该也就知道下一步要干什么了,对,我们要让他脱离父亲元素的限制)
ok,第一时间就应该想到使用position这个方法,那么positon的relative是最合适的,(如果你想达成用户滑动屏幕,左右栏固定的效果也可以用absolute。absolute的定位方式会去找上一层非static模式的盒子,一直找到浏览器窗口为止。)那么该右边盒子紧挨着center了(一定要注意这里的意思,本来右边盒子也是和center盒子紧挨着在同一行的)这时候给了一个负的自身的宽度,那么他就会向左边移动,覆盖住center200px也就是自身宽度的值 ,但是这时候它还是没有摆脱父元素的限制,所以也要用定位,让他向右偏移自身宽度的长度
最终全部css代码和结果如下
3.双飞翼布局(广购平台页面经典布局)
圣杯布局和双飞翼布局实现的样式是大致基本相同的,只不过双飞翼布局的内容区用单独的div包裹,让这个div来承担浮动的角色。
前端布局:圣杯布局/双飞翼布局(两者小小的区别)相关推荐
- 浅谈面试中常考的两种经典布局——圣杯与双飞翼
圣杯和双飞翼布局介绍 最近正好碰到了写这种布局,一直没有总结过正好借这次机会总结一波,同时加强一下自己的理解. 博客链接:http://www.xluos.com/index.ph... 圣杯布局和双 ...
- 浅谈面试中常考的两种经典布局——圣杯与双飞翼 1
2019独角兽企业重金招聘Python工程师标准>>> 圣杯和双飞翼布局介绍 最近正好碰到了写这种布局,一直没有总结过正好借这次机会总结一波,同时加强一下自己的理解. 圣杯布局和双飞 ...
- 【CSS】圣杯、双飞翼布局
[CSS]圣杯.双飞翼布局 文章目录 [CSS]圣杯.双飞翼布局 圣杯布局 基本布局样式 接下来要把主区域移动到中间 把右区域放在主区域的右边 移动左右区域,防止两边挡住中间 完整代码 双飞翼布局 基 ...
- 双飞翼 html 布局,css实现双飞翼布局的四种方法(附代码)
本篇文章给大家带来的内容是关于css实现双飞翼布局的四种方法(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 圣杯布局.双飞翼布局效果图 从效果图来看圣杯布局.双飞翼布局效果 ...
- 双飞翼布局内容不换行_web前端入门到实战:圣杯布局和双飞翼布局
稍微了解前端的人都知道,圣杯布局和双飞翼布局是前端面试时必问的问题,因为它既能体现你懂HTML结构又能体现出你对DIV+CSS布局的掌握,毕竟我们学习CSS主要就是为了更好地布局带来最好的用户体验嘛~ ...
- 双飞翼HTML圣杯布局,Web前端:CSS中的圣杯布局与双飞翼布局
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态 ...
- CSS布局(等宽、圣杯、双飞翼、底部固定)
1. 全背景等宽内容居中布局 即将元素左右padding设置为父元素宽度的50%减去等宽内容的一半,不需要设置width. 要点:使用**calc()** <!DOCTYPE html> ...
- 手把手教你理解圣杯布局和双飞翼布局
圣杯布局和双飞翼布局都是三栏布局的典型布局. 1.为了保证页面渲染快,在写结构的时候,需要把中间盒子放在左右盒子的前面,中间一栏最先加载,渲染出来(主要内容). 2.两侧内容宽度固定,中间自适应,盒子 ...
- 【经典布局】圣杯布局和双飞翼布局
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 一.两种布局的对比 二.使用步骤 1. 圣杯布局 2. 双飞翼布局 总结 前言 圣杯布局和双飞翼布局解决的问题是一样的 ...
- 圣杯布局、双飞翼布局的理解及对比
一.圣杯布局 1.圣杯布局的DOM结构如下: 圣杯特点简单记为:有头.有尾.包三列,圣杯布局中间是有container大容器包裹着左中右区域的. <!--特点:有头.有尾.包三列(有个conta ...
最新文章
- python学生管理系统界面-Python实现GUI学生信息管理系统
- java web 项目在tomcat上显示空白页的解决
- webGL简单例子(klayge)
- 数据挖掘—BP神经网络(Java实现)
- Android导入第三方静态库.a编译成动态库.so
- Java基础学习总结(170)——Java8并发工具类CompletableFuture学习总结
- linux下安装与部署redis
- Java和C++的对照
- postgresql 编写函数实现 获取中文姓名全拼
- oracle查看当前用户表空间占用情况
- Xcode6与Xcode5之间的细节差别(Precompile Prefix Header)
- 令牌桶限流-java实现
- MATLAB 基础笔记(二):常用矩阵的生成
- SAP CRM 如何高效debug 查看BOL的值
- 动作捕捉系统用于机器人关节位移与几何参数标定
- Java8之新日期时间篇
- 阿德莱德大学计算机考研专业,阿德莱德大学研究生学制是几年?
- 前50%股票成交量占比计算
- 湖北省天门市谷歌高清卫星地图下载
- BUCK降压电路自动计算表格