雙飛翼佈局和聖盃佈局深度分析

時間 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。