網頁設計中的布局

　　網頁設計中的布局

　　網頁設計中的布局可以從兩個角度來看：設計視角和前端視角。本篇文 章主要側重分析前端視角，由于設計視角比較好理解，所以不做太多的 贅述。

　　設計視角

　　設計視角主要是從網頁的排版角度去進行分類，大致分為四種：上下布 局、左右布局、國字形布局和T字形布局。

　　上下布局是常見的布局方式，基本上都會在上方有一個導航，下方 是內容區，有的官網還會有頁腳footer，站酷就是上下布局。左右布局 在后臺類、TO B類產品中比較常見，一般左側為側邊欄，右側為內容區 。國字形布局和T字形布局其實算作上下布局，只不過比較典型，可以單 拎出來作為一種布局類型。

　　前端視角

　　首先為什么要了解些前端的布局方式呢，直接甩給前端一個設計稿，讓 他去實現不就行了？其實這涉及到的是設計和開發之間的協作關系，一 個有規律有規范的設計稿，前端實現起來更加容易，也方便他管理自己 的代碼，實現出來的樣式也會更靈活，在出設計稿之前和前端溝通一下 ，采用什么布局方式，需要設計怎么配合，也費不了多少工夫。當然直 接甩個設計稿，前端也能實現，但一些特殊效果真的是需要雙方合作才 能完成的。

　　前端視角主要是指實現頁面的各種CSS布局方式，

　　歸納了5種：靜態布局、流式布局、響應式布局、彈性布局和Flex布局。 除了靜態布局，其他都能實現在不同分辨率下頁面的自適應，來給用戶 更佳的視覺呈現。

　　靜態布局（static layout）

　　靜態布局也叫做固定布局，網頁內容區采?完整寬度，網頁內每個模塊 的尺寸大小固定，一般整體在瀏覽器內居中顯示，并會設置小寬度 min-width，當分辨率小于較小寬度就會出現滾動條，如果大于更小寬 度則內容居中外加背景 。

　　流式布局（fluid layout ）

　　流式布局英文fluid layout，也可以翻譯成liquid layout，是指頁面 按照百分比%定義寬度（也就是長度單位不是我們平常使用的px，而是百 分數），來適配不同的屏幕分辨率，在不同的分辨率下網頁布局保持不 變，一般搭配min-、max-屬性來控制尺寸流動范圍，以免過大或者過小 影響展示和閱讀，頁面內元素的高度和文字大小往往px來固定住，方便 頁面排版和閱讀。

　　流式布局的特點是，如果寬度太小，放不下兩個元素，后面的元素會自 動滾動到前面元素的下方，不會在水平方向overflow（溢出），避免了 水平滾動條的出現。

　　響應式布局（responsive layout ）

　　響應式布局是指網頁分別為不同的屏幕分辨率定義不同的布局，同時在 每個布局中，各元素大小采用百分比定義寬度，即頁面元素寬度隨著窗 口調整而自動適配�？梢钥醋鍪嵌�義了幾個不同尺寸的流式布局。