2. 程式人生 > >聖杯布局和雙飛翼布局的實現過程

聖杯布局和雙飛翼布局的實現過程

阿新 • • 發佈：2018-01-12
img sunshine 很多 toc 是把 優先 以及 watermark 完整

相信很多人都搜過聖杯布局和雙飛翼布局，也知道他們的由來，在這裏我就不一一贅述了，今天主要講的是當我遇到兩個布局時，我是怎樣一步一步從開始到實現的過程，例如：剛開始我也不懂為什麽聖杯布局和雙飛翼布局的區別，不懂聖杯布局為什麽會有相對定位等一些問題，在這裏給大家講下我的理解，如有錯誤，歡迎批評指正。 好了，接下來開始今天的寫文章之旅！ 聖杯布局和雙飛翼布局實現的問題都是三列布局，兩邊定寬，中間自適應布局，要註意的是中間欄(重要的東西)要在放在文檔流前面以優先渲染。 聖杯布局 1、首先定義三列，為它們設置簡單的css樣式，代碼如下： [html] view plain copy
  1. <!-- 聖杯布局 -->
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <style>
  6. .left{
  7. background: #E79F6D;
  8. width:150px;
  9. float:left;
  10. }
  11. .main{
  12. background: #D6D6D6;
  13. width:100%;
  14. float:left;
  15. }
  16. .right{
  17. background: #77BBDD;
  18. width:190px;
  19. float:left;
  20. }
  21. </style>
  22. </head>
  23. <body>
  24. <div class="con">
  25. <div class="main">Main</div>
  26. <div class="left">Left</div>
  27. <div class="right">Right</div>
  28. </div>
  29. </body>
  30. </html>
實現效果圖：技術分享圖片 這就是普通的讓三個div左浮動顯示出來的效果； 2、我們讓Left和Right與main在同一排，這裏需要用到margin-left的負值，這裏如果margin-left是負值，我理解的是在此基礎上往左邊移，設置Left的margin-left:-100%，也就是往左移main的整個寬度，這時Left的左邊緣跟main的左邊緣重疊，即Left的150px寬覆蓋住了main的150px寬；技術分享圖片 這時Right跑到左邊了，再對Right設置margin-left:-190px;即right也跑到上面去了，Right的右邊緣和main的右邊緣對齊，Right的寬度覆蓋了main的右邊的寬度；現在Left和Right都跑上面去了，但是需要註意的是main的值不見了，因為它被覆蓋了，設置left和right的margin值只是改變Left和Right的位置，對於main來說還是在以前的位置上，接下來要考慮的問題就是如何定位main的位置？技術分享圖片 3、需要給con容器加padding值，padding值的作用是給這整個容器均移動padding值，如在剛開始Left和Right沒上移的時候，給con加padding值的效果如下： 技術分享圖片 現在在Left和Right以及main都在同一排的情況下，加padding的值，就把main的定位到合適的位置了，但是這時的問題是：Left和Right也跟著一起縮了，所以要把Left和Right定位帶之前的位置，該怎麽定位呢？ 4、這時Left和Right需要用到css 的left屬性了，left 屬性規定元素的左邊緣,該屬性定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。註意使用屬性left的時候要給這個元素定位，絕對定位和相對定位都可以，如果不使用定位的話沒有效果，具體為什麽我也不知道，大家可以自行百度。 Left的css樣式加上：position:relative;left：-150px; 同理css的right屬性也是如此，position:relative;right:-190px; Left和Right回到它們各自的位置上，OK，完成聖杯的布局，效果圖貼上： 技術分享圖片 完整代碼： [html] view plain copy
  1. <!-- 聖杯布局 -->
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <style>
  6. .con {
  7. padding-left: 150px;
  8. padding-right: 190px;
  9. }
  10. .left{
  11. background: #E79F6D;
  12. width:150px;
  13. float:left;
  14. margin-left: -100%;
  15. position: relative;
  16. left:-150px;
  17. }
  18. .main{
  19. background: #D6D6D6;
  20. width:100%;
  21. float:left;
  22. }
  23. .right{
  24. background: #77BBDD;
  25. width:190px;
  26. float:left;
  27. margin-right: -190px;
  28. position: relative;
  29. right: -190px;
  30. }
  32. </style>
  34. </head>
  35. <body>
  36. <div class="con">
  37. <div class="main">Main</div>
  38. <div class="left">Left</div>
  39. <div class="right">Right</div>
  40. </div>
  41. </body>
  42. </html>
