聖盃/雙飛翼佈局

本身雖然經歷着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)時該若是去作呢．固然也許會有其餘方法．．．．．