首先簡單講一下盒模式,所謂盒模式,是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(面向對象)的基本精髓,并掌握了一定的設計模式等。
新聞熱點
疑難解答