南昌莫非之網(wǎng)頁(yè)布局和flex網(wǎng)頁(yè)布局之間的比較
隨著上網(wǎng)設(shè)備成本的下降和居民收入水平的提高,互聯(lián)網(wǎng)正逐步走進(jìn)千家萬(wàn)戶(hù),越來(lái)越多的企業(yè)認(rèn)識(shí)到了互聯(lián)網(wǎng)的便捷作用。中國(guó)互聯(lián)網(wǎng)信息中心最新調(diào)查統(tǒng)計(jì),國(guó)內(nèi)網(wǎng)民規(guī)模繼續(xù)呈現(xiàn)持續(xù)快速發(fā)展的趨勢(shì)。
由互聯(lián)網(wǎng)所帶動(dòng)的這場(chǎng)數(shù)字經(jīng)濟(jì)變革,以超乎我們預(yù)期的威力和速度沖擊著社會(huì)的各個(gè)層面。作為全新的媒體和全新的市場(chǎng),互聯(lián)網(wǎng)改變了人們生活、工作的各個(gè)層面。?
在當(dāng)今互聯(lián)網(wǎng)時(shí)代,一個(gè)企業(yè)沒(méi)有屬于自己的網(wǎng)站,則像是一個(gè)人關(guān)起門(mén)來(lái)做生意,很大程度上會(huì)給企業(yè)帶來(lái)很大的不方便。?
設(shè)計(jì)師前幾天在逛論壇的時(shí)候,看到有人在討論圣杯網(wǎng)頁(yè)布局和雙飛翼布局方式,有一部分觀點(diǎn)認(rèn)為圣杯布局和雙飛翼布局方式已經(jīng)是過(guò)去式了,快要被淘汰了。當(dāng)下流行趨勢(shì)是flex布局。做網(wǎng)站的設(shè)計(jì)師覺(jué)得這個(gè)觀點(diǎn)很有意思,也想發(fā)表自己的一些看法。
我們先來(lái)說(shuō)說(shuō)圣杯布局和雙飛翼布局,這兩種布局文式基本上是一致的,都是兩邊固定寬度,中間自適應(yīng)的三欄布局,其中,中間欄放到文檔流前面,保證先行渲染。解決方案大體相同,都是三欄全部float:left浮動(dòng),區(qū)別在于解決中間欄div的內(nèi)容不被遮擋上,圣杯布局是中間欄在添加相對(duì)定位,并配合left和right屬性,效果上表現(xiàn)為三欄是單獨(dú)分開(kāi)的(如果可以看到空隙的話(huà)),而雙飛翼布局是在中間欄的div中嵌套一個(gè)div,內(nèi)容寫(xiě)在嵌套的div里,然后對(duì)嵌套的div設(shè)置margin-left和margin-right,效果上表現(xiàn)為左右兩欄在中間欄的上面,中間欄還是100%寬度,只不過(guò)中間欄的內(nèi)容通過(guò)margin的值顯示在中間。
flex 布局又稱(chēng) 彈性盒子 布局,現(xiàn)今雖已得到眾高端瀏覽器廠商的支持,做網(wǎng)站 發(fā)現(xiàn)由于IE10以下的用戶(hù)基數(shù)仍然很大,大部分Web開(kāi)發(fā)者并不能夠真正在某種程度上大膽嘗試這種新型布局理念。 Flex布局的主要思想是讓容器能使其子元素的寬高(或其他屬性)能夠以**的方式去填充可用空間(主要是去適應(yīng)不同的設(shè)備跟分辨率)。一個(gè)Flex彈性盒子能讓子元素填充可用空間或者為了阻止子元素超出區(qū)域而進(jìn)行收縮。
綜上所述,做網(wǎng)站 設(shè)計(jì)師認(rèn)為Flex布局正處在蓬勃發(fā)展時(shí)期,F(xiàn)lex布局和圣杯布局就是新舊事物之間轉(zhuǎn)換的過(guò)程,不存在誰(shuí)被誰(shuí)淘汰。在網(wǎng)站建設(shè)實(shí)際過(guò)程中,根據(jù)需要選擇是用圣杯布局,或是flex布局。