不懂佈局怎麼可能做得出網頁啦
開新坑了
拿這個系列對自己入門時遇到的坑和開發時的一些習慣進行記錄 （
才剛入門就敢拽）
當然，因為我也的確剛入門，所以問題自然會很多，希望新人看了能少遇到坑，大神看了能指點指點我啦。
本次目標
在網上隨便找了一張簡單一點的稿子過來做佈局（我只做了佈局
）稿子長這樣:
我大概的仿照了一下做出的是下面這樣的傻樣:
針對稿子的幾個部分做了基本佈局
佈局的核心知識
在我的看法中佈局有兩個核心屬性，一個是display另一個是position。其中一個決定了一個元素的基本特性， 另一個決定了元素的定位方式。其他相關的佈局屬性都是輔助這兩個屬性進行微調的。 今天的佈局稿子只用到了其中的display就完成了，標準的流式佈局。
實現過程
接下來我們一個一個部分來實現，在內容開發之前我們先對整個頁面做一下設定。
body{
margin:0px;
background-color:#aaa;
}
我們去掉body的外邊距，因為在預設情況下body和瀏覽器之間是有一小段距離的。
頭部
因為是流式佈局，所以我們只需要內容一個一個排下去就行。內容部分我們首先進行頭部的製作，下面是一個簡單的頭部結構。
<div class="header">
<div>
<a></a>
<a></a>
<a></a>
<a></a>
<a style="float : right;"></a>
</div>
</div>
使用一個div裡面巢狀一個div然後再放入頭部的具體內容。
.header{
border-bottom:1px solid #bbb;
background-color:#fff;
text-align: center;
}
首先製作最外層容器的樣式，因為容器是div，所以預設的display的值是block。 block的特性是塊狀元素，位置佔滿整行（不管實際寬度是不是佔滿整行）。 塊級元素就像一個容器一樣，可以進行大小控制。
這裡我們沒有給容器設定高度，因為我們等會通過容器內的div來將它撐開，如果設定了高度就會被固定。 border-bottom給容器設定了一個與背景過渡的下邊框。background-color設定了背景色為白色。 text-align使得內容居中，這是最常見的居中方式。想讓一個物件水平居中可以給其父元素加入這個屬性。
.header>div{
height:60px;
text-align: left;
display: inline-block;
width:1000px;
}
由於第二層只有一個div，所以我們通過子元素選擇器.header>div來讓CSS定位到元素。 我們通過給第二層div設定高度來讓父元素被撐出相同的高度。 因為text-align屬性是會傳遞的，我們只希望第二層div居中，而它的內容相對它靠左對齊， 所以我們將它的text-align設定為left。
最後我們設定display為inline-block行內塊級元素，讓它可以被居中， 它和block唯一的區別就是不會佔滿整行， block在寬度沒有佔滿整行時會有一個固定的margin-right佔滿整行，所以就算你使用text-align 進行居中，一個內部的block元素本身也是不會居中的（不過由於屬性傳遞，元素的子元素會相對其居中）。 最後設定它的寬度為1000px，這樣不管瀏覽器的寬度多寬我們都可以得到一個固定寬度並保持在頭部中間的內容 (可以在例子中拖動瀏覽器尺寸測試)。
.header>div>a{
display: inline-block;
width:120px;
height:50px;
background-color:#ddd;
margin-top:4px;
}
上面是代表內容項的a標籤的樣式，這裡我們想把它做成一個一個的格子來展示。由於a標籤的預設display 是inline行內元素，並不是塊級的，所以無法設定一些影響尺寸的屬性，如width和padding (內邊距)。 所以我們首先把它設定成塊級元素然後設定寬高和背景色。這樣就有一個一個的格子在頭部中，通過margin-top 進行臨時的豎直居中調整。
<a style="float:right;">a>
最後我們通過給一個選項設定float屬性來達到向右浮動的效果，不過需要說明一下的就是float 屬性使用之後元素就不會佔用位置了，它將不進入流式佈局的計算。比如我們給第二層div加入這個屬性， 它就不會接受流式佈局相關的屬性如text-align屬性，所以不會再居中。並且第一層div 也會因為它不佔用佈局的空間而不被撐開，相當於是一種系統自動的絕對佈局（絕對佈局在之後的position文章中再說明）
Banner
接下來的網頁Banner就很簡單了，就是一個有高度的塊級元素而已。
<div class="banner"></div>
.banner{
height:500px;
background-color:#eee;
}
我們給它加一個背景色區分一下就可以了
商品小圖
我們仔細看一下商品小圖的佈局，每一個商品都貼在一起，可是商品大小卻有寬度不一樣的。 最終的集合體是居中於整個頁面的。那我們首先把整個結構貼出來。
<div class="items">
<a class="m20"></a><a class="m20"></a><a class="m20"></a><a class="m20"></a><a class="m20"></a>
<a class="m20"></a><a class="m20"></a><a class="m20"></a><a class="m40"></a>
<a class="m25"></a><a class="m25"></a><a class="m25"></a><a class="m25"></a>
</div>
一個父元素裡面放了3行子元素（當然，並不是通過html來分行的），實際上每行的元素我們也放到一行是為了去除空格， 如果標籤之間分行的話會有間隙，緊貼在一起的標籤才不會有間隙。
.items{
margin:80px auto;
width:900px;
line-height: 0px;
}
上面是整個商品小圖容器的樣式，使用了另一種居中方式，這種居中方式只對display的值為 block的塊級元素有效。設定margin-left和margin-right為auto（我使用的是簡寫）， 然後設定一個固定寬度即可。將line-height設定為0是為了去除每行內容間的距離。
.items>a{
display: inline-block;
background-color:#fff;
border:2px solid #555;
height:80px;
box-sizing:border-box;
}
接下來就是這個佈局的重點了，上面的前四項基本樣式大家應該比較清楚，設定顏色寬高和行內塊級元素模式。 最後一項box-sizing是在CSS3中出現的新的屬性，它有兩個值，預設值content-box 是之前CSS規定的寬高度行為，當你使用padding或者border時容器將向外被擠開。 現在我們可以設定成border-box，這樣它就變成了向內擠。當然，這一切都要基於你設定了寬度和高度。
如果把容器的寬度看做100%，那麼稿子中商品有三種寬度:20%、25%、40%， 我們針對這幾種配置一下樣式就大功告成了。
.m20{
width:20%;
}
.m40{
width:40%;
}
.m25{
width:25%;
}
上面的樣式配置實際上就是設定一下不同塊元素的寬度而已。最後我們把它配置到各個a標籤上面就完成了。
活動大圖
在商品小圖的下面有四張活動大圖，他們的寬度相同，每個物件之間有一個固定的間隔。 對於這種情況無法使用box-sizing進行完美的佔滿寬度，因為外邊距margin是不在box-sizing 的計算之中的。現在的我用的還是蠢辦法:固定值配置，手動調整。
<div class="imgs">
<a></a><a></a><a></a><a></a>
</div>
我們在div中放了4個a標籤作為四張大圖。
.imgs{
text-align: center;
}
.imgs>a{
display: inline-block;
background-color:#fff;
height:280px;
width:213px;
margin:8px;
}
手動調整顧名思義，自己慢慢改，改到合適為止。我們配置的div沒有什麼修改，只是讓其內容居中。 裡面的a標籤設定好合適的邊距和高度後來調整寬度，最終調整到一個比較理想的狀態即可。
底部欄
底部欄只是一個簡單的容器居中的佈局而已。像下面這樣:
.floor{
margin:8px auto;
width:900px;
background-color:#fff;
height:60px;
}
結束語
實際上前端佈局的核心難點並不多，只要能理解前端佈局的細節之後，技術就沒有想法那麼重要了。 總共完成下來也就一百多行程式碼，熟練的話十多分鐘就可以完成。 雖然勉勉強強算是個實戰教程，可是例子還是太少啦
，下次會盡量在內容中加入更多的例子。