如果你開發web相關應用或者**的話，肯定知道css對於頁面布局的重要性。在本篇css技巧中我們將介紹頁面載入的流程來幫助你更好的實現頁面布局。
在我們開始正式的介紹頁面流程前，我們需要簡單了解幾種不同型別的html元素，以及它們的預設顯示方式。這裡我們主要重點介紹兩個型別的元素：
如果大家關心html5的話，你應該知道在html5中也包含了幾個新的元素，例如，section，article等等，但是仍舊遵循這裡我們介紹的顯示型別。
inline型別的元素包括： img，span，a等，用來定義文字或者資料，通常顯示方式是「同一行顯示」。更具體的說就是，如果很多的inline型別的元素在同一行的時候，它們會顯示在同一行，直到寬度不夠顯示了，再轉到下一行。例如，如下**：
gbtags.com is website for geeks相 反block型別的元素，例如，div，p或者html5中新的元素section，article和article的顯示方式和inline型別都不一 樣。它們都是典型的結構化的元素，可以包含inline型別的元素。瀏覽器處理block型別的元素，會在元素前後新增換行，這樣你看到它們都是獨立成行 顯示的。當然，如果你修改它的預設顯示型別為inline，它就會按照inline元素的顯示方式顯示。
通常我們都是使用css來控制元素的顯示：
sometag雖然上面的屬性中我們指定了顯示型別，這同時也意味這其它相關的樣式，例如，你可以指定顯示型別為block的元素的寬和高，但是 inline型別的無法指定。padding（內邊距）和margin（外邊距）可以被應用到inline顯示的元素，但是不會影響包含的元素。看看如下 例子：
除了inline和block型別的顯示，這裡還有乙個inline-block的顯示方式。如下圖：
它顯示的方式類似於inline，但是它相關的屬性，例如，寬度，高度還有padding/margin等等遵循於block顯示型別的規則。inline-block可以幫助我們實現類似float元素的效果，但是也有自己的問題。
其它的屬性例如，list-item，顧名思義，顯示的方式和列表元素類似。
最後還有乙個元素需要提一下就是"none"，這個屬性可以讓元素不顯示，並且不佔聚任何的document空間。 注意和「hidden」這個屬性區別一下。那 麼什麼是瀏覽器正常的載入流程呢？基本上瀏覽器按照它解析的順序來顯示內容，頂端的先載入，然後載入下面的內容。當大家開始做web設計的時候，可能都不 關心正常的document載入過程，而只醉心於各種不同的絢麗花哨的技巧，如果你能夠正確的理解document載入，對於更好的幫助你理解web設計 絕對有利無弊。
在這裡我們將做乙個簡單的聯絡幫助你鞏固你的學習，這裡我們使用html5 shiv來幫助我們支援html5標籤，使用placekitten這個佔位應用來生成。
html框架**如下：
<css布局**：div
class
="container"
>
<
h1>an intro to normal document flow.
h1>
<
figure
class
="photogallery"
>
<
img
src=""
alt=""
/>
<
img
src=""
alt=""
/>
<
img
src=""
alt=""
/>
<
img
src=""
alt=""
/>
<
img
src=""
alt=""
/>
<
img
src=""
alt=""
/>
figure
>
<
article
>
<
h2h2
>
<
p>如果你也喜歡貓咪的話，來一起看看這些可愛的小生命吧！
p>
article
>
div>
<
footer
>
<
section
a href
="">gbtags.com
a>
section
>
footer
>
body.container figure img h1 article footersection
CSS技巧薈萃 了解CSS頁面布局和載入流程
如果你開發web相關應用或者 的話，肯定知道css對於頁面布局的重要性。在本篇css技巧中我們將介紹頁面載入的流程來幫助你更好的實現頁面布局。在我們開始正式的介紹頁面流程前，我們需要簡單了解幾種不同型別的html元素，以及它們的預設顯示方式。這裡我們主要重點介紹兩個型別的元素 如果大家關心html5...
CSS樣式薈萃
1.如何固定table中某一列的高度。td標籤中的內容太多，在寬度固定的情況下，一般高度是會隨著內容而變的。如果內容很多，高度就會被拉得很長。為此，必須要固定td的高度，再設定滾動條。解決方法 在td中加乙個div，設定div的高度。新增的詳情 2 居中 1 直接居中乙個div或某個容器元素中的資料...
頁面重構css技巧
1.如何讓文字在容器內垂直居中？1 方法 為容器新增line height屬性，使得line height的值等於容器的height。2 html view plain copy print html head meta charset utf 8 title 無標題文件 title style t...