父元素為relative,子元素為absolute,這樣的話,又會出現(xiàn)跟浮動一樣的問題:父對象高度坍塌,子元素不能撐起父對象。原因也跟浮動一樣,解決辦法的話目前我知道的只有給父對象指定一個確定height值,大家如果有更好的辦法,請聯(lián)系我!
總結(jié):單純使用絕對定位進(jìn)行自適應(yīng)布局的情況很少,一般絕對定位都用在尺寸固定的元素定位上。而且fixed定位的渲染效率很低,因為它會頻繁觸發(fā)瀏覽器的重排。另外提一點:CSS3的transform會對絕對定位產(chǎn)生影響哦~比如說讓fixed定位不再固定在瀏覽器視窗的黑魔法: CSS3 transform對普通元素的N多渲染影響
彈性盒子
CSS3中對布局影響最大的莫過于彈性盒子模塊了,這是一套區(qū)別于以往盒子模型布局的全新方案。上面幾種方法你可以看到,為了實現(xiàn)自適應(yīng)我們用的都是width:auto和100%的嵌套以及各種邊距的移動定位,這套規(guī)則并不符合我們的認(rèn)知。為什么不能開拓出一塊區(qū)域,橫豎排列都可以,內(nèi)部所有元素的尺寸可以按照一個規(guī)則和這個區(qū)域的大小聯(lián)系起來?終于CSS3做出了改變,引入了flex彈性布局方案,彈性盒布局有如下優(yōu)勢:
1.獨立的高度控制與對齊。
2.獨立的元素順序。
3.指定元素之間的關(guān)系。
4.靈活的尺寸與對齊方式。
在MDN上有非常簡單易懂的基礎(chǔ)教程: 使用 CSS 彈性盒子
上面也已經(jīng)給出了圣杯布局的自適應(yīng)布局方案,所以代碼就不貼了不過這個例子實現(xiàn)的是3欄成比例縮放,左右欄如果需要固定值的話可以寫成 flex: 0 0 150px; 的樣式。
但是上面的教程沒有給出各個屬性的詳細(xì)解釋,建議看看阮一峰的博文,詳細(xì)易懂而且配圖超漂亮的有木有: Flex 布局教程:語法篇 - 阮一峰的網(wǎng)絡(luò)日志