博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
圣杯布局和双飞翼布局的理解与思考
阅读量:5894 次
发布时间:2019-06-19

本文共 804 字,大约阅读时间需要 2 分钟。

**圣杯布局和双飞翼布局都是前端工程师需要日常掌握的重要布局方式。按照我的理解,其实圣杯布局和双飞翼布局的实现,目的都是在于两栏固定宽度,中间部分自适应

但是实际实现起来 还是有一些区别的

圣杯布局

图为:

圣杯布局和双飞翼布局的理解与思考

在这里实现了 左(200px)、右(300px)、中间自适应。

注:

html代码中,middle部分首先要放在最前面部分,然后是left、right,以便先行渲染

结构:

圣杯布局和双飞翼布局的理解与思考

首先定义出整个布局的DOM结构,主题部分是由content包裹的middle、left,right三列,其中middle定义在最前面。

css

左侧的固定宽度为200px,右侧的固定宽度为300px,则在content上设置

圣杯布局和双飞翼布局的理解与思考

为左右两列预留出相应的空间

圣杯布局和双飞翼布局的理解与思考

然后分别给三列设置宽度与浮动

圣杯布局和双飞翼布局的理解与思考

得到如下效果:

圣杯布局和双飞翼布局的理解与思考

根据浮动的特性,middle的宽度为100%,所以占据了第一行的所有空间,left和right被挤到了第二行

接下来将left和right放置到之前预留出的位置

圣杯布局和双飞翼布局的理解与思考

随后使用定位position:relative,在left、right

原来的位置基础上左移200,右移300

圣杯布局和双飞翼布局的理解与思考

最终效果为:

圣杯布局和双飞翼布局的理解与思考

到这基本布局效果已经完成,但还是在考虑最后一步,那就是宽的问题,之前为了预留左右位置设置了padding属性,所以这里计算宽的时候不要忘记了这个

双飞翼布局

还是以上述格局数据为例,设置各列的宽度与浮动,并且预留出空间

结构:

圣杯布局和双飞翼布局的理解与思考

双飞翼布局的DOM结构与圣杯布局的区别是middle还有一个子元素inner

css

圣杯布局和双飞翼布局的理解与思考

最终效果为:

圣杯布局和双飞翼布局的理解与思考

由于双飞翼布局没有用到position:relative

所以不考虑计算宽度,预留多少空间,就设置多少空间

如果,您认为阅读这篇博客让你有些收获,请您关注一下。感谢您的支持,如有不足,请多指教。

微信号:bsl521921

转载于:https://blog.51cto.com/14322367/2392041

你可能感兴趣的文章
深入了解Android蓝牙Bluetooth——《基础篇》
查看>>
Vue组成和第3方插件
查看>>
BZOJ 1179: [Apio2009]Atm(tarjan+SPFA)
查看>>
mininet安装与简单命令总结
查看>>
mvc做网站怎么在mvc中直接访问.html网页 [问题点数:20分]
查看>>
echart 折线图、柱状图、饼图、环形图颜色修改
查看>>
win7 32位支持多大内存|win7 32位旗舰版最多能识别多少内存
查看>>
ASP.NET MVC下使用AngularJs语言(五):ng-selected
查看>>
第2章 Python基础-字符编码&数据类型 综合 练习题
查看>>
Adobe Acrobat 9 Pro序列号
查看>>
怎样高速地安装Ubuntu SDK
查看>>
mybatis与分布式事务的面试
查看>>
如何在一张ppt中插入多张图片并能依次播放
查看>>
cocos creator热更新教程
查看>>
cookie的安全性问题
查看>>
ArcGIS 10.4的0x80040228许可错误
查看>>
SpringBoot Docker Mysql安装,Docker安装Mysql
查看>>
MT2018笔试题之计算数字位数
查看>>
第四百一十三节,python面向对象,组合、类创建的本质、依赖注入
查看>>
df -h和du -sh显示结果不一样的原因及解决
查看>>