現(xiàn)在CSS浮動(dòng)清楚定義了現(xiàn)在的網(wǎng)頁(yè)布局，基于幾個(gè)世紀(jì)以來(lái)的印刷理論，盡管他們運(yùn)用起來(lái)很合適，嚴(yán)格來(lái)說(shuō)，浮動(dòng)并非是那個(gè)目的。就像表單布局一樣，在90年代并沒(méi)有阻止我們的前進(jìn)。

然而，網(wǎng)頁(yè)布局的未來(lái)確實(shí)是清晰明亮的，這要?dú)w功于彈性盒子。CSS布局機(jī)制是讓我們安排元素在一個(gè)真正的網(wǎng)格空間。一些元素被固定，其他的可以滾動(dòng)。他們的順序可以獨(dú)立于他們?cè)瓉?lái)的順序。所有的這些元素都可以適配一系列屏幕，從寬屏到智能手機(jī)，甚至是一些還沒(méi)有想到的設(shè)備，瀏覽器支持也非常棒。所以這是一個(gè)很好的加入彈性盒子布局方式的時(shí)機(jī)，如果你還沒(méi)有嘗試過(guò)的話。

但是改變我們的方式并不是那么容易的。彈性盒子有著令人眼花繚亂的特性，這些特性很少有相似的，引入他需要花點(diǎn)時(shí)間。幸運(yùn)的是，為了達(dá)到這個(gè)布局目的，你只需要了解很少的理論知識(shí)。讓我們看下我們?nèi)绾蝿?chuàng)建一個(gè)類似于Gmail的網(wǎng)站，基于彈性盒子布局原理的界面。假如你們有探索或者深入理解彈性盒子布局這種理論，這篇文章將會(huì)再次解釋那些曾經(jīng)困惑你的地方。

彈性盒子理念

彈性盒子理論需要一個(gè)全新的思考方式。代替從左到右，從上到下的行與列的排列布局，我們?cè)谝粭l線上安排元素——實(shí)際上，是兩條線，一個(gè)主軸線和一個(gè)交叉軸線，但今天創(chuàng)新互聯(lián)要用的是第一個(gè)主軸線?？紤]到主軸線沿著盒子（div或者其他html元素）排列，這個(gè)類似于繩子的無(wú)形軸線，從容器的一端延伸到另一端。這引出四個(gè)很有趣的概念。

對(duì)齊

首先，我們可以沿著繩子分割這個(gè)盒子，使元素到一端，這樣集中分布它們。那意味著元素可以緊鄰屏幕的左邊或者右邊，無(wú)論屏幕有多寬。甚至這樣分配可以滿足任何尺寸的屏幕，這是最好的在我們的多屏幕世界中。

彈性盒子允許設(shè)計(jì)師將HTML的元素推向繩子的任何一端

方向

其次，我們也可以翻轉(zhuǎn)這個(gè)繩子，因此盒子向反方向翻轉(zhuǎn)而不用去編輯HTML。這和排序技術(shù)很相似，允許我們翻轉(zhuǎn)排列——除了第三個(gè)特征進(jìn)一步來(lái)區(qū)分它們的不同。

元素的順序和位置都可能被翻轉(zhuǎn)

定位

第三，可以通過(guò)90度轉(zhuǎn)動(dòng)繩子從容器的頂部吊著，而不是從一邊運(yùn)行到另一邊。

全部排列可以旋轉(zhuǎn)90度，懸掛在容器的頂部

次序

最終，我們可以控制盒子的次序，沿著繩子哪一個(gè)排第一、第二、第三等等，而不用去編輯HTML。這是很厲害的，意味著我們可以控制HTML的文檔結(jié)構(gòu)。想讓元素垂直居中排布？沒(méi)有問(wèn)題。想在你的HTML結(jié)束但在你開(kāi)始布局時(shí)導(dǎo)航？當(dāng)然可以。想嘗試一下不同的布局？全部需要用到CSS理論。就像這樣，我們已經(jīng)開(kāi)始考慮就文檔內(nèi)容和設(shè)備，而不是固化的柵格。

HTML元素的順序可以通過(guò)CSS屬性來(lái)改變，而不需要去改變HTML結(jié)構(gòu)本身

有很多知識(shí)，但是這里只講一些基礎(chǔ)的理論：

