CSS佈局小結

在製做頁面的過程當中，給頁面進行排版是一項很是重要的工做，一般也是製做頁面的第一步。那麼，排版的時候首先要考慮的就是頁面的大體佈局是什麼樣子，作到成竹在胸，這樣製做起來也就很快了。

頁面的佈局一般有哪幾種呢？從大方向來講，能夠看做是三類：單列布局，兩列布局和三列布局。下面說說大概的思路，會設計到一些主要的代碼，可是不會特別詳細，本文主要強調思路以及思惟框架。很是細節和完整的代碼請看結尾參考資料。

 

1. 單列布局。此時，通常從網站頁面的角度來講，使用比較多的是居中佈局。

 此時，最核心的代碼就是給這三個元素的樣式加上的居中對齊的代碼便可。

主要代碼就是：

.x {

margin: o auto;

}

 

2. 兩列布局。排版兩列布局，最主要的在一個浮動上。你們必定要知道，浮動的功能可讓一個元素對另外一個元素產生「圍繞」功能。那麼，一樣地也能夠利用這一點來實現左右兩列的佈局。這個時候的主要代碼是：

左列：float: left

右列：overflow: hidden

 

3. 三列布局。在大多數時候，網站頁面須要三列的佈局。這個時候就會提到經常使用的聖盃佈局等三列布局樣式。那麼，這個時候主要用到的代碼是給左、中、右這三列分別用上左浮動。即：float: left。

固然，還要配上邊距(padding / margin)作相應調整來實現最終佈局。

 

其實，三列布局這裏還有其餘比較經常使用的佈局樣式：等高佈局和粘連佈局。若是不考慮幾列佈局，那還有flex佈局、grid佈局等佈局模式。這些能夠也看看，對頁面佈局也很重要。

 

 

參考：

 http://www.javashuo.com/article/p-oomacldo-dg.html