這可能是史上最全的CSS自適應(yīng)布局總結(jié)教程 - 茄果 - 博客園
作者：茄果
標(biāo)題嚴(yán)格遵守了新廣告法，你再不爽，我也沒犯法呀！屁話不多說，直入！
所謂布局，其實(shí)包含兩個(gè)含義：尺寸與定位。也就是說，所有與尺寸和定位相關(guān)的屬性，都可以用來布局。
大體上，布局中會(huì)用到的有：尺寸相關(guān)的盒子模型，普通流、浮動(dòng)、絕對(duì)定位三種定位機(jī)制，CSS3中的transform、彈性盒子模塊、試驗(yàn)中的grid模塊。逛園子的時(shí)候經(jīng)常可以看到浮動(dòng)布局，inline-block布局，彈性盒布局這幾個(gè)名詞。現(xiàn)在對(duì)布局也算有一點(diǎn)了解，做個(gè)總結(jié)鞏固一下。如果你也看了很多資料，但是實(shí)際動(dòng)手時(shí)對(duì)布局還是無從下手的話，希望本文可以幫你理清思路。
嘮叨一句：看到一個(gè)效果圖的時(shí)候，千萬不要急著手賤去敲代碼！先思考清楚頁面的構(gòu)造，理清各元素之間的關(guān)系，特別需要注意的是在不同的設(shè)備下需要有怎樣的展現(xiàn)，當(dāng)你思路清晰找到最好的布局方案時(shí)，coding其實(shí)真的不需要多少時(shí)間。
尺寸相關(guān)
為什么要先說尺寸呢？因?yàn)槌叽缭诓季种械淖饔梅浅：诵?，布局方式定位這些只是改變了元素之間的關(guān)系，沒有尺寸就什么也不是。比如我們通常會(huì)用margin來控制跟其他元素的距離，這就是布局。
很多人都會(huì)覺得，什么width、margin太簡(jiǎn)單了，早就掌握了。這種心態(tài)我一開始學(xué)習(xí)CSS的時(shí)候也有，覺得很好理解很簡(jiǎn)單，但是后面才發(fā)現(xiàn)自己原來很多東西都沒真正掌握?？纯磸?chǎng)涡翊笊窠o我們上的政治課： 說說CSS學(xué)習(xí)中的瓶頸 " 張?chǎng)涡?鑫空間-鑫生活
先說說百分比，百分比是相對(duì)父對(duì)象的，這里特性非常好用，很多時(shí)候會(huì)用在自適應(yīng)布局上面。瀏覽器尺寸的改變，就是根節(jié)點(diǎn)html的長(zhǎng)寬改變，我們可以用%來將瀏覽器尺寸和元素尺寸聯(lián)系起來，做到自適應(yīng)。