前语

今日给咱们同享一个圣杯布局和双飞翼布局及他们之间的差异，这两个三行布局一直是一些大厂前端面试的高频考点，带你走进大厂面试题，活不多说，冲冲冲~

布局的作用

大厂面试必考题：三行布局之圣杯布局和双飞翼布局的差异

大厂面试必考题：三行布局之圣杯布局和双飞翼布局的差异

这两个种三行布局作用是相同的，完毕的作用如httpshtml简略网页代码和http的差异上图示html5所示，其特征为：

  • header和footer的高度为整个阅面试览器的宽度
  • 中心是个三行布局，le面试毛遂自荐一分钟ft和right的宽度是固定的。
  • 而middle的html简略网页代码http协议内容的宽度是自适应占满中心方位的，高度为三阅读器的前史栏中的最大高度

其实圣杯布局和双飞翼布局在前的html是什么意思处理是相同的，只不过是在中心处理https陈涉世家翻译及原文和http的差异的时分有写小差异罢了啦。

前期处理

  • 为了防止出现问题我仓鼠养殖八大忌讳们先给body设置一个min-width:600px;
  • 再将header和footer的宽度设为100%（整个阅读器的页面），并增加仓鼠养殖八大忌讳背景色便于差异。
  • 在contenhtmlt中咱们给left，right，midlle都增加float:阅读器的前史left作用，设置left，righ阅读器httpclient的阅读前史怎样删去html个人网页无缺代码t的宽高。
  • middle的宽度设置为100%，高度为与lhtml网页制造e阅读器前史记录删了怎样找回ft，right的高度相同，相同为了便面试技巧于看作用咱们这儿也给它们一个背面试问题大html5全及答案大全景色。
  • 这儿有仓鼠养殖八大忌讳个需要留心的当地，咱们还应该给conte床是什么结构nt设置一个高度，cohtml网页制造ntehttphtml标签 404nt中的di长沙市气候v咱们增加了fl面试毛遂自荐一分钟html个人网页无缺代码oat：lef面试毛遂自荐t特征，因而他们都脱离了文本流，导致出现了高度洼陷。

（ps:我阅读器前史上的痕迹在哪里这儿是在co崇圣寺三塔ntent中增加了一个overflow: hidden，构成一个BFC区域来处理这个问题的，感面试技巧和注意事项爱好的html网页制造小伙伴能够自行了解，当然你不这样做设置c阅读器的前史记录在哪ontent的高度就行啦）

*{
margi面试常见问题及答复技巧n: 0;
padding: 0;
}
bodyhttp 404{
min-width: 600px;
}面试问题
#hea长生十万年der,#footer{阅读器前史记录设置
heigh阅读器拜访过于再三不能用t: 50px;
width: 100%;
background: grey;
}
#middle,#l长沙市气候eft,#rightml网页制造ht{
float: left面试技巧;
}
#content{
overflow: hidden;
}
#left,#right{
width: 200px;
height: 200px;
backgroundHTML: pink;
}
#middl面试官被指小看北邮e{
width: 100%;
height: 200px;
background: yellowgreen;
}

大厂面试必考题：三行布局之圣杯布局和双飞翼布局的差异
咱们发现现在的页面阅读器的前史是这姿势的，那这怎样回事呢？

答案很简阅读器的前史记录在哪单，left仓鼠寿数,rig面试问题ht,mihttp代理ddle本来应该是在一条直线上的，但是content的宽度不行，就http 3阅读器的阅读前史怎样删除02把left，right两个盒子http 404挤下来啦。

那现在咱们别离来看看这两种布局接下来处理这个问的方法吧超神兽宠店：

圣杯布局

  • 咱们先给content设置一个padding：0 200px,将左右两头各腾出200px面试毛遂自荐一分钟宽度。
  • 接下来咱们只需要面试毛遂自荐将lefhttps和http的差异t,right，两个盒子阅读http://192.168.1.1登录器拜访过于再三不能用放在两个区域就行啦。
  • 毕竟别离给left，left设置margin特征调整方位。
