網頁設計CSS盒模式與排版 @ SEO搜索排名專家

無標題文件

網頁設計CSS盒模式與排版

發佈者:SEO香港優化專家 - Web Design

網站設計

首先簡單講一下盒模式，所謂盒模式，是CSS看待元素的方式，CSS將每個單一的元素都看作一個盒子，如下圖所示：

之所以叫它盒模式，是因為它跟我們日常生活中的盒子非常相似，這裡不多說了。CSS中大部分的屬性都是用來控制content的，比如width、height、color等；padding、border、margin都是可選的，其中，padding、margin表示的是一片空白區域，只能控制其大小，border是一個可見的邊框，可以控制其邊框樣式、粗細、顏色等。

下面主要講一下排版。

在正常情況下，瀏覽器從HTML文件的開頭開始，從頭到尾依次呈現各個元素，塊元素從上到下依次排列，內聯元素在塊元素內從左到右依次排列。而CSS的某些屬性卻能夠改變這種呈現方式，這些屬性就是這裡要講的，主要是float與position屬性，另外還有clear屬性以協助float，z-index屬性協助position。這些屬性值均無法繼承。

float屬性定位：

float屬性值可以為left、right、none。none為默認值，表示不漂移該元素，瀏覽器以正常方式顯示之，不必多說。若設置為left或right，則表示將該元素漂移到左方或右方。那什麼叫漂移？

簡單地說，漂移是指將某元素從正常流中抽出，並將其顯示在其父元素的左方或右方的一個過程。這樣說想來你還不一定明白，那麼我們就分步驟來看一下瀏覽器是如何來漂移某元素的。

假設我們有以下html，為了能更清楚地看到佈局，我們將各個部分都加上了一個紅色的邊框，並給段落加上橙色的背景色，源代碼如下: 如果我們將其中的leftbar設置為float:left；width：20%，那麼將是下面這個樣子：

以上就是float的原理。不過，在實際實踐中，我們通常需要的是leftbar與main各自成一列，而不希望main的內容還流入到leftbar的下面。哈，這就需要你開動腦筋了，想想該怎麼辦？我們可以給main指定margin-left：20%，顯示如下：

從上圖我們發現了一個問題，那就是leftbar突破了其父元素content的區域。是的，漂移元素不再受其父元素區域的限制，或者說漂移元素不會使其父元素的區域撐大。這導致footer的呈現不滿足我們的需要。clear屬性騎著白馬來幫助我們了，我們給footer加上clear：left的屬性試試。

到此，你應該比較清楚float、clear排版的基本原理了吧。如何才能排出令人賞心悅目的頁面，這就需要你開動腦筋了，它是門藝術，設計的藝術。掌握原理是簡單的，但設計的藝術不是那麼容易學習的阿。

最後簡單講一下position

position可以設置為以下四個值

static：默認值，表示以正常流的方式排版元素。

absolute：將元素從正常流中抽出，並擺在頁面指定的位置（由top、left、right、bottom屬性指定），該元素不會對其他元素產生任何影響（這是與漂移元素的一個很大的不同）。

fixed：將元素從正常流中抽出，並擺在瀏覽器窗口指定的位置（由top、left、right、bottom屬性指定），它使元素不隨著頁面的滾動而滾動，永遠固定在瀏覽器的某個位置上。

relative：元素仍難是頁面流的一部分，瀏覽器先以正常模式排定所有元素，在最後一刻，瀏覽器將該元素偏移一定的位置（由top、left、right、bottom屬性指定）。該屬性較少使用。

如果有好幾個指定position的元素重疊，那麼它們哪個在前哪個在後呢？z-index屬性將來幫助你，該屬性值越大越靠前。

好了，關於html與css就講到這裡了，從下篇開始將講述Asp.net。我想基本的應用大家也都會，不會的也能找到一大疊的書本與資料，所以，我準備著重講Asp.net的實現原理，並配合分析Asp.net的源代碼，希望能讓大家對Asp.net的本質的認識有所幫助。我將假設你掌握了OO(面向對像）的基本精髓，並掌握了一定的設計模式等。