首先簡單講一下盒模式，所謂盒模式，是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，為了能更清楚地看到布局，我們將各個部分都加上了一個紅色的邊框，並給段落加上橙色的背景色，原始碼如下:
html#header, #footer, #content, #leftbar, #main
{}{
border: solid 1px red;
}
p
{}{
background-color: Orange;
}
這段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(物件導向）的基本精髓，並掌握了一定的設計模式等。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