#content{
overflo阅读器的阅读前史怎样删去w: hidden;
padding: 0 200px;
}
#left{
margin阅读器拜访过于再三不能用-lef阅读器的前史记录在哪t:-100%阅读器怎样检查前史阅读记载 ;
}
#r面试毛遂自荐3分钟通用ight{
margi仓鼠陈思思养殖八大忌讳n-left: -200pxhttpwatch;

咱们再来看一下作用

大厂面试必考题：三行布局之圣杯布局和双飞翼布局的差异

现在就能够看到left，r面试自仓鼠寿数告英勇ight和mhtml个人网页无缺代码iddle就来到了同一行啦阅读器拜访过于再三不能用，接下来的操作就So easy啦，给left和right别离一个relatHTMLive定位将他们调整到两头即可。

 #le面试毛遂自荐fthttp 404{
margin-left:-100% ;
pohttp协议sition: relative;
left:-200px;
}
#rig仓鼠养殖八大忌讳ht{
margin-left: -https和http的差异200px;
position: relative;
left:2阅读器00px;
}

当当当，见证奇迹的时分到啦~

大厂面试必考题：三行布局之圣杯布局和双飞翼布局的差异

双飞翼布局

那咱们看看双飞翼布局是怎样处理这个问题的呢。来往下看

  • 双飞翼布局面试常见问题及答复技巧是在middle下增加了一个middle-htt阅读器怎样翻开网站p 302inner盒子，将middle的内容放在这个盒子里面（这有html标签特点大全什么http协议用呢？不着急咱先往下看）。
  • 咱们和CSS圣长沙师范学院杯布局中相同也给float，left设置ma面试问题rgin值调整仓鼠养殖八大忌讳方位。
  • 但是此布局就不需要给l面试毛遂自荐一分钟eft,right设置定位啦。
#le陈涉世家翻html个人网页无缺代码译及原文ft{
float: left;
marghtmlin-left: -100%;长生十万年
}
#right面试{
float: left;
margin-left: -200px;
}
.middle-inner{
padding: 0 200px;
}

大厂面试必考题：三行布局之圣杯布局和双飞翼布局的差异
这时咱们发现middle中的内容不见了,此时咱们之前在midllhttps和http的差异e里面增加的midlle-inner盒子就派上用场啦，此时只需要给这个盒子设置一个margi陈涉世家翻译及原文n：0 200px,那么面试官被指轻视北邮咱们的内容是面试技巧和注意事项不是来到中心展现了呢。

.middl阅读仓鼠养殖八大忌讳器的前史记载在哪e-inner{
margin: 0 200px;
}

看作用

大厂面试必考题：三行布局之圣杯布局和双飞翼布局的差异
和咱们预阅读器前史上的痕迹在哪里期的相同httpwatch，大厂面面试试题不过http协议如此嘛，收工收工面试！！！！

总结一下

毕https和http的差异竟咱们来总结一下，双飞翼布局其实和圣杯布局的精华是相同的，都是经过设置负margin来完毕元素的排布，

  • 不同的便是htm阅读器前史记载设置l结构，双飞翼是在middle元素内陈思思部又设置了一个http 302mildhttp 500dle-inner并设置它的左右margin，而非圣杯布局的padding，来打扫两头元素陈涉世家翻译及原文的掩盖。
  • 双飞翼布局能够多了一个html结构，但是能够不用设置left,right元素的定位。

下面给一下无缺代码：

  • 圣杯布局
&lhttp协议t;!DOCTYPE阅读器怎样翻开网站 html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" conthttp://192.168.1.1登录ent="IE=edge">
<meta name="viewporhtml标签t" con阅读器的前史tent="width=device-width, initial-scahttp协议le=1.html个人网页无缺代码0">
<title&gt面试问题大全及答案大全;Document</titCSSle>
<link rel="stylesheet" href="style.css"&gt阅读器前史记录删了怎样找回;
</head>
<body>
<div clas阅读器下载s="wrap"&ghttp://www.baidu.co阅读器怎样翻开网站mt;
<div id=html个人网页无缺代码"header">header</div>
<div id="conhtmltent">
<div id=崇圣寺三塔"middle">
m床是什么结构iddle
</div>
<div id="left"面试问题大全及答案大全&gt长沙市气候;left</div>
<div id="r阅读器下载ight">right</div&gt阅读器拜访过于频频不能用;
</div>
<div id="foot阅读器怎样翻开网站e长沙师范阅读器前史记录设置学院r">footer</div>
</div>
</body&https和http的差异gt;
</html>ht阅读器前史上的痕迹在哪里ml5

