双飞翼布局和圣杯布局深度分析

时间 2020-07-05

标签双飞布局深度分析繁體版

原文原文链接

圣杯布局

核心实现：中间三栏都得使用浮动再加上relative，而后父元素使用padding空出左栏和右栏的宽度位置，中间元素使用100%宽度，html

这样左中右就已经在一竖列了，配合浮动使用margin-left(右边栏right): -100%可让margin基于自身往左（往右）偏移（必定要在所有都浮动的同级元素使用才有效），在这里布局

经过使用可让左右边栏和中间栏进行重合，再使用定位left(right)，把边栏移到基于自身的指定位置就行。调试

双飞翼布局

核心实现：中间三栏都得使用浮动，中间栏宽度设为100%嵌套一个子盒子，子盒子用margin撑出两边栏的宽度，左边栏是使用margin-left:-100%使多列变为一行，右边栏使用margin-left: -边栏宽度实现一行code

共同点

都属于上中下，左中右上下三栏布局
都是中间内容居中展现，两边定宽
都是经过浮动+margin-left: -100%实现同行，中间自适应宽度

区别

圣杯布局是使用relative定位把边栏移到指定的横向位置，用到了left(right)
双飞翼是经过建立中间盒子的子div，用margin撑出左右边栏的宽度，省去了定位
在对右边栏写样式的时候，圣杯布局使用margin-right: -100%;或margin-left:-右边栏宽度;都能实现定位；可是双飞翼布局只能使用margin-left: -右边栏宽度，若是使用margin-right会溢出屏幕一个右边栏的宽度；形成这个缘由多是margin-100%会相对于上一个元素来进行定位判断，双飞翼中left是根据width100%的中间元素来判断的，因此right天然也是根据width100%来判断的，圣杯就不一样是根据body中已经padding好了的来判断。

3+再深一点，两种布局方式经过调试器看边栏，margin区域+内容区域 = 中间栏的宽度，这也是为何使用浮动，都把中间栏放在第一个写，让后面两个边栏元素都要基于他浮动。双飞翼相对的是充满屏幕100%的来margin，因此这时候用了margin-right天然就到屏幕外面去了因此只能用margin-left，而圣杯模式是相对于已经居中了的center来，因此他只能用margin-right,-100%或者具体像素均可以，若是使用margin-left就会抢占center的位置。

附录：代码htm

圣杯
<!DOCTYPE  html\>

<html  lang\="en"\>

  

<head\>

<meta  charset\="UTF-8"\>

<meta  name\="viewport"  content\="width=device-width, initial-scale=1.0"\>

<title\>Document</title\>

<style\>

body  {

min-width:  550px;

}

#container  {

padding-left:  200px;

padding-right:  150px;

}

#container  .column  {

position:  relative;

float:  left;

}

#center  {

width:  100%;

}

#left  {

width:  200px;

right:  200px;

margin-left:  \-100%;

}

#right  {

width:  150px;

margin-right:  \-150px;

}

</style\>

</head\>

  

<body\>

<div  id\="container"\>

<div  id\="center"  class\="column"\>1111</div\>

<div  id\="left"  class\="column"\>222</div\>

<div  id\="right"  class\="column"\>333</div\>

</div\>

</body\>

  

</html\>

  
  
双飞翼~~~~
<!DOCTYPE html>

<html lang="en">

  

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

body {

min-width: 500px;

}

#container {

width: 100%;

}

.column {

float: left;

}

#center {

margin-left: 200px;

margin-right: 150px;

}

#left {

width: 200px;

margin-left: -100%

}

#right {

width: 150px;

margin-left: -150px;

}

</style>

</head>

  

<body>

<div id="container" class="column">

<div id="center">1111</div>

</div>

<div id="left" class="column">222</div>

<div id="right" class="column">333</div>

</body>

  

</html>