雙飛翼布局 雙飛翼布局可以看成是對聖杯布局的改進，因為聖杯布局用到的標簽屬性較多，用著也較麻煩，所以淘寶玉伯大大就提出來雙飛翼的布局，雙飛翼是把三列布局比作鳥，中間欄是鳥身，兩邊寬是鳥的兩翼，重要的是鳥的身體擺好，再安兩翼。思路和聖杯布局一樣，這裏我還是以上一個作例子，用到main，left，right（其實用main sub extra更形象）。前兩步都是一樣的，重要的是第三步，在前兩步的完成後已經形成同行排列，只不過main值被覆蓋了，聖杯布局的第三步是給con容器添加padding屬性，而雙飛翼布局是為main裏面的內容再加一個div，讓main的內容包含在內層div裏， [html] view plain copy
  1. <body>
  2. <div class="con">
  3. <div class="main">
  4. <div class="mc">Main</div>
  5. </div>
  6. <div class="left">Left</div>
  7. <div class="right">Right</div>
  8. </div>
  9. </body>
這時，只要設置mc的margin屬性就可以實現三列布局了，而且main也正常顯示；這裏，不用設置con容器的padding屬性，也不用給Left和Right運用left，right屬性，因為設置padding屬性就是為了不覆蓋main的值，現在將main裏的內容放在一個div裏，再為它設置margin屬性，也就實現了不遮擋main裏面的內容值，因此雙飛翼布局使用屬性個數減少，看著更簡便。代碼如下： [html] view plain copy
  1. <!-- 雙飛翼布局 -->
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <style>
  6. .left{
  7. background: #E79F6D;
  8. width:150px;
  9. float:left;
  10. margin-left: -100%;
  11. }
  12. .main{
  13. background: #D6D6D6;
  14. width:100%;
  15. float:left;
  16. }
  17. .mc {
  18. margin-left: 150px;
  19. }
  20. .right{
  21. background: #77BBDD;
  22. width:190px;
  23. float:left;
  24. margin-right: -190px;
  25. }
  27. </style>
  29. </head>
  30. <body>
  31. <div class="con">
  32. <div class="main">
  33. <div class="mc">Main</div>
  34. </div>
  35. <div class="left">Left</div>
  36. <div class="right">Right</div>
  37. </div>
  38. </body>
  39. </html>

OK，兩個布局的過程講解結束，謝謝大家，歡迎大家批評指正！

聖杯布局和雙飛翼布局的實現過程

相關推薦

聖杯布局和雙飛翼布局的實現過程

img sunshine 很多 toc 是把 優先 以及 watermark 完整 相信很多人都搜過聖杯布局和雙飛翼布局，也知道他們的由來，在這裏我就不一一贅述了，今天主要講的是當我遇到兩個布局時，我是怎樣一步一步從開始到實現的過程，例如：剛開始我也不懂為什麽聖杯布局和雙飛

理解聖杯布局和雙飛翼布局

oct 實現原理 charset ctype n) col str ood containe 一、共性和差異 首先兩個布局是有共性的： 實現效果一致：都是三欄布局，左右兩列寬度固定，中間列寬度自適應。中間列放重要的內容，因此在DOM結構中位置靠前優先渲染。 實現原理一致：

CSS3之聖杯布局和雙飛翼布局

purple type htm osi img code 方便 overflow class 聖杯布局： <!DOCTYPE html> <html lang="en"> <head> <meta charset="

聖盃佈局和雙飛翼佈局的實現過程

第一次寫部落格，語言組織不好，請大家諒解！ 相信很多人都搜過聖盃佈局和雙飛翼佈局，也知道他們的由來，在這裡我就不一一贅述了，今天主要講的是當我遇到兩個佈局時，我是怎樣一步一步從開始到實現的過程，例如：剛開始我也不懂為什麼聖盃佈局和雙飛翼佈局的區別，不懂聖盃佈局為什麼會有相

聖杯和雙飛翼布局

ati 兩個 div pad 遮擋 -h 布局 問題 position 聖杯布局： 原理：給包裹層設置左右padding值空出left和right的位置，使用負邊距，左邊margin-left：-100%，右邊margin-left：-100px；此時左右兩個盒子位於主盒子

布局——聖杯和雙飛翼布局