1. 塊級(jí)元素緊緊的沿著一條不可見(jiàn)線

2. 我們可以沿著那條線推動(dòng)元素

3. 我們可以翻轉(zhuǎn)繩子，這樣就可以翻轉(zhuǎn)盒子的順序。

4. 我們可以沿著繩子按任何方式來(lái)改變盒子的順序，而不用考慮改變HTML。

順序

順序是一個(gè)很重要的概念在彈性盒子理論中。讓我們舉一個(gè)簡(jiǎn)單的HTML文檔:一個(gè)傳統(tǒng)的博客一般包含這幾點(diǎn)信息。

• 頭部

網(wǎng)站的標(biāo)題，描述，查詢表單（這些框架告訴人們網(wǎng)站信息，已確保讓他們知道自己在那里）

• 變換屬性

作者，日期，主題（這些信息可以幫助人們了解這是否是他們所需要的）

• 主要內(nèi)容

網(wǎng)頁(yè)的主要內(nèi)容是什么

• 提供服務(wù)的內(nèi)容

一些相關(guān)的信息

• 導(dǎo)航

可以指引你到達(dá)網(wǎng)站的各個(gè)網(wǎng)頁(yè)

• 尾部

版權(quán)信息，訂閱信息，社交媒體，信息登記

為了可以被搜索引擎檢索和用戶瀏覽，這些元素被按順序排列?，F(xiàn)在，我們把這個(gè)繩子從移動(dòng)設(shè)備的頂部懸掛下來(lái)，記錄他們，并且把主要內(nèi)容放在首位。

1. 主要內(nèi)容

2. 變換屬性

3. 補(bǔ)充內(nèi)容

4. 頭部

5. 導(dǎo)航

6. 尾部

然而，在電腦桌面端又有不同的瀏覽順序

1. 頭部

2. 變換屬性

3. 主要內(nèi)容

4. 補(bǔ)充內(nèi)容

5. 導(dǎo)航

6. 尾部

等一下，那不是正確的順序。我們希望導(dǎo)航在頂部，彈性盒子可以很輕松的做到這一點(diǎn)。這條繩子也可以放進(jìn)彈性盒子內(nèi)部，并且所有的規(guī)則同樣適用。

嵌套繩子和盒子