*{
marghtml5in: 0;
padding: 0;
}
body阅读器拜访过于频频不能用面试仓鼠寿数{
min-width: 600px;
}
#heade阅读器的前史记录在哪r,#fo面试问题oter{
he面试ight: 50pxhttp:html标签特点大全//192.html简略网页代码168.1.1登录;
width: 100%;
background: gr面试毛遂自荐3分钟通用ehttpwatchy;
}
#middlehtt面试p 500,#left,#right{
float: left;
}阅读器前史记录删了怎样找回
#chtml个人网页无缺代码ontent{HTTP
overflow: hidden;
padding: 0 200p面试毛遂自荐3分钟通用x;阅http://192.168.1.1登录览器前史上的痕迹在哪里
}html代码
#left,#rig床是什么结构ht{
w面试问题idth: 200px;
heigh超神兽宠店t: 200px;
background: pink;
}
#middhttps和http的差异le{
width: 100%;床是什么结构
height: 200phttp:/html代码/www.baidu.comx;
background: yellohttpwatchwgreen;
}
#left{
margin-left:-100% ;
position: relative;
lhttp署理eft:-200px;
}
#righhtmhtml个人网页无缺代码l是什么意思t{
margihttp://192.168.1.1登录n-left: -200px;
position: relative;床是什么结构
lef超神兽宠店t:2阅读器的前史00px;
}
  • 双飞翼布局
<!DOCTYPE html&amhttp://www.baidu.comp;g阅读器前史记载删了怎样找回t;
<html lang="en">
<head>
<meta chars面试问题et="UTF-8">
<meta http-equiv="X-Uhttp代理A-Compatible" cohtml是什么意思ntent="IE=edge">
<meta name="viewp面试毛遂自荐3分钟通用ort" content="width=devi阅读器的前史ce-width, initial-sca阅读器前史上的痕迹在哪里le=1.0">
&lt超神兽宠店;ti面试官被指轻视北邮tle>Document</title&面长生十万年试毛遂自荐gt;
<link rel="styl面试问题esheet" href=阅读器的前史"style.css">
</head>
<b阅读器拜访过于频频不能用ody>
&lthtml代码;div class="wrap">
<div id="hea仓鼠养殖八大忌讳der">header</div>
<div仓鼠养殖八大忌讳 id="面试技巧和注意事项chttp协议ontent">
<div id="middle">
<div class=超神兽宠店"middle-inner">
middle
</div>
</divhtml代码>
&lt长沙市气候;div id="left">left</html网页制造div>
<div id="right"&g长沙市气候t;right</div>
</di面试毛遂自荐一分钟v>
<div id="foot阅读器的阅读前面试技巧史怎样删去ehtml文件怎样翻开r">footer</div>
</di阅读器下载v>
&l陈思思t;/body长沙市气候>
&lhttp 302t;/html>
```css陈涉世家翻译及原文
*{
margin: 0;
padding: 0;http 500
}
.wrap{
min-width: 600pxHTML;
}
#hea长生十万年面试官被指小看北邮der,#footer{
height: 50px;http://192.168.1.1登录
width: 100%;
background:grey;
}
#left,#仓鼠养殖八大忌讳right{
wi阅读器的前史dth: 200px;
height: 200px;ht面试官被指轻视北邮tp 500
background超神兽宠店: green;
}
#middle{
backgro长沙市气候und: pink;
width: 100%;
float: lehttp 500ft;
heig面试官被指小看北邮ht:200px;
}
#content{
overflow: hidden;
}
#left{
float: lefthttp 500;
margin-left: -100%;
}
#right{
float:阅读器下载 left;
margin-left: -阅读器200px;
}
.middle-inner{
margin面试技巧和注意事项: 0 200px阅读器;
}
```js