真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

CSS3中新布局的方法有哪些

這篇文章給大家介紹CSS3中新布局的方法有哪些，內(nèi)容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

公司主營業(yè)務(wù)：成都網(wǎng)站設(shè)計、網(wǎng)站制作、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)公司推出源匯免費做網(wǎng)站回饋大家。

一、常見的頁面布局

在拿到設(shè)計稿時，作為一個前端人員，我們首先會做的應(yīng)該是為設(shè)計圖大致地劃分區(qū)域，然后選擇一種最合理的，結(jié)構(gòu)清晰的布局。下面我先根據(jù)一些典型的網(wǎng)站案例列舉一下幾種常見的頁面布局。

1、T型布局

這個是我們比較常見的布局，其頁面的頂部一般放置橫網(wǎng)站的標(biāo)志或Banner廣告，下方左側(cè)是導(dǎo)航欄菜單，下方右側(cè)則用于放置網(wǎng)頁正文等主要內(nèi)容。
Segmentfault的主頁就是T型布局的。由于網(wǎng)頁太長了，沒有截取底部。

CSS3中新布局的方法有哪些

2、國字型布局

國字型布局下最上面是網(wǎng)站的標(biāo)題以及橫幅廣告條，接下來是網(wǎng)站的主要內(nèi)寄，左右分列一些小條內(nèi)容，中問是主要部分，與左右一起羅列到底，最下方是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。
案例圖片來自騰訊11年的一道前段筆試題，有興趣的同學(xué)可以去看一下。2011騰訊前端面試稿

CSS3中新布局的方法有哪些

3、POP布局

POP布局指頁面布局像一張宣傳海報，以一張精美圖片作為頁面的設(shè)計中心。常用于時尚類站點。優(yōu)點顯而易見：漂亮吸引人。缺點就是速度慢。
人大的主頁就類似這種布局。

CSS3中新布局的方法有哪些

4、左右布局型

顧名思義，就是網(wǎng)頁主體分為左右兩大塊，多見為后臺管理系統(tǒng)頁面。一般左右布局型的頁面需要做到兩列等高。

如：

CSS3中新布局的方法有哪些

5、上下布局型

參見蘋果的官網(wǎng)，類似于整屏顯示的網(wǎng)頁都為上下布局。

二、如何實現(xiàn)——常見的布局方法

關(guān)于布局的類型就先說這么多，下面來總結(jié)一下上述的布局怎么來實現(xiàn)。下面提一下大家應(yīng)該都很熟悉的兩大布局方法。圣杯布局和雙飛燕布局。其實這兩種方法一般多用國字型布局上。就是針對三行三列布局的。進行相應(yīng)的改造也可以用在T字型布局上。用這兩種方法可以很好地解決主體部分優(yōu)先加載的問題。

1、圣杯布局

CSS3中新布局的方法有哪些

