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

圣杯布局与双飞翼布局的理解与思考圣杯布局与双飞翼布局是前端工程师日常需要掌握的重要布局方法。按照我的理解，其实圣杯布局和双飞翼布局的实现都是针对固定宽度的两列，中间部分自适应，但是在圣杯布局图的实际实现上还是有一些区别的For:Left(200px),right(300px),middle适配都是在这里实现的。注意：在html代码中，中间部分要先放在最前面，再放左右，这样才能先渲染结构：首先定义整个布局的DOM结构，主题部分是中间的三列,由content包裹左右，其中middle在顶部定义。css左侧固定宽度为200px，右侧固定宽度为300px。然后在content上设置左右两列预留相应的空间，然后分别给三列设置width和float，得到如下效果：根据float的特性，中间的宽度为100%，所以占据了第一行的所有空间，left和right被挤到第二行，然后left和right放在之前预留的位置，然后定位position：relative用来放置left，right基于原来的位置右边的，向左移动200，向右移动300。最后的效果是：基本的布局效果已经完成了，但是我们还在考虑最后一步，就是宽度的问题。之前设置padding属性是为了预留左右位置，所以这里计算宽度的时候，别忘了双飞翼布局还是以上面的图案数据为例，设置每列的宽度和浮动,并预留一个空间结构：双飞翼布局的DOM结构和圣杯布局的区别在于中间和一个子元素innercss的最终效果是：由于双飞翼布局没有使用position：相对，不考虑计算宽度，预留空间设置多少空间。如果您认为阅读这篇博客对您有所收获，请关注。感谢您的支持，如有不足之处，请多多指教。微信号：bsl521921