前端佈局

1、靜態佈局

靜態佈局就是傳統的網站形式，網頁上的全部元素的尺寸一概使用px做爲單位。

1.佈局特色

無論瀏覽器尺寸具體是多少，網頁佈局始終按照最初寫代碼時的佈局來顯示。常規的pc的網站都是靜態（定寬度）佈局的，也就是設置了min-width，這樣的話，若是小於這個寬度就會出現滾動條，若是大於這個寬度則內容居中外加背景，這種設計常見於pc端。

代碼以下：

浮動方面常常出現的問題:

上下兩個div，若是上面的div設置浮動的話必定要當即給下面的div設置清除浮動（clear:both;加在下面那個div樣式上, clear:both; 的意思是不容許上面有浮動)

下圖爲糾正後的正確表現（把清除浮動加在紅色div上）：

上下都有div的狀況，設置上下間距時必定要從上往下擠，不能從下往上（用margin-bottom:20px;）

談到浮動，咱們還要講下 塊級元素和內聯元素的區分和使用：

塊級元素有：<div>、<p>、<ul>、<li>、<ol> ....

塊級元素：是能夠控制寬和高、margin等，而且會換行。

內聯元素：是不能夠控制寬和高、margin等；而且在同一行顯示，不換行。

2、自適應佈局

簡單來講就是分別爲不一樣的屏幕分辨率定義佈局，即建立多個靜態佈局，每一個靜態佈局對應一個屏幕分辨率範圍。

1.佈局特色

屏幕分辨率變化時，頁面裏面元素的位置會變化而大小不會變化。

3、流式佈局

頁面元素的寬度按照屏幕分辨率進行適配調整，但總體佈局不變（柵格佈局）。

1.佈局特色

當屏幕分辨率變化時，頁面裏元素的大小會變化而但佈局不變。這就致使若是屏幕太大或者過小都會致使元素沒法正常顯示。

4、響應式佈局

爲不一樣的屏幕分辨率定義佈局，同時，在每一個佈局中，應用流式佈局的理念，即頁面元素寬度隨着窗口調整而自動適配。能夠把響應式佈局看做是流式佈局和自適應佈局設計理念的融合。

1. 佈局特色

每一個屏幕分辨率下面會有一個佈局樣式，即元素位置和大小都會變。（把元素的長度設置成百分比、利用相對定位、絕對定位的方式佈局）

①.相對定位：相對於原來本身所在的位置偏移，相對定位原來的位置依舊還佔據。

②.絕對定位：能夠用負值，原來的位置消失了。

③.固定定位：position: fixed;
 
④.重疊元素堆疊：z-index; 

5、彈性佈局（rem/em佈局）

rem是相對於html元素的font-size大小而言的，而em是相對於其父元素。使用rem單位的彈性佈局在移動端很受歡迎。

1.優勢

2.屬性設置

網頁能夠當作由一個個"盒子"組成

以下圖所示：

一、常見佈局
單列布局
代碼以下
---

效果以下
---

雙列布局

代碼以下
---

效果以下

三列布局
代碼以下

效果以下

混合佈局(綜合佈局)

代碼以下

效果以下