網頁布局 自適應

css很多人都會寫也用的很溜，畢竟這是一門描述性語言，不需要太多的語法，演算法知識，上手非常容易，因此遭到很多人輕視，但用好css真的不是一件很容易的事，常見的自適應布局就很考驗技能，你不光要會寫，還得懂內在原理。

前端面試都會考到聖杯布局，以前寫過很多次，但一直沒做個總結，以至於每次別人問都不能很好的表述，下面做個整理，先來看看html，css結構

方法一：

html,body

body div
.left
.right
.main

left

right
main

這裡用到幾個知識點：

1、浮動元素會以某種方式脫離文件流（absolute，fixed定位也會導致元素脫離文件流），不過還是會影響布局（表現就是內容會環繞該元素）

2、如果源文件中乙個浮動元素之前出現另乙個元素，浮動元素的頂部不能比包含該元素所生成框的任何行框的頂端更高

3、bfc區域不會和float 重疊

有了以上幾點，就能明白使用者**是如何布局的

首先.left元素往左浮動，然後.right往右浮動，因為浮動會導致元素脫離文件流，.mian元素就無視他們的存在，左右邊界直接延伸到兩個浮動元素的下面（我們要的顯示不是這種延伸），然後給.main元素觸發bfc，使.main區域不和float重疊，三欄自適應布局就此生成。

這裡要特別強調的是.main元素一定要放在最後，第二條知識點已經明確說明，不這樣放會導致其中乙個浮動元素出現在.main元素的下方

方法二

html,body

body div
.left
.right
.main

left

main
right

這種方法就簡單多了也很好理解，用到了定位的相關知識點

1、absolute元素會脫離文件流

2、left值定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移

3、right值定義了定位元素有外邊距邊界與其包含塊右邊界之間的偏移

給.mian元素left，right偏移，width預設值為auto，這裡不做設定，由使用者**進行計算，從而實現三欄自適應布局

網頁布局 （bfc）自適應布局

核心思想主要是利用float margin的形式。利用塊狀元素的流體特性，然後計算出float元素的寬度，並賦予到塊狀元素的相應margin中。但是這麼做是有個缺點的，就是我們每次都得知道float元素的寬度，然後賦予到塊狀元素的margin。bfc有一特性 bfc的區域不會與外部浮動元素重疊。並且...

自適應網頁 響應式布局 彈性布局

1.自適應網頁 1.宣告viewport元標籤 注 width device width 讓寬度為裝置寬度 initial scale 1 設定初始縮放比例 user scalable no 設定使用者是否可以手動縮放 2.使用流式布局 實現方案 float left display inline ...

網頁自適應

1.文件 允許網頁寬度自動調整 網頁的原始比例即為螢幕的大小，ie9 viewport元標籤 網頁的預設寬度，width device width,是說網頁的初始寬度等於螢幕的寬度，initial scale 1,縮放比例為1倍 相容ie老版本需要支援 2.載入css css3 media quer...