基礎(chǔ)布局：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  

    •   

    •   

    重點來看main部分的代碼

    CSS Code復(fù)制內(nèi)容到剪貼板

    1.   

    2.     #main {   

    3.         overflow: hidden; /*修整由子元素浮動引起的高度塌陷問題*/  

    4.         zoom: 1;/*低版本ie下:觸發(fā)haslayout屬性,修整由子元素浮動引起的高度塌陷問題*/  

    5.         /*將主體部分左右側(cè)預(yù)留出左右邊欄大小的空白位置*/  

    6.         padding: 0 300px 0 220px;    

    7.     }   

    8.     .m_content, .m_leftside, .m_rightside {   

    9.         float: left;   

    10.         /*目的是將左右側(cè)邊欄拉回*/  

    11.         position: relative;   

    12.     }   

    13.     .m_content {   

    14.         width: 100%;   

    15.     }   

    16.     .m_leftside {   

    17.         width: 220px;   

    18.         /*由于m_content占據(jù)了100%空間，所以需要用負的margin值將左邊欄拉回*/  

    19.         margin-left: -100%;   

    20.         /*將主體部分預(yù)留的左側(cè)補白區(qū)域填充滿*/  

    21.         left: -220px;   

    22.     }   

    23.     .m_rightside {   

    24.         width: 300px;   

    25.         /*用負的margin值將右邊欄拉回自身大小個像素單位*/  

    26.         margin-left: -300px;   

    27.          /*將主體部分預(yù)留的右側(cè)補白區(qū)域填充滿*/  

    28.         left: 300px;   

    29.     }   

    30.   

    31.   

    32.   

    33.     這里是主體   

    34.     這是左側(cè)邊欄   

    35.     這是右側(cè)邊欄   

    36.   

    37.   

    以上就是圣杯布局方法，基本思路是運用浮動加定位的方法，缺點是代碼較復(fù)雜，不能模擬三欄等高效果。

    2、雙飛燕布局

    布局的效果跟圣杯的一樣，代碼有所不同。雙飛燕布局的代碼更加簡單，只是多加了一個div用來布局。
    基礎(chǔ)布局部分代碼一樣。

    main部分：

    CSS Code復(fù)制內(nèi)容到剪貼板

    1.   

    2.   

    3.   

    4.        

    5.            

    6.         這里是主體   

    7.        

    8.     這是左側(cè)邊欄   

    9.     這是右側(cè)邊欄   

    10.   

    11.   

    了解了以上兩種布局的方法后，很多布局都能寫得得心應(yīng)手了。但是應(yīng)對多欄等高布局還有點欠缺。那么現(xiàn)在來談?wù)劧鄼诘雀卟季值姆椒ā?/p>

    3、多欄等高布局

    這里詳細總結(jié)了等高布局的八大方法 Click，我再談?wù)剬嶋H項目中比較常用的，或者說比較簡單的三種方法。

    圖片模擬

    CSS3中新布局的方法有哪些

    比如我們需要做一個上圖的布局，那么需要截取這樣一個側(cè)邊的小圖片對側(cè)邊和內(nèi)容部分包裹的元素進行背景平鋪，用來模擬出側(cè)邊欄的高度跟內(nèi)容高度一致的視覺效果。

    4、table布局

    只需要將需要等高的若干欄設(shè)置display屬性為table-cell；若其中一列希望是自適應(yīng)寬度，還需將父元素的display設(shè)置成table，width為100%。

    代碼如下：

    CSS Code復(fù)制內(nèi)容到剪貼板

    1.   

    2.   

    3.   

    4.        

    5.        

    6.    

    5、padding補白

    這是前不久在網(wǎng)上看到的一種辦法，實質(zhì)就是為欄目添加一個足夠大的padding-bottom值，將欄目撐開，然后再添加相同大小的負的margin-bottom值將內(nèi)容移動回來。注意要在負盒子上加上overflow: hidden的屬性。

    代碼如下：

    CSS Code復(fù)制內(nèi)容到剪貼板

    1.   

    2.   

    3.   

    4.        

    5.        

    6.   

    7.   

    CSS2的布局方法總結(jié)得到這里就告一段落了。現(xiàn)在來看看CSS3新增的布局方法。

    一、Flex布局

    因為書面上的解釋比較抽象，我這里就盡量說得簡單通俗一點。

    要進行flex布局，需要定義一個flex容器，然后再處理其子項目。只要一個容器被定義為flex容器，那么其子元素都稱作它的子項目。

    flex布局的基本思想是通過flex容器來伸縮控制子項目的寬度和高度，以此來完全填充flex容器的可用空間。子項目的寬高、排列方式等都是通過設(shè)置相關(guān)屬性改變的。那么以這種方式布局上述幾種布局就簡單多了。子項目默認的排列方式與浮動布局略為相似。

    CSS3中新布局的方法有哪些

    1、Flex容器

    flex容器的定義方式：

    CSS Code復(fù)制內(nèi)容到剪貼板

    1. div{display:flex}   

    flex容器分為主軸和側(cè)軸。主軸決定容器子項的排列方向。側(cè)軸與主軸相互垂直。主軸可有垂直和水平兩個方向。

    flex容器可對子項進行的操控有：（即設(shè)置在容器的屬性。這個很重要?。?/p>

    下面來看看每一個屬性的取值和實現(xiàn)效果

    flex-direction：

    CSS Code復(fù)制內(nèi)容到剪貼板

    1. div{   

    2.     flex-direction: row /*水平排列，默認*/  

    3.                      /*水平排列，但子項目從右側(cè)開始排列*/  

    4.                      /*垂直排列*/  

    5.                     ; /*垂直排列，但子項目從下側(cè)開始排列*/  

    6.    }   

    測試中我令flex容器的寬度為100px，高為200px，定義了5個未定義寬高的子項目，演示了上述的四種排列情況。效果：

    CSS3中新布局的方法有哪些

    這里需要說明的是：在未定義子項目的伸縮方式時，默認是按子項目本身大小渲染的。

    flex-wrap

    CSS Code復(fù)制內(nèi)容到剪貼板

    1. div{   

    2.     flex-direction: nowrap    

    3.     /*當(dāng)子項目在主軸上的總跨度大于主軸長度時，不進行換行，而是縮小每個子項目的跨度。默認*/  

    4.                      /*---同上---進行換行顯示*/  

    5.                      /*從側(cè)軸的末端進行換行（在主軸的排列方向不變）。實際不常用*/  

    6.    }   

    測試中我定義了每個子項目的寬度為30px，flex容器還是原來的100px寬。效果：

    CSS3中新布局的方法有哪些

    CSS3中新布局的方法有哪些

    CSS3中新布局的方法有哪些

    由于這里設(shè)定的是子項目寬度，所以對于主軸為垂直方向的容器子項沒什么影響。

    flex-flow

    CSS Code復(fù)制內(nèi)容到剪貼板

    1. div{   

    2.     flex-flow:  || ;   

    3.     /*就是上述兩個屬性的結(jié)合簡寫 默認：flex-flow：row nowrap*/  

    4.    }   

    justify-content

    CSS Code復(fù)制內(nèi)容到剪貼板

    1. div{   

    2.     justify-content: flex-start /*以項目開始進行排列的那端進行對齊，默認左對齊*/  

    3.                       /*以項目結(jié)束排列的那端進行對齊，默認右對齊*/  

    4.                      

       /*居中對齊，默認水平居中*/  

    5.            

    6.         /*兩端對齊且項目之間的間隔都相等（貼邊顯示）*/  

    7.                          

    8.             

    9.          /*第一個元素前的空間以及最后一個元素后的空間為其他空白空間的一半下平均分布*/  

    10.                         

    11.                        

    12.    }   

    測試時我設(shè)定了flex容器寬高都為200px，子項沒有設(shè)定寬高。 效果：

    主軸為水平方向時：

    CSS3中新布局的方法有哪些

    主軸為水平垂直時：

    CSS3中新布局的方法有哪些

    align-items

    CSS Code復(fù)制內(nèi)容到剪貼板

    1. div{   

    2.     align-items: flex-start /*側(cè)軸起始點對齊*/  

    3.                   /*側(cè)軸終止點對齊*/  

    4.                  

       /*側(cè)軸中點點對齊*/  

    5.            

    6.         /*項目的第一行文字的基線對齊*/  

    7.                      

    8.             

    9.          /*默認值，如果項目未設(shè)定寬（高度），則占滿整個容器側(cè)軸跨度*/  

    10.                     

    11.                        

    12.    }     

    CSS3中新布局的方法有哪些

    最后的baseline看起來跟flex-start沒啥區(qū)別，因為我給每個子項設(shè)置高度。設(shè)置高度后：

    CSS3中新布局的方法有哪些

    align-content

    CSS Code復(fù)制內(nèi)容到剪貼板

    1. div{   

    2.     align-content: flex-start /*與側(cè)軸起始點對齊*/  

    3.                     /*與側(cè)軸終止點對齊*/  

    4.                    

       /*與側(cè)軸中點點對齊*/  

    5.            

    6.         /*與側(cè)軸兩端對齊，各子項在各軸上的間距相等*/  

    7.                        

    8.          /*各子項在各軸上的間距相等，項目間距比邊距間距大一倍*/             

    9.                              

    10.          /*項目占滿整個側(cè)軸*/  

    11.                       

    12.                        

    13.    }   

    上面已提到過，對于單軸線的子項來說，本屬性不起作用。但是默認情況下是只有子項目是一根軸線的（flex-wrap默認是nowrap），所以要使這個屬性看到效果，必須設(shè)置flex-wrap。
    已下是flex-wrap為wrap的幾種情況。

    CSS3中新布局的方法有哪些

    子項

    以下這些屬性設(shè)置在子項上。

    子項自身的操控有：

    那么分別來看看每個屬性的取值和實現(xiàn)效果（）

    order

    利用這個屬性可以解決某個區(qū)塊優(yōu)先加載但是在頁面上的顯示較靠后的問題。

    CSS Code復(fù)制內(nèi)容到剪貼板

    1. div .item {order:}   

    /*數(shù)值越大，排列越靠后。默認為0*/

    CSS3中新布局的方法有哪些

    這里我設(shè)置了第一個子項的order為1。

    flex-grow

    如果所有項目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）。如果一個項目的flex-grow屬性為2，其他項目都為1，則前者占據(jù)的空間將比其他項多一倍。

    CSS Code復(fù)制內(nèi)容到剪貼板

    1. div .item {flex-grow:}     

    2.   

    設(shè)置flex-grow前：

    CSS3中新布局的方法有哪些

    設(shè)置后：

    CSS3中新布局的方法有哪些


    第二個項目的flex-grow為2，其他為0：
    <注意這個時候就不需要給子項設(shè)置寬度了>

    CSS3中新布局的方法有哪些

    flex-shrink

    如果所有項目的flex-shrink屬性都為1，當(dāng)空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。

    CSS Code復(fù)制內(nèi)容到剪貼板

    1. div .item {flex-shrink:}    

    我給每個子項設(shè)定了200px的寬度，而flex容器寬度為500px，這時候若不設(shè)置flex-shrink，則每個項目都會以相同比例縮小自身大小來適應(yīng)容器。
    此時我給第二個項目設(shè)置了flex-shrink: 0; 該項目大小不變。

    CSS3中新布局的方法有哪些

    flex-basis

    這個屬性設(shè)置子項在主軸上的跨度，簡單地說就是設(shè)置寬高。

    CSS Code復(fù)制內(nèi)容到剪貼板

    1. div .item {flex-basis: | auto/*auto是默認值，就是項目本身大小*/}    

    flex

    這個就是把flex-grow、flew-shrink、flex-basis結(jié)合一起的寫法啦=。=

    CSS Code復(fù)制內(nèi)容到剪貼板

    1. div .item {flex:none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]}    

    flex-grow必須。默認為0 1 auto。

    align-self

    這個屬性用來單獨設(shè)定某個子項目在側(cè)軸的對齊方式。

    CSS Code復(fù)制內(nèi)容到剪貼板

    1. div .item {align-self:flex-start|flex-end|center|baselinebaseline|stretch}    

    2.   

    有關(guān)flex布局的方法就總結(jié)和介紹到這里了。

    栗子(利用flex進行上述幾種布局實現(xiàn))

    下邊把利用flex布局實現(xiàn)上述幾種布局的代碼貼出來（可有多種實現(xiàn)方法）。

    T布局

    CSS3中新布局的方法有哪些

    1.    
   
    *{margin: 0;padding: 0;}   
    header, footer {background: sandybrown;height: 50px;}   
    section {display: flex;align-items: flex-start;height: 500px;}   
    article {order: 1;flex: 3;align-self: stretch;background: wheat;}   
    aside {flex: 1;background: seashell;height: 100px;}   
   
  
   

         

         
    
         
       

         

    國字型布局

    CSS3中新布局的方法有哪些

    1.    
   
    *{margin: 0;padding: 0;}   
    header, footer {background: sandybrown;height: 50px;}   
    section {display: flex;align-items: flex-start;height: 500px;}   
    article {order: 1;flex: 3;align-self: stretch;background: wheat;}   
    aside {flex: 1;background: seashell;height: 100px;}   
    section.sidebar {order: 2;flex: 1;height: 100px;background: seashell;}   
   
  
   

         

         
    
         
       
    
         
   

    等高布局

    真心簡單。

    CSS3中新布局的方法有哪些

    1.    
   
    *{margin: 0;padding: 0;}   
    html,body {height: 100%;}   
    section {display: flex;height: 100%;}   
    article {order: 1;flex: 3;background: wheat;}   
    aside {flex: 1;background: seashell;}   
   
  
   

         

         
    
         
       
    
         
   

    關(guān)于CSS3中新布局的方法有哪些就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。


    網(wǎng)頁題目：CSS3中新布局的方法有哪些
    網(wǎng)站路徑：http://weahome.cn/article/psgohs.html

    其他資訊

    在線咨詢

    微信咨詢

    電話咨詢

    028-86922220（工作日）

    18980820575（7×24）

    提交需求

    返回頂部