做網(wǎng)站建設(shè)的站長(zhǎng)們應(yīng)該掌握一項(xiàng)網(wǎng)頁(yè)CSS布局的技巧。CSS應(yīng)該是當(dāng)前網(wǎng)站建設(shè)和開發(fā)中必須要用到的一門編程語(yǔ)言，所以，如果你開發(fā)web相關(guān)應(yīng)用或者網(wǎng)站的話，肯定知道CSS對(duì)于頁(yè)面布局的重要性。在本篇CSS技巧中我們將介紹頁(yè)面加載的流程來(lái)幫助你更好的實(shí)現(xiàn)頁(yè)面布局。
介紹
在我們開始正式的介紹頁(yè)面流程前，我們需要簡(jiǎn)單了解幾種不同類型的html元素，以及它們的缺省顯示方式。這里我們主要重點(diǎn)介紹兩個(gè)類型的元素：
1.block
2.inline
如果大家關(guān)心html5的話，你應(yīng)該知道在HTML5中也包含了幾個(gè)新的元素，例如，section，article等等，但是仍舊遵循這里我們介紹的顯示類型。
inline類型的元素包括： img，span，a等，用來(lái)定義文字或者數(shù)據(jù)，通常顯示方式是“同一行顯示”。更具體的說(shuō)就是，如果很多的inline類型的元素在同一行的時(shí)候，它們會(huì)顯示在同一行，直到寬度不夠顯示了，再轉(zhuǎn)到下一行。例如，如下代碼：
<a href=“http://gbtags.com”>gbtags.com</a> is website for <span>geeks</span>
相 反block類型的元素，例如，div，p或者HTML5中新的元素section，article和article的顯示方式和inline類型都不一 樣。它們都是典型的結(jié)構(gòu)化的元素，可以包含inline類型的元素。瀏覽器處理block類型的元素，會(huì)在元素前后添加換行，這樣你看到它們都是獨(dú)立成行 顯示的。當(dāng)然，如果你修改它的缺省顯示類型為inline，它就會(huì)按照inline元素的顯示方式顯示。
樣式CSS
通常我們都是使用CSS來(lái)控制元素的顯示：
sometag{
display:inline; /*當(dāng)然你也可以設(shè)置為block，none等等支持的屬性*/
}
雖然上面的屬性中我們指定了顯示類型，這同時(shí)也意味這其它相關(guān)的樣式，例如，你可以指定顯示類型為block的元素的寬和高，但是 inline類型的無(wú)法指定。padding（內(nèi)邊距）和margin（外邊距）可以被應(yīng)用到inline顯示的元素，但是不會(huì)影響包含的元素?？纯慈缦?例子：
查看在線調(diào)試
另外一些顯示方式
除了inline和block類型的顯示，這里還有一個(gè)inline-block的顯示方式。如下圖：
它顯示的方式類似于inline，但是它相關(guān)的屬性，例如，寬度，高度還有padding/margin等等遵循于block顯示類型的規(guī)則。inline-block可以幫助我們實(shí)現(xiàn)類似float元素的效果，但是也有自己的問(wèn)題。
其它的屬性例如，list-item，顧名思義，顯示的方式和列表元素類似。
<ul>
<li>元素1</li>
<li>元素2</li>
</ul>
后還有一個(gè)元素需要提一下就是"none"，這個(gè)屬性可以讓元素不顯示，并且不占聚任何的document空間。 注意和“hidden”這個(gè)屬性區(qū)別一下。
正常Document的加載流程
那么什么是瀏覽器正常的加載流程呢？基本上瀏覽器按照它解析的順序來(lái)顯示內(nèi)容，頂端的先加載，然后加載下面的內(nèi)容。當(dāng)大家開始做web設(shè)計(jì)的時(shí)候，可能都不 關(guān)心正常的document加載過(guò)程，而只醉心于各種不同的絢麗花哨的技巧，如果你能夠正確的理解document加載，對(duì)于更好的幫助你理解web設(shè)計(jì) 絕對(duì)有利無(wú)弊。
做一個(gè)練習(xí)吧！
在這里我們將做一個(gè)簡(jiǎn)單的聯(lián)系幫助你鞏固你的學(xué)習(xí)，這里我們使用HTML5 Shiv來(lái)幫助我們支持HTML5標(biāo)簽，使用placekitten這個(gè)圖片占位應(yīng)用來(lái)生成圖片。
HTML框架代碼如下：
<div class=“container”>
<h1>An Intro to Normal Document Flow.</h1>
<figure class=“photoGallery”>
<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> 歡迎訪問(wèn)我的喵星人圖片畫廊</h2>
<p>如果你也喜歡貓咪的話，來(lái)一起看看這些可愛(ài)的小生命吧！</p>
</article>
</div>
<footer>
<section>歡迎訪問(wèn)<a href=“http://gbtags.com”>gbtags.com</a></section>
</footer>
CSS布局代碼：
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;
}
總結(jié)
通過(guò)以上的介紹和練習(xí)，相信大家都了解了CSS的布局技巧，以及CSS頁(yè)面的加載方式，我們?cè)诰W(wǎng)站建設(shè)和開發(fā)的過(guò)程中，就可以注意這些細(xì)節(jié)，建設(shè)更加完美的網(wǎng)頁(yè)。
