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

王伟廷发布于2019-08-02 16:16 / 1401人阅读

摘要：圣杯布局和双飞翼布局的理解与思考圣杯布局和双飞翼布局都是前端工程师需要日常掌握的重要布局方式。注代码中，部分首先要放在最前面部分，然后是，以便先行渲染结构首先定义出整个布局的结构，主题部分是由包裹的，三列，其中定义在最前面。

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

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

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

圣杯布局

图为：

在这里实现了左（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

GPU云服务器云服务器圣杯布局双飞翼布局样式和布局 html的布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/55013.html

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

摘要：圣杯布局和双飞翼布局的理解与思考圣杯布局和双飞翼布局都是前端工程师需要日常掌握的重要布局方式。注代码中，部分首先要放在最前面部分，然后是，以便先行渲染结构首先定义出整个布局的结构，主题部分是由包裹的，三列，其中定义在最前面。圣杯布局和双飞翼布局的理解与思考圣杯布局和双飞翼布局都是前端工程师需要日常掌握的重要布局方式。按照我的理解，其实圣杯布局和双飞翼布局的实现，目的都是在于两栏固定...

qpwoeiru96 2019-08-30 10:49 评论0 收藏0
CSS三栏布局的经典实现方法

摘要：经典方法三栏布局的方法有很多种，其中最经典的方法莫过于圣杯布局和双飞翼布局。而双飞翼布局方法无需相对位置属性，而是采用为中栏内容创建的方式，通过来实现布局。文章第二部分阐述了流行的圣杯布局方法和双飞翼布局方法的细节和异同。三栏是CSS布局中常见的一种布局模式，顾名思义，就是将网页内容以三列的形式呈现。通常，三栏布局中的左栏和右栏是固定宽度的，中栏随着窗口宽度的变化而变化。本文探讨栏三...

neuSnail 2019-08-30 15:56 评论0 收藏0
CSS三栏布局的经典实现方法

摘要：经典方法三栏布局的方法有很多种，其中最经典的方法莫过于圣杯布局和双飞翼布局。而双飞翼布局方法无需相对位置属性，而是采用为中栏内容创建的方式，通过来实现布局。文章第二部分阐述了流行的圣杯布局方法和双飞翼布局方法的细节和异同。三栏是CSS布局中常见的一种布局模式，顾名思义，就是将网页内容以三列的形式呈现。通常，三栏布局中的左栏和右栏是固定宽度的，中栏随着窗口宽度的变化而变化。本文探讨栏三...

Forelax 2019-08-02 14:31 评论0 收藏0
布局

摘要：双飞翼布局是对圣杯布局的优化，先实现中间最重要的身体部分，再实现翅膀，所以叫双飞翼布局。参考资料跟这些特性相互叠加后会怎么样经典布局之双飞翼布局 ‘display’、’position’ 和 ‘float’ 的相互关系 showImg(https://segmentfault.com/img/bVECeu?w=720&h=540); 圣杯布局和双飞翼什么是圣杯布局和双飞翼布局？圣杯...

wangtdgoodluck 2019-08-29 11:29 评论0 收藏0
浅谈面试中常考的两种经典布局——圣杯与双飞翼

摘要：圣杯和双飞翼布局介绍最近正好碰到了写这种布局，一直没有总结过正好借这次机会总结一波，同时加强一下自己的理解。使用双飞翼布局就可以避免这个问题。双飞翼布局则是中间栏不变，将内容部分为两边腾开位置参考圣杯和双飞翼布局介绍 showImg(http://www.xluos.com/usr/uploads/2018/02/990972879.png);最近正好碰到了写这种布局，一直没有总结过...

SwordFly 2019-08-30 13:58 评论0 收藏0