word 不換行 order 自己的 wrap borde 是我 pos 一個 css可以繼承的屬性有哪些？ Font 系列 text系列 color line-height border-radius的值的問題 四個值的順序是 左上 右上 右下 左下。 wh

聖杯布局and雙飛翼布局

content 尺寸 元素 不一定 oot alt ctype 間距 mar *聖杯布局 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti

響應式布局之浮動聖杯布局（雙飛翼布局）—-自適應寬度布局

由於 部分 gin asi 禁用 代碼 寬度 sof cin 前端開發中自適應布局在實際應用中越來越普遍，特別是隨著更多高級瀏覽器的出現html5和css3得到了更好的應用。 聖杯布局有個好處，完全符合前端開發中漸進增強的理念，由於瀏覽器解析是從DOM的上至下，這樣聖杯布局

CSS布局 -- 聖杯布局 & 雙飛翼布局

clear targe 圖片 上一個 info copy OS 如果 tool 按照我的理解，其實聖杯布局跟雙飛翼布局的實現，目的都是左右兩欄固定寬度，中間部分自適應。 但在這裏實現起來還是有一些區別的 【聖杯布局】 在這裏，實現了左(200px) 右(22

使用‘聖杯布局’、‘雙飛翼布局’來解釋自適應的三欄水平布局

head -h color ima details blue lex http eight 使用‘聖杯布局’、‘雙飛翼布局’來解釋自適應的三欄水平布局 實現三欄水平布局，其中left、right分別位於左右兩側，left寬度為200px，right寬度為300px，main

聖杯布局與雙飛翼布局全解

註意 bubuko nbsp 實現 自適應 lte .com 相對定位 data- 效果簡圖如下： 1、聖杯布局 註意middle寫在前面就行了，dom結構如下： DOM: <body> <div id

雙飛翼布局和聖杯布局解析

出現 解釋 它的 詳細 部分 style image 簡單 延伸 今天突然想起了溫習一下css布局。之前看雙飛翼布局只是粗略的看了一下，大概明白怎麽做，但是並沒有去延伸一下...還有它的孿生兄弟：聖杯布局。今天仔細的琢磨了一下；突然發現其實內容還不少的樣子。 雙飛翼布局或者

聖杯布局/雙飛翼布局異同和比較

gin containe margin ont 100% oat ctype -1 main <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <t

一個初學者對雙飛翼布局和聖杯布局的理解

head 給他 就是 固定 class ack scrip 特點 css Hi！大家好！歡迎大家進入我的博客！現在好多的大公司寫頁面的時候都會用到三欄布局，接下來要說的聖杯布局就是三欄布局中較為典型的例子。特點是，左右邊欄寬度固定，中間欄寬度自適應。廢話不多說直接上代碼。

css常見布局之三列布局--雙飛翼布局和聖杯布局

class 100% ron 中間 flow 一行 自適應 聖杯布局 使用 首先兩者都是兩邊寬度固定，中間寬度自適應，並且中間盒子(主題內容)放在最前面，以便優先渲染。 實現方案：都使用浮動來實現。 聖杯布局實現如下： <!DOCTYPE html>

雙飛翼布局與聖杯布局

聖杯布局 upload con 位置 container f2c apt 相對 mage 一、聖杯設計思路： DOM結構： <div class="container"> <div class="main">main</div>

雙飛翼布局以及聖杯布局

區域 自己 size 聖杯布局 ring ati -s position -a 雙飛翼布局和聖杯布局其實結果是一樣的，都是實現三欄布局，中間寬度自適應，兩端寬度固定，只是實現的方法不一樣 聖杯布局 　　三欄是獨立的，利用外層container的padding 以及 兩端的m

關於聖杯、雙飛翼布局

title clas nsf text ren sky none span border <!DOCTYPE html><html><head> <title>附加案例</title> <style type

HTML特殊布局--------雙飛翼布局

瀏覽器 lin child 固定 clas 自身 什麽 固定寬度 100% 今天看到以前寫的一篇布局的例子分享給大家，雙飛翼布局。 什麽是雙飛翼布局？？ 1.三列布局，中間寬度自適應，兩邊固定寬度; 2.中間欄在瀏覽器中優先展示渲染； 雙飛翼布局的原理：

雙飛翼布局

col width pan mage ges 縮放 元素 技術分享 影響 <style> *{ margin:0;padding:0; /* color:#fff; */ }