乙個完整的頁面和其中的元件該如何具備靈活性。
怎麼樣利用css來實現無論螢幕、視窗以及字型的大小如何變化，都可以自由擴充套件和收縮的分欄式頁面。
要決定使用流動布局、彈性布局還是固定寬度的布局，得由專案的特點和需求來決定。
流體布局
1. 通過浮動並且寬度設為百分數主要區域content左浮動 （該區域內部如果有兩欄則分別左右浮動）
旁邊欄目sidebar右浮動
頁尾footer區域注意清除兩邊浮動
設定寬度時設定為百分數，但是新增內邊距時單位為px,會造成寬度過寬
解決方案：
在#main和#siderbar中新增box-sizing:border-box，表示width寬度包含border
-webkit-box-sizing:border-box;ie8以下不相容box-sizing,可以通過在#mian和#siderbar內部新增乙個div,通過對div新增pading而不是對#main和#siderbar操作而達到目的。-moz-box-sizing:border-box;
box-sizing:border-box;
2.可以設定max-width和min-width來限制頁面範圍 ，防止布局尺寸過大或過小。
對於有或寬度有限制的區域，可以通過max-width和min-width設定（ie6不支援）
#wrap對於頁面內嵌入的或**，也可以通過設定max-width:100%來防止尺寸過大問題。
3.文字設為百分數單位，例如100%或62.5%，而對於line-height可設為倍數，例如1.3/1.4等，可保證字型有很好的靈活性。
4.**查詢
對於多裝置螢幕告知裝置將布局的寬度設為與瀏覽器裝置等寬
<通過**查詢設定不同頁面寬度時的不同布局樣式meta
name
="viewport"
content
="width=device-width"
/>
/*當頁面小於800px時，取消#mian和#sidebar的左右浮動，寬度自動，變為單列布局，減少字型行高等*/
@media screen and (max-width: 800px)}/*當頁面寬度小於550px時，常需要將logo居中對齊，兩邊設定少量空隙，改變字型行高等*/
@media screen and (max-width: 550px)#special#main h1footer[role="contentinfo"] p}
CSS 常用布局
1.寬度100 自適應視窗寬度 content content 只是定義了寬度為100 背景為白色與body色加以區分 footer footer 2.寬度100 最小定寬780px content content 只是定義了寬度為100 背景為白色與body色加以區分 這個布局中我們使用了min ...
css常用布局
單列布局長這個樣子，主要有兩種 普通單欄，通欄的單欄布局 比較簡單，設定 定寬 水平居中即可 頭部 內容尾部 執行結果鏈結描述 瀏覽器寬度超過960px時，外margin出現。當收縮瀏覽器寬度，小於960px時，margin為0，出現滾動條。執行結果鏈結描述 在header 和footer上再包裹一...
css常用布局
以下居中布局均以不定寬為前提，定寬情況包含其中 1 水平居中 a inline block text align tips 此方案相容性較好，可相容至ie8，對於ie567並不支援inline block，需要使用css hack進行相容 b table margin tips 此方案相容至ie8，...