CSS 設計頁面

viewport：當頁面內容超過容器大小，頁面上當前顯示出來的區域

block-level ：實現座標定位，如p,div. 相鄰的block-level元素往往從上到下垂直排列，包含的元素要麼全為block-level，要麼全為inline-level

inline-level：不能定位但可以包含其他同為inline-level元素，相鄰的inline-level元素往往從左到右或從右到左排列，如i a  b  span 等標籤。每乙個元素至少包含乙個box模型即由margin、border、padding、content width/height等屬性所能描述的矩形區域；而這塊區域相對於布局容器的座標top、left，往往由布局容器按照block-flow（布局block的過程）、inline-flow等規則布局該元素時確定；

而css對html中諸如標籤frame、image、object、embed、form等對應的元素稱為replaced元素，它表示這些元素的內部布局不由css來定義，而由瀏覽器來實現，而這些元素從外部來看相當於block-level元素，但可通過設定display:inline將其從外部看設為inline-level元素；

乙個html標籤元素的position屬性可以設定為static、relative、fixed、absolute、inherit等。

所有元素預設為static，其containing block布局容器元素為最近的祖先block-level元素，其屬性left、top、right、bottom不起作用；它會按照普通順序生成，就如它們在html的出現一般。

relative同static屬性元素一樣，但其left、top等屬性可以有效，其座標相對於布局容器而言；

absolute的元素的布局容器元素是最近的除了其屬性不為static的祖先block-level元素；可以設定left top bottom和right

position屬性為fiexed的元素的布局容器元素是往往是根布局容器，但其定位座標需要根據viewport的位置作相應調整，ie工作不是很好；

絕對定位元素的唯一***是，因為它們生活自己的世界裡，沒有辦法精確決定它們在哪兒結束。如果你使用上面的例子在乙個少導航和多內容區域，沒有什麼問題，但是，特別是使用長度和寬度的相對值時，你經常得放棄在下面放置任何事物如腳注的希望。如果你真的要做，與其絕對定位它們，不如浮動它們。

對於有定義其寬高的頁面元素，則按照其定義的寬高來確定其大小，而對於象text node這樣的inline-level則需要結合其字型大小及文字的多少等來確定其對應的寬高；如果頁面元素所確定的寬高超過了布局容器containing block所能提供的寬高，同時其overflow屬性為visible或auto，則會提供滾動條來保證可以顯示其所有內容。

除非定義了頁面元素的寬高，一般說來頁面元素的寬高是在布局的時候通過相關計算得出來的。

一旦確定了其containing block布局容器，同時結合其自身的block-level或inline-level特性，布局時根據block flow和inline flow規則就可確定其起始位置，其中inline-level元素可在其布局容器提供的區域內自動換行；而block-level元素可在其布局容器提供的區域內自動換乙個段落。

另外float屬性為left或right元素較為特殊，則不遵守上面的規則，該元素讓在其高度範圍內的其他元素始終在其左邊或右邊 

1.選擇適合自己**主題風格的模板

如果是文字類的站就不要選那種全部是組成的模板，相反如果是站當然不要選那種整個模板都沒幾個圖的模板。一般來講，好的模板**都會給出模板的用途和分類，比如部落格模板，企業模板等。另外顏色和風格也要符合自己**特點，這個就要看站長個人的口味和判斷了。

2.選模板最好要選那種帶內頁和導航頁模板

因為許多模板只是提供主頁的模板，因此如果你不具備一定的網頁div+css設計能力的話，即使模板再好看你也最好不要去用，否則首頁做出來了，內頁卻需要花費大量精力去自己設計，而且很容易和主頁風格出入很大，效果就大打折扣了。

1:在div對應的css樣式中有沒有加入: float:left 或者float:center

2.如果您用象素進行精確控制的話,計算一行的所有的div寬度有沒有大於包含它的容器的寬度

3.在計算寬度時,還需要加入div的margin,padding等控制layout的要素的寬度

4.檢視div中的內容中,有沒有子block的寬度大於該div,把該div撐破.

內容內容內容內容內容

內容內容內容內容
導航導航導航導航導航
導航導航導航導航 尾部

CSS設計指南 5章 頁面布局

5.1 布局的基本概念 多欄布局有三種基本實現方案 固定寬度 流動 彈性 固定寬度 固定寬度布局的大小不會隨使用者調整瀏覽器視窗大小變化，一般是900到1100畫素寬度。其中960畫素是最常見的，因為這個寬度適合所有現代瀏覽器。960 grid 流動布局 流動布局的大小會隨使用者調整瀏覽器視窗大小而...

CSS 頁面布局

幾個實現多欄布局的方法。主要介紹使用內部div來建立浮動的欄。多欄布局有三種基本的實現方案 固定寬度 流動 彈性。固定寬度布局的大小是隨使用者調整瀏覽器視窗大小而變化，一般是900至1100畫素寬。其中960畫素是很常見的，因為這個寬度適合所有的現代瀏覽器，而且能被16 12 10 8 6 5 4和...

CSS 頁面特效

2d 3d特效 transform att webkit transform att safari chrome瀏覽器的適應 o transform att opera ms transform att ie moz transform att firefox 2d translate 移動 rot...