【布局】圣杯布局&双飞翼布局

时间：2023-04-02 15:56:06 HTML

背景随着前端技术的发展，web端的布局方式已经基本成熟，所以在网站布局方式中，三栏式布局是最多的常用的，布局方式也有很多，逐渐发展起来的开发者开始从效率的角度优化自己的代码“如果三行布局可以把中间的模块放在DOM树前面，浏览器会不会很快显示受限显示是重绘吗？”机制的开发者开始着眼于dom往这个方向优化，于是诞生了两种著名的布局方式，圣杯布局和直奔主题的双飞翼布局。jsfiddle.net/zwwill/px57xzp4/header

main

左

右

页脚.container{width:500px;margin:50pxauto;}.wrapper{padding:0100px0100px;}.col{position:relative;float:left;}.header,.footer{height:50px;}.main{width:100%;height:200px;}.left{width:100px;高度：200px；margin-left:-100%;left:-100px;}.right{width:100px;高度：200px；:-100px;右：-100px;}.clearfix::af三{内容：“”；显示：块；明确：两者；可见性：隐藏；高度：0；overflow:hidden;}双飞翼布局ps：“这不是同一张图吗？”“是啊！是一样的，因为解决的是同一个问题吗？”【JsFiddle】https://jsfiddle.net/zwwill/5xjyeu9d/header

mainleftrightfooter.col{float:left;}.header{height:50px;}.main{width:100%;}.main-wrap{margin:0100px0100px;height:200px;}.left{width:100px;高度：200px；margin-left:-100%;}.right{width:100px;高度：200px；-100px;}.footer{height:50px;}.clearfix::after{content:"";显示：块；明确：两者；可见性：隐藏；高度：0；布局就像，杯子（wrapper）挂了两个“耳朵”（左，右），所有的容量都给了杯身（main），耳朵只能挂在两边。双飞翼布局就像，鸟（wrapper）的翅膀（左，右）和身体（main）是鸟的一大部分，翅膀也是身体的一部分。虽然比较抽象，但有助于区分两种布局。实在看不懂就码字吧，我“拉”的本事还不够。其他布局其他布局方案已在本文整理，欢迎大家指正【整理】CSS布局方案

上一篇：前端面试每日3+1——第1018天

下一篇：静态资源的处理

【布局】圣杯布局&双飞翼布局相关文章