日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
CSS3布局體驗(yàn)：靈活的盒子模型

CSS 3為開(kāi)發(fā)人員帶來(lái)了很多期待已久的炫目功能，同時(shí)在CSS 2的基礎(chǔ)中，它也增加了一些新的盒子模型參數(shù)。通過(guò)學(xué)習(xí)和測(cè)試，可以發(fā)現(xiàn)這種新的盒子模型布局對(duì)建立自適應(yīng)布局的頁(yè)面帶來(lái)很大的好處。在這篇文章中，所有例子都基于以下HTML代碼：

成都創(chuàng)新互聯(lián)長(zhǎng)期為近1000家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為來(lái)賓企業(yè)提供專業(yè)的做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)，來(lái)賓網(wǎng)站改版等技術(shù)服務(wù)。擁有10余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

相關(guān)文章推薦：定義未來(lái)Web樣式 CSS 3最新特性一覽  CSS 3備受期待的8大功能

 
 
 
    
  
  
  
  1. 
  
  
  
  2.  1
  •  2
  •  3

  • 容器的排列

    在通常的情況下，頁(yè)面上所有容器的順序都按照載入的順序排列。而使用CSS 3提供的功能后，我們可以在不改變HTML結(jié)構(gòu)的前提下隨意改變?nèi)萜黠@示的位置，這樣不但給排版帶來(lái)極大的方便，我們也可以利用這些功能進(jìn)行流量整形。在需用使用靈活盒子模型(FlexibleBoxModule)的時(shí)候，我們需要先把其父容器的Display屬性設(shè)置為box或者inline-box。

    水平分布和垂直分布

    我們可以通過(guò)box-orient屬性指定容器的分布軸，當(dāng)這個(gè)屬性的值為vertical時(shí)其子容器將垂直分布（也可以為block-axis），當(dāng)值為horizontal時(shí)其子容器講水平分布（也可以為inline-axis）。在本文的第一個(gè)例子里我們使用以下的CSS：

     
 
 
      
  
  
  
    1. #exemple1.content{ 
      2. 
  
  
  
    2.  -moz-box-orient:horizontal; 
      3. 
  
  
  
    3.  -webkit-box-orient:horizontal; 
      4. 
  
  
  
    4.  box-orient:horizontal; 
      5. 
  
  
  
    5. } 
      6. 
  
  
  
    6. 
  
  
  
    7. #exemple1.boite{ 
      8. 
  
  
  
    8.  -moz-box-flex:1; 
      9. 
  
  
  
    9.  -webkit-box-flex:1; 
      10. 
  
  
  
    10.  box-flex:1; 
      11. 
  
  
  
    11. }
      12.

    具體的效果可以看這個(gè)DEMO，三個(gè)子Div容器都橫向并列了。

    注：這個(gè)效果在CSS 2里理論上也可以通過(guò)Display:inline;實(shí)現(xiàn)，但由于某些瀏覽器的BUG，沒(méi)人會(huì)這樣做。

    反序排列

    box-direction屬性可以讓我們隨意改變?nèi)萜鞯娘@示順序。我們知道，在默認(rèn)的情況下，block級(jí)元素是按照加載順序從上到下排列，inline級(jí)元素是從左到右排列的，但現(xiàn)在通過(guò)box-direction屬性我們可以讓最后加載的block級(jí)元素顯示在最頂部，最后加載的inline級(jí)元素顯示在左邊。

    但在使用這個(gè)屬性的時(shí)候要注意它可能會(huì)改變?cè)氐哪承傩?，產(chǎn)生一些不能控制的效果。在第二個(gè)例子里，我們使用以下的CSS：

     
 
 
      
  
  
  
    1. #exemple2.content{ 
      2. 
  
  
  
    2.  -moz-box-orient:vertical; 
      3. 
  
  
  
    3.  -moz-box-direction:reverse; 
      4. 
  
  
  
    4. 
  
  
  
    5.  -webkit-box-orient:vertical; 
      6. 
  
  
  
    6.  -webkit-box-direction:reverse; 
      7. 
  
  
  
    7. 
  
  
  
    8.  box-orient:vertical; 
      9. 
  
  
  
    9.  box-direction:reverse; 
      10. 
  
  
  
    10. } 
      11. 
  
  
  
    11. 
  
  
  
    12. #exemple2.boite{ 
      13. 
  
  
  
    13.  -moz-box-flex:1; 
      14. 
  
  
  
    14.  -webkit-box-flex:1; 
      15. 
  
  
  
    15.  box-flex:1; 
      16. 
  
  
  
    16. }
      17.

    效果大家可以看這個(gè)DEMO。可以發(fā)現(xiàn)，在不改變HTML結(jié)構(gòu)的情況下，容器的排列順序改變了。

    按指定順序排列

    我們不但可以讓一組同級(jí)容器反序排列，而且還可以讓它們按自己喜歡的順序排列，box-ordinal-group屬性可以幫我們做到這一點(diǎn)。通過(guò)box-ordinal-group為各個(gè)容器指定一個(gè)序號(hào)，默認(rèn)情況下他們將會(huì)按照序號(hào)遞增的順序排列。要注意的是：沒(méi)有指定序號(hào)的容器默認(rèn)都為1，并且序號(hào)相同的元素將按照加載順序排列。大家可以看一下下面的CSS：

     
 
 
      
  
  
  
    1. #exemple3.content{ 
      2. 
  
  
  
    2.  -moz-box-orient:vertical; 
      3. 
  
  
  
    3.  -moz-box-direction:reverse; 
      4. 
  
  
  
    4. 
  
  
  
    5.  -webkit-box-orient:vertical; 
      6. 
  
  
  
    6.  -webkit-box-direction:reverse; 
      7. 
  
  
  
    7. 
  
  
  
    8.  box-orient:vertical; 
      9. 
  
  
  
    9.  box-direction:reverse; 
      10. 
  
  
  
    10. } 
      11. 
  
  
  
    11. 
  
  
  
    12. #exemple3.boite{ 
      13. 
  
  
  
    13.  -moz-box-flex:1; 
      14. 
  
  
  
    14.  -webkit-box-flex:1; 
      15. 
  
  
  
    15.  box-flex:1; 
      16. 
  
  
  
    16. } 
      17. 
  
  
  
    17. 
  
  
  
    18. #exemple3.v1{ 
      19. 
  
  
  
    19.  -moz-box-ordinal-group:2; 
      20. 
  
  
  
    20.  -webkit-box-ordinal-group:2; 
      21. 
  
  
  
    21.  box-ordinal-group:2; 
      22. 
  
  
  
    22. } 
      23. 
  
  
  
    23. 
  
  
  
    24. #exemple3.v2{ 
      25. 
  
  
  
    25.  -moz-box-ordinal-group:2; 
      26. 
  
  
  
    26.  -webkit-box-ordinal-group:2; 
      27. 
  
  
  
    27.  box-ordinal-group:2; 
      28. 
  
  
  
    28. } 
      29. 
  
  
  
    29. 
  
  
  
    30. #exemple3.v3{ 
      31. 
  
  
  
    31.  -moz-box-ordinal-group:1; 
      32. 
  
  
  
    32.  -webkit-box-ordinal-group:1; 
      33. 
  
  
  
    33.  box-ordinal-group:1; 
      34. 
  
  
  
    34. }
      35.

    在上面的CSS里，我把第一和第二個(gè)容器的序號(hào)都定為2，第三個(gè)容器序號(hào)為1，因此最終效果應(yīng)該是v3排在第一，v1和v2則根據(jù)加載順序，v1排在v2前面。效果可以看這個(gè)DEMO。

    后記

    CSS 3真的非常強(qiáng)大，我相信在它普及以后，我們做網(wǎng)頁(yè)的時(shí)候?qū)⒖梢詼p少大量的JavaScript。

    文章轉(zhuǎn)自Bolo的博客，

    原文地址：http://blog.imbolo.com/the-css3-flexible-box-model/


    分享名稱：CSS3布局體驗(yàn)：靈活的盒子模型
    地址分享：http://www.5511xx.com/article/ccdpjsi.html