自己雖然經歷著web應用的開發,總是拿著別人寫好的css來引用到自己的專案當中,甚至一度迷上了bootstrap,發現有了它自己可以不用在寫程式邏輯的同時還要去修改別人的css.當然開發的應用大多數是企業內部應用,個別網際網路的程式.2016偶然的機會接觸到前端這個概念,發現自己還是挺喜歡前端的這些知識的.空閒之餘,便自己學習了起來.好了廢話不說了,先把學習到的這些知識記錄下來今天的內容是 --聖杯 & 雙飛翼布局
聖杯布局來自國外,大家可以自己找度娘看下,而雙飛翼布局則源自於**ued團隊.它倆之間其實都一回事,只是在實現思想上有些不同,都是解決乙個經典問題,三欄布局,兩邊固定寬度,中間自適應.上**再解釋.
聖杯:第一步:html內容結構:注意,名為main的div要放置第一行優先渲染
第二步:當前每個div給出相應樣式
當前面頁效果:
由於三個div設定了浮動,中間100%寬度,所以把左右兩個div給擠到下面去了. 然而正是聖杯布局該上場了.分別設定left的盒子左距為margin-left:-100%;右邊(right)盒子margin-left:-100px;效果如下
此時三個盒子都是浮動的,而且"我是左"的盒子騎到了人家"我是中間"的頭上,把字都給覆蓋了.可我們想要的結果是我是左就在左,我是右就在右邊,我是中間就在中間,且"我是中間"的文字不應被遮住.但這裡還有個疑問,為什麼左邊的left要設定margin-left的方向是-100%呢?而右邊的right只是設定成了-100px呢?,可以試著將left的負邊距設定為margin-left不停的向負方向增加,看效果就明白,如果一直是以負方向的增加,那麼left的盒子會一直往左方向移動,直接在本身寬度(150)與移動的長度相一致,你會看不到這個盒子了,其實這個時候它已然移動上方去了,如果你再試著將這個值增加一點就會看到,如下圖
是可以看到這個盒子正一點點的向左移動,這個值可以任意的調,發現挺有意思的.同理右邊的盒子也是設定margin-left,設定多少為合適,因為右邊的盒子是100px的寬度,只需要向負方向設定-100px即可.
接下來是解決中間的部分不應被遮擋的問題.那麼聖杯布局的作用來了,首先我們需要把人家兩邊盒子所需要的空間給預留出來.左邊是150px,右邊是100px,利用padding-left以及padding-right.如下樣式,注意:這個預留位置是設定在container上的.
這時我們把left的盒子設定定位position:relative,在相對於自己的位置向左再移動-150px這時左邊的盒子就跑到左邊去了,如下完整**截圖,注意紅框內的設定
頁面效果
這樣中間的幾個盒子高度沒有設,有點不太明顯,這裡沒設,主要是想接下來咱們完成乙個等高布局設定.例如我們把中間的內容給增加一些
此時中間高度是拉開了,但左右兩邊沒有與中間保持一致,這裡我們可以利用乙個方法(margin-bottom和padding-bottom)來完成,**下如
這樣一放再一收確實也可以達到等高效果.如下
醬紫基本上聖杯布局算是完成了,其實我們還有更簡便的方法,那就是下面的"雙飛翼"布局,雙飛翼最大的特點是在我是中間的盒子裡再增加乙個div,下面給出兩種布局的完整css**,
到這裡基本上完成了聖杯布局與雙飛翼布的學習.
到這裡也許有個疑問．這兩種到底有啥區別？用在什麼地方？現在都有流行的bootstrap了．．．
我只能把我的理解說下，例如對聖杯布局中的某一塊(div="main")的調整為position:absolute，那麼剛剛寫的那個聖杯布局就掛掉了．還有就是這個是純粹學習前端知識，別在寫前端頁面時動不動上來就弄個bootstrap或是彈性布局，
要知道如果乙個公司要開發適配各種瀏覽器(包括ie6,7,8,9)時該如果去做呢．當然也許會有其他方法．．．．．
聖杯布局 雙飛翼布局
前言 上班划水偷空了解了一下聖杯布局和雙飛翼布局，一聽這兩個名字，覺得不明覺厲，其實就是三欄布局，左右兩邊的盒子寬度固定，中間的盒子寬度自適應。以下內容均是總結網際網路上別人的文章。覺得有意思就記錄一下。聖杯布局，方法一 container middle left right style head ...
布局 聖杯布局 雙飛翼布局
隨著前端技術的發展推進，web端的布局方式已基本成熟，那麼在 布局方式中，三列布局最為常用，布局方式也有很多，漸漸的開發者們開始從效率的角度優化自己的 如果三排布局能將中間的模組放在dom樹前面，那麼瀏覽器在做重繪的時候不久有限顯示了嗎？機制的開發者們開始圍繞者這個方向進行了dom的優化，於是誕生了...
聖杯與雙飛翼布局
聖杯布局和雙飛翼布局解決的問題是一樣的，就是兩邊定寬，中間自適應的三欄布局，中間欄要放在文件流前面以優先渲染。但是聖杯布局和雙飛翼布局在實現方式上有一點差別。聖杯布局的來歷是2006年發在a list part上的這篇文章 雙飛翼布局介紹 始於 ued 聖杯是西方表達 渴求之物 的意思，不是一種對頁...