關(guān)于盒子理論與網(wǎng)頁設(shè)計(jì)

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

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

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

彈性盒子理念

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

對齊

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

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

方向

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

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

定位

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

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

次序

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

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

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

1. 塊級元素緊緊的沿著一條不可見線

2. 我們可以沿著那條線推動元素

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

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

順序

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

• 頭部

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

• 變換屬性

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

• 主要內(nèi)容

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

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

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

• 導(dǎo)航

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

• 尾部

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

為了可以被搜索引擎檢索和用戶瀏覽，這些元素被按順序排列?，F(xiàn)在，我們把這個繩子從移動設(shè)備的頂部懸掛下來，記錄他們，并且把主要內(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ī)則同樣適用。

嵌套繩子和盒子

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

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

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

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

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

為了使事情簡單一些，我們會在一個相似的布局上開始工作。

一個典型的郵箱APP排版布局

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

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

設(shè)置文檔

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

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

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

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

聲明這些元素為彈性盒子

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

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

增加一些維度

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

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

使主要部分可滑動

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

測試內(nèi)容

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

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

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

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

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

本文來自成都品牌網(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)站

分享標(biāo)題：關(guān)于盒子理論與網(wǎng)頁設(shè)計(jì)
分享地址：http://www.muchs.cn/news31/168581.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、網(wǎng)站改版、定制網(wǎng)站、網(wǎng)站排名、動態(tài)網(wǎng)站、網(wǎng)站策劃

廣告

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