div+css佈局記扎

實際開發網站過程當中邊碰壁邊積累了一些div+css佈局相關的小技巧，在這裏作一些整理與你們一塊兒探討。本文章將間歇性更新。

1.div+css佈局綜述

div+css佈局我的觀點就是「盒子套盒子」的關係，body做爲整個頁面是最大的盒，而在這個最大的盒裏面的第一層子盒們構成了全局佈局，在這些子盒內部，又可能分出若干個盒以造成局部佈局。所以，在規劃一個網頁的佈局時，先區分出有哪些大的板塊做爲處於全局佈局一級的大盒，再在這些大盒內部進行局部小盒子的佈局以最終實現想要達到的頁面佈局效果。

例如，上面的佈局圖是比較常見的網頁佈局方式，A表明body，也即整個頁面。這裏強調整個頁面是由於隨着瀏覽器大小在用戶的拖放下發生變化，body的大小長寬也在跟着改變，注意這一點有利於咱們避免一些問題（如使用絕對定位（position:absolute）卻忽略了body的可變性致使在拖放下網頁結構發生變化），同時這一點也能夠被咱們所利用（下面會講到）。其次，咱們能夠比較明顯地知道第一層子盒總共有三個，分別爲B、C、D盒，他們佔據了網頁的上、中和下部分。

通常而言，B部分經常使用於網頁的頁眉，顯示logo和導航菜單等，C部分做爲網頁主體，是網頁主要內容所在的位置，D部分做爲頁尾，提供關於版權備案信息及相關鏈接等信息。咱們注意到，這三個部分並無佔滿整個body，這是正常的，咱們沒法假設用戶的屏幕大小以及其瀏覽器的實際顯示大小，所以，合理的解決方案應該是讓全局佈局中的這些盒子居中放置，並給予呈現內容所須要的而且是合適的寬度值（爲何不須要高度值呢，由於網頁是容許下拉滾動瀏覽的，而橫向的滾動每每會引發用戶的不滿）。那麼什麼是合適的寬度值呢，筆記本電腦/臺式機的屏幕通常橫向的像素均可以達到1024px以上，所以，只要在這個範圍內(好比980px這個經常使用的數值)，均可以認爲是合適的，而後讓他們居中（經過設置margin:auto（或具體設置margin-left和margin-right:auto，在當前行只有一個元素時，設置auto可讓left和right同樣大））。至於那些沒有填滿的部分，能夠對body使用恰當的背景色或背景圖片解決。

三個全局盒內部的佈局一般稱爲局部佈局（其實咱們會發現，全局和局部都是相對而言的），他們是真正考驗佈局能力的地方，而這其間所涉及到的一些技巧也是我寫這篇博客的緣由。

2.關於div

div標籤的用途在於將一個或若干個元素組合成一個塊級（有關塊級與非塊級元素能夠參考http://www.cnblogs.com/double-bin/archive/2011/12/19/2293090.html）總體，從而咱們能夠在佈局中把一些元素做爲一個總體集合來操縱（好比這些元素之間的相對位置要求固定，且他們與集合外元素之間的位置關係是經過這個集合來反應的），同時，這也有利於咱們對這些元素之間的相對位置採起更方便的佈局策略(好比，有一個<a>但願跟着一個<span>動而動，那麼咱們就應該爲它們創建一個div以包裹他們從而實現對他們的綁定)。

注意到html/css中的不少屬性都是相對父元素而言的(如使用百分比定義width、height時，與父元素直接接觸元素的margin屬性等)，所以用一個div包裹一些元素也爲利用這一點提供了條件(好比有時咱們但願兩個按鈕(也能夠是<a>)保持必定比率的大小關係，那麼給他們一個div包裹起來，讓width、height屬性是父元素的百分比便可控制這一點)。此外，局部佈局中，一個元素的定位也每每是經過跟父元素的margin關係獲得。