如果你開發web相關應用或者網站的話，肯定知道CSS對於頁面布局的重要性。在本篇CSS技巧中我們將介紹頁面加載的流程來幫助你更好的實現頁面布局。
在我們開始正式的介紹頁面流程前，我們需要簡單了解幾種不同類型的Html元素，以及它們的缺省顯示方式。這裡我們主要重點介紹兩個類型的元素：
如果大家關心Html5的話，你應該知道在Html5中也包含了幾個新的元素，例如，section，article等等，但是仍舊遵循這裡我們介紹的顯示類型。
inline類型的元素包括： img，span，a等，用來定義文字或者數據，通常顯示方式是“同一行顯示”。更具體的說就是，如果很多的inline類型的元素在同一行的時候，它們會顯示在同一行，直到寬度不夠顯示了，再轉到下一行。例如，如下代碼：
1
<a href="http://gbtags.com">gbtags.com</a> is website for <span>geeks</span>
查看在線調試
相 反block類型的元素，例如，div，p或者Html5中新的元素section，article和article的顯示方式和inline類型都不一 樣。它們都是典型的結構化的元素，可以包含inline類型的元素。浏覽器處理block類型的元素，會在元素前後添加換行，這樣你看到它們都是獨立成行 顯示的。當然，如果你修改它的缺省顯示類型為inline，它就會按照inline元素的顯示方式顯示。
通常我們都是使用CSS來控制元素的顯示：
1 2 3
sometag{
display:inline;
/*當然你也可以設置為block，none等等支持的屬性*/
}
雖然上面的屬性中我們指定了顯示類型，這同時也意味這其它相關的樣式，例如，你可以指定顯示類型為block的元素的寬和高，但是 inline類型的無法指定。padding（內邊距）和margin（外邊距）可以被應用到inline顯示的元素，但是不會影響包含的元素。看看如下 例子：
查看在線調試
除了inline和block類型的顯示，這裡還有一個inline-block的顯示方式。如下圖：
它顯示的方式類似於inline，但是它相關的屬性，例如，寬度，高度還有padding/margin等等遵循於block顯示類型的規則。inline-block可以幫助我們實現類似float元素的效果，但是也有自己的問題。
其它的屬性例如，list-item，顧名思義，顯示的方式和列表元素類似。
1 2 3 4
<ul> <li>元素1</li> <li>元素2</li> </ul>
最後還有一個元素需要提一下就是”none”，這個屬性可以讓元素不顯示，並且不占聚任何的document空間。 注意和“hidden”這個屬性區別一下。
那 麼什麼是浏覽器正常的加載流程呢？基本上浏覽器按照它解析的順序來顯示內容，頂端的先加載，然後加載下面的內容。當大家開始做web設計的時候，可能都不 關心正常的document加載過程，而只醉心於各種不同的絢麗花哨的技巧，如果你能夠正確的理解document加載，對於更好的幫助你理解web設計 絕對有利無弊。
在這裡我們將做一個簡單的聯系幫助你鞏固你的學習，這裡我們使用Html5 Shiv來幫助我們支持Html5標簽，使用placekitten這個圖片占位應用來生成圖片。
Html框架代碼如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
<div>
<h1>An Intro to Normal Document Flow.</h1>
<figure>
<img
src="http://placekitten.com/g/100/200"
alt=""
/>
<img
src="http://placekitten.com/g/160/200"
alt=""
/>
<img
src="http://placekitten.com/g/220/200"
alt=""
/>
<img
src="http://placekitten.com/g/180/200"
alt=""
/>
<img
src="http://placekitten.com/g/240/200"
alt=""
/>
<img
src="http://placekitten.com/g/130/200"
alt=""
/>
</figure>
<article>
<h2> 歡迎訪問我的喵星人圖片畫廊</h2>
<p>如果你也喜歡貓咪的話，來一起看看這些可愛的小生命吧！</p>
</article>
</div>
<footer>
<section>歡迎訪問<a
href="http://gbtags.com">gbtags.com</a></section>
</footer>
CSS布局代碼：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
body{
font-size:12px;
font-family: Arial;
}
.container
{
width:
85%;
margin:0
auto;
background:
#f2f2f2;
}
figure img {
padding-left:
10px;
}
h1 {
font-family: Verdana, Geneva, Arial, Helvetica,
sans-serif;
color:
#707070;
padding:
10px;
font-size:14px;
}
article {
background:
#505050;
color:
#f2f2f2;
padding:
10px;
}
footer{
width:
85%;
margin:0
auto;
}
section{
padding:
20px
0;
}
查看在線調試
希望通過這篇文章的學習，大家能夠更好的了解document的加載和布局，如果你有任何問題或者建議，請給我們留言，謝謝！