最近在做一些關於網頁布局的任務，關於網頁布局和樣式等方面的知識，一直沒有一些系統的資料將所有使用場景全部囊括，這方面的知識總是需要不斷的實踐和積累的，所以突然想要做一些總結，以便應對之後可能出現的情況。現在將關於網頁布局的一些知識進行說明。
網頁布局總共有三種定位方式，分別為標準文件流，絕對定位、浮動定位方式。
當然在此之前，須知css3的最基本的概念。盒子模型：外邊距（margin），邊框（border），內邊距（padding），盒子中的內容（content）。這是設定樣式必須了解的。
自動居中：設定width的值（–px或–%均可），然後設定margin設定為0 auto。注意：設定了自動居中不要設定position：fixed。可以設定這個body處於居中的樣式。
下面就3種定位機制分別說明:
2、浮動定位（float）：浮動float屬性有left、right、none。浮動模組之間的間距通過設定margin值來設定。在設定浮動屬性後可能對其他元素有影響（如在mainbody中設定left和right，可能使mainbody和footer產生影響，使布局混亂。）在此時需要清除浮動產生的影響，設定overflow：hidden；即可消除。
3、絕對定位（position）:又可分為3中定位方式，分別為靜態定位（static）、絕對定位（fixed和absolute）、相對定位（relative）。下面將對其進行一一說明。 （1）靜態定位（static）：預設的定位方式，出現在正常流中，不受left，right，bottom和top的影響。 （2）絕對定位： a）固定定位fixed：相對於瀏覽器視窗為偏移標準，設定left和top等值。當滾動條滾動時，位置固定，不移動，其他元素可從下方穿過。應用在如網頁廣告始終位置不變出現在一定位置。 b）絕對定位absolute：當有使用絕對定位的祖先元素時，根據最近的絕對定位祖先元素偏移，當沒有時根據進行偏移。設定left和top等值。當設定了絕對定位而沒有設定寬度時，元素寬度自適應。 （3）相對定位（relative）：仍處於文件流當中，相對於自身原位置進行偏移，設定top和left等值。
網頁布局流式布局
工具所用到外掛程式 masonry 是 一款非常強大的jquery動態網格布局外掛程式，可以幫助開發人員快速開發類似剪貼畫的介面效果。和css中float的效果不太一樣的地方在 於，float先水平排列，然後再垂直排列，使用masonry則垂直排列元素，然後將下乙個元素放置到網格中的下乙個開發區域。...
網頁布局 table布局
table 的特性決定了它非常適合用來做布局，並且 中的內容可以自動居中，這是之前用的特別多的一種布局方式 而且也加入了display table dispaly table cell來支援 teble 布局。1.簡單布局 1 doctype html 2 html lang en 3 head 4...
網頁布局 響應式布局
響應式布局是 乙個 能夠相容多個終端 而不是為每個終端做乙個特定的版本 media all 用於所有的裝置 screen 用於電腦螢幕,平板電腦,智慧型手機等 and not only 三個關鍵字可以選 1 head 2 style media screen 3 media screen and m...