每一個(gè)彈性盒子布局都可以在容納另外的盒子按照他們各自的繩子排列，這條繩子可以從左到右排列反之亦然，也可以從上到下反之亦然，也可以把盒子推向另一邊，居中來(lái)分布。因?yàn)閺椥院凶拥撵`活性打開(kāi)了各種可能性，他也意味著我們需要仔細(xì)的考慮我們的布局。

盒子沿著彈性繩子排列的時(shí)候，也可能包含著其他彈性盒子

我們從一些內(nèi)容舉例開(kāi)始，看下它為何變得復(fù)雜了。這不是按照布局的順序（你所看到的順序）假想一下你給一個(gè)觀眾一個(gè)描述，你告訴他們你將說(shuō)什么，然后你說(shuō)了，然后你在總結(jié)下你剛說(shuō)的內(nèi)容。我們假設(shè)的頁(yè)面也是按照相似的結(jié)構(gòu)。

• 頭部
• 當(dāng)前信息
• 信息列表
• 盒子內(nèi)部的一些鏈接
• 尾部

描述一個(gè)設(shè)計(jì)

為了使事情簡(jiǎn)單一些，我們會(huì)在一個(gè)相似的布局上開(kāi)始工作。

一個(gè)典型的郵箱APP排版布局

這里有兩個(gè)彈性盒子布局，第一個(gè)有三個(gè)盒子從上到下。第二個(gè)布局是在中間的盒子，從右到做排列。

頭部、尾部的寬度和視口寬度一樣。導(dǎo)航欄適配在左邊，當(dāng)主要內(nèi)容信息不能被完全容納后，區(qū)域允許出現(xiàn)滾動(dòng)條。為了達(dá)到這個(gè)目的，需要設(shè)置一些浮動(dòng)和絕對(duì)定位，但是彈性盒子給了我們更多的選擇，接下來(lái)我們一起看下。

設(shè)置文檔

外部的容器只有三個(gè)部分，包裹在一個(gè)彈性容器元素內(nèi)：

我們用語(yǔ)義表達(dá)方式把它稱之為彈性盒子，至少我們的CSS會(huì)更通順。

在盒子內(nèi)部，我們需要三個(gè)層級(jí)塊：

這個(gè)例子用這個(gè)段落作為一個(gè)獨(dú)立的整體，而不是文章中的段落。

聲明這些元素為彈性盒子

我們需要告訴瀏覽器這些元素是彈性布局，可以伸縮的。

注意到這個(gè)可以使彈性盒子應(yīng)用在主要的容器上，而不是內(nèi)容本身。

增加一些維度

根據(jù)原型設(shè)計(jì)圖，我們了解到確定的元素需要有自身的長(zhǎng)度和寬度。網(wǎng)站的頭部和尾部相對(duì)于主題內(nèi)容來(lái)說(shuō)要短一點(diǎn)，相對(duì)于左邊很窄的導(dǎo)航工具欄。文章的內(nèi)容區(qū)域占據(jù)了剩下的空間區(qū)域。為了保持靈活的布局而不考慮屏幕尺寸（這篇教程所聲明的），這些區(qū)域不會(huì)設(shè)置固定的寬度。

這里，我們將 flex-basis比喻為寬度，只要主軸是水平的，如果我們將繩子從上到下掛起來(lái)，那么 flex-basis 將自動(dòng)變?yōu)楦叨龋?/p>

使主要部分可滑動(dòng)

這個(gè)是很容易的。只需要設(shè)置添加 overflow:scroll。對(duì)于主要的元素避免他被頭部和尾部所覆蓋。小提示：嘗試overflow:auto 隱藏滾動(dòng)條（當(dāng)他們不是必須的時(shí)候）在大多數(shù)瀏覽器中。

測(cè)試內(nèi)容

在這一點(diǎn)上，頭部的表單浮動(dòng)，需要設(shè)置一點(diǎn)邊距，即使當(dāng)瀏覽器被重置。主要部分應(yīng)當(dāng)很好的浮動(dòng)不管在任何尺寸的瀏覽器中。假如瀏覽器不能友好的支持彈性盒子，那么這個(gè)頁(yè)面將變?yōu)橹饕獌?nèi)容優(yōu)先的布局方式。

知道哪些瀏覽器不支持彈性盒子是很重要的。每個(gè)最新的版本基本上都支持，但是，有個(gè)問(wèn)題是用戶何時(shí)更新他們的軟件。那么哪些版本開(kāi)始這些瀏覽器支持彈性盒子呢？

• 谷歌31以及以后
• 火狐31以及以后
• IE瀏覽器10及以后
• 電腦版Safari 7及以后
• iOS版 7.1及以后
• 安卓4.4及以后
• 谷歌安卓版42及以后
• 歐朋27及以后

那么老的瀏覽器怎么辦呢？解決方案大相徑庭，取決于你正在努力達(dá)到的布局,盡管我們可以推出一些技巧。

最安全的方式讓彈性盒子好的支持瀏覽器，是按照順序把CSS寫在他將出現(xiàn)的地方。按照語(yǔ)義化的思考方式開(kāi)始，老版本瀏覽器將忽視彈性盒子的屬性信息，感謝的是，好的條件注釋將允許我們應(yīng)用浮動(dòng)和清除布局。老版本的瀏覽器往往可以給你更清晰的邏輯順序，因此彈性盒子和浮動(dòng)將并存。智能的瀏覽器將會(huì)應(yīng)用彈性盒子布局，盡管邏輯上瀏覽器應(yīng)當(dāng)忽視它們。最后，假如你想試驗(yàn)下，那么嘗試Flexie,一個(gè)基于JavaScript的polyfill的老版本瀏覽器工具。

本文來(lái)自成都品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián) 

標(biāo)簽：創(chuàng)新互聯(lián),高端網(wǎng)站建設(shè),企業(yè)建網(wǎng)站,響應(yīng)式網(wǎng)站

文章名稱：關(guān)于盒子理論與網(wǎng)頁(yè)設(shè)計(jì)
網(wǎng)頁(yè)網(wǎng)址：http://jinyejixie.com/news/168581.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、微信公眾號(hào)、服務(wù)器托管、網(wǎng)站改版、企業(yè)網(wǎng)站制作、品牌網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)