你不知道的5個(gè)Web技術(shù)秘密

在本文中，我們將會(huì)鉆研“The Web Can Do That!?”中五種最神奇的Web效果。

備注：本文討論的技術(shù)都非常新，最好在Chrome 21+上試用或演示。

1.CSS Web應(yīng)用

CSS已經(jīng)向我們展示了許多神奇、魅力非凡的地方，但不幸地是，CSS在布局和展現(xiàn)能力方面（絕對(duì)定位和浮動(dòng)）已經(jīng)不能滿(mǎn)足現(xiàn)代Web開(kāi)發(fā)需求。值得關(guān)注的是我們構(gòu)建的不僅僅是一個(gè)網(wǎng)站——而是應(yīng)用程序。這個(gè)需求是非常不同的，許多原始網(wǎng)站架構(gòu)在某方面都做的很糟糕，比如響應(yīng)式設(shè)計(jì)。

幸運(yùn)的是，CSS Working Group已經(jīng)提前做了3個(gè)調(diào)整，并且還提出了一系列的新規(guī)范來(lái)直接解決應(yīng)用程序的布局和設(shè)計(jì)問(wèn)題。CSS網(wǎng)格布局、層次結(jié)構(gòu)、區(qū)域和靈活的方框布局模塊等等。

下面讓我們來(lái)探討其中一個(gè)：CSS Flexbox

Alignment

這里我特別要提到的是Flexbox，因?yàn)樗梢允箖?nèi)容在水平和垂直方向居中，僅需要3行CSS代碼。

示例代碼：

1. .box {  
2.   display: +flex;  
3.   +justify-content: center;  
4.   +align-items: center;  
5.  }  
6.    
7. <section class="box"> 
8.   <div>A</div><div>B</div><div>C</div> 
9. </section> 

 備注：代碼中的“+”表示供應(yīng)商前綴，例如“+flex”可能是-webkit-flex，-ms-flex等。

以上例子會(huì)產(chǎn)生如下布局：

演示！

display：flex——通知父容器要成為一個(gè)‘flex container’。在上面的插圖中，紅色的區(qū)域表示flex container并且里面包含三個(gè)“孩子”，藍(lán)色的區(qū)域，屬于‘flex items’。A、B、C這三個(gè)字母位于主軸和十字軸位置上。僅僅使用了：justify-content:center和align-items:center這兩行代碼。

排序和方向定位

Flexbox的另一個(gè)神奇屬性是我們可以從標(biāo)簽的呈現(xiàn)方式上對(duì)其進(jìn)行完全獨(dú)立排序。這個(gè)需要用到兩個(gè)新的CSS屬性，order和flex-direction。Order是對(duì)每個(gè)“兄弟姐妹”成員進(jìn)行排序，flex-direction修改他們的方向（行VS列）。

你想把A、B、C這三個(gè)字母放在同一個(gè)列里面嗎？沒(méi)問(wèn)題，只需要設(shè)置flex-direction:column即可。

備注：默認(rèn)情況下，每個(gè)項(xiàng)目的排序是根據(jù)標(biāo)簽的默認(rèn)排序來(lái)的，但是我們可以輕易地覆蓋默認(rèn)排序，通過(guò)給B一個(gè)比其他家庭成員低一階的值，它將優(yōu)先于其他成員。

1. .box {  
2.   +flex-direction: column;  
3. }  
4. .box > :nth-child(2) {  
5.   +order: -1;  
6. } 

效果：

演示！

值得注意的是，我們不能改變文件內(nèi)容，它仍然是A、B、C三個(gè)字母。Flexbox可以使我們能夠獨(dú)立于內(nèi)容進(jìn)行編排頁(yè)面樣式。

服務(wù)器租用/服務(wù)器托管中國(guó)五強(qiáng)！虛擬主機(jī)域名注冊(cè)頂級(jí)提供商！15年品質(zhì)保障！--億恩科技[ENKJ.COM]