国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

三欄布局的n種實(shí)現(xiàn)

aisuhua / 1037人閱讀

摘要：本文主要討論左右邊欄固定寬度，中間欄填滿其余空間的布局。每一種布局都會(huì)有個(gè)，個(gè)人依然認(rèn)為文章里帖代碼并沒有來的直接。其中討論了這么多種種布局，有以下理由是每種布局也都有他的毛病，沒有十全十美的，每種布局也都有人在用。

本文主要討論左右邊欄固定寬度，中間欄填滿其余空間的布局。至于其他類型，基本上也就是半斤和八兩。每一種布局都會(huì)有個(gè)Demo，個(gè)人依然認(rèn)為文章里帖代碼并沒有Demo來的直接。所以正文負(fù)責(zé)解釋，源碼參見Demo。其中討論了這么多種（6種）布局，有以下理由：1是每種布局也都有他的毛病，沒有十全十美的，每種布局也都有人在用。2是雖然有相對(duì)優(yōu)秀的方案，但是不優(yōu)秀的方案也有有用的東西在里邊，可能會(huì)啟發(fā)其他的思路補(bǔ)充遺漏的知識(shí)點(diǎn)。

1. 利用絕對(duì)定位特點(diǎn)：

左右兩欄采用絕對(duì)定位抽離文檔流，分別固定于頁面的左右兩側(cè)，中間欄用左右margin值撐開可以容納左右邊欄的距離。這個(gè)很簡(jiǎn)單不多解釋。 Demo:absoluteLayout

2. 利用兩側(cè)浮動(dòng)都不占據(jù)文檔流：

左欄左浮動(dòng)，右欄右浮動(dòng)，中間欄左右margin值等于左右欄寬度。html中，中間欄要放在左右邊欄的后邊。道理上和絕對(duì)定位差不多，就是不占文檔流了其他元素就填充上了，只要把兩邊留出空間不導(dǎo)致重合即可。 Demo：twoSidesFloatLayoutDemo

3. 利用浮動(dòng)和margin負(fù)值的特點(diǎn)：

標(biāo)簽順序?yàn)?middle> middle 寬度 100%，sub 左右 margin 為左右欄留出空間,其中 sub 元素不要浮動(dòng)，否則會(huì)包裹里面的內(nèi)容而不會(huì)撐滿空間，其他元素全部左浮動(dòng)。left 的 margin-left 為－100%，right 的margin-left為sub的負(fù)的margin-right 。浮動(dòng)的特點(diǎn)就是緊跟著前一個(gè)元素，放不下了就換行，本來middle元素占滿了第一行，sub元素的margin留出的空間并不會(huì)給其他的浮動(dòng)元素，左欄被迫換行，處于第二行最左側(cè)，相當(dāng)于緊跟著第一行后邊，100%的負(fù)margin－left會(huì)讓他從緊跟著第一行變成第一行最左邊，這時(shí)左欄和sub元素的margin－left留出的空間重合，達(dá)到目的，此時(shí)右欄在原來左欄的位置，再用類似的處理方式，達(dá)到最終效果。其中sub的margin可以換為padding，相同的原理和效果。此處如果不需要撐滿空間（有內(nèi)容撐滿sub）可以不要父元素（即middle）。Demo：floatLayoutDemo。說的有點(diǎn)亂其實(shí)就是這個(gè)樣子：

    
    
      
        
        
        
      
      
        

          

            我中間
          

        

        

          我左邊
        

        

          我右邊
4. 利用inline-block特點(diǎn)：

父元素包含左中右欄：（子元素順序中，左，右）父元素設(shè)置padding為左右欄留出空間，然后中欄寬度100%占據(jù)除padding外的空間，左右欄利用margin－left等于自身寬的負(fù)值使其與中欄右邊界重合，再調(diào)節(jié)left，左欄left為－100%右欄left為右欄寬度。左中右欄全部為子元素，所以margin－left無法占據(jù)padding空間，需要左右邊欄相對(duì)定位后調(diào)解left值達(dá)到目標(biāo)狀態(tài)。其中注意父元素設(shè)置font-size: 0; letter-spacing: -4px; 子元素再重置這兩個(gè)屬性。 Demo：inlineBlockLayoutDemo。說的有點(diǎn)亂，其實(shí)就是這個(gè)樣子：

    
    
      
        
        
        
      
      
        

          

            我中間
          

          

            我左邊
          

          

            我右邊
5. 利用calc屬性和inline－block特點(diǎn)：

父元素設(shè)置（同樣是父元素包含左中右欄）：? ?text-align:center;?????font-size: 0;?????? letter-spacing: -4px; ?左中右欄再重置：? ?font-size: 16px;?????? letter-spacing: normal; 左右欄固定寬度， ?html中元素順序?yàn)椋鹤螅?，?????，假設(shè)左右欄寬度和300px；中間攔： ?width:calc(100% - 300px); 百分比與固定寬度混合布局使用，支持ie9+，注意＋－＊／號(hào)兩邊留空格 Demo：useCalcLayoutDemo

6. 利用flex布局：

flex布局我認(rèn)為是最先進(jìn)而方便的布局，非常靈活不過內(nèi)容也不少，只可惜兼容ie10+。不在這多廢話，推薦阮一峰老師的教程：flex教程。 父元素display:flex; ，左右兩欄設(shè)置flex-basis 預(yù)置寬度，中間欄flex-grow: 1;自動(dòng)伸展。完活。 Demo：flexLayoutDemo

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/111296.html

相關(guān)文章

  • 實(shí)現(xiàn)三欄布局的幾種方法

    摘要：前言三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實(shí)際的開發(fā)十分常見，比如淘寶網(wǎng)的首頁，就是個(gè)典型的三欄布局即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬度自適應(yīng)。但網(wǎng)格布局的兼容性不好。 前言 三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實(shí)際的開發(fā)十分常見，比如淘寶網(wǎng)的首頁，就是個(gè)典型的三欄布局：即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬...

    golden_hamster 評(píng)論0 收藏0

  • 實(shí)現(xiàn)三欄布局的幾種方法

    摘要：前言三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實(shí)際的開發(fā)十分常見，比如淘寶網(wǎng)的首頁，就是個(gè)典型的三欄布局即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬度自適應(yīng)。但網(wǎng)格布局的兼容性不好。 前言 三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實(shí)際的開發(fā)十分常見，比如淘寶網(wǎng)的首頁，就是個(gè)典型的三欄布局：即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬...

    IamDLY 評(píng)論0 收藏0

  • 實(shí)現(xiàn)三欄布局的幾種方法

    摘要：前言三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實(shí)際的開發(fā)十分常見，比如淘寶網(wǎng)的首頁，就是個(gè)典型的三欄布局即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬度自適應(yīng)。但網(wǎng)格布局的兼容性不好。 前言 三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在實(shí)際的開發(fā)十分常見，比如淘寶網(wǎng)的首頁，就是個(gè)典型的三欄布局：即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬...

    Hegel_Gu 評(píng)論0 收藏0

  • 三種方法實(shí)現(xiàn)CSS三欄布局

    摘要：本文由云社區(qū)發(fā)表作者前端林子本文會(huì)分別介紹三種實(shí)現(xiàn)三欄布局的方法，可在瀏覽器中打開查看效果方法一自身浮動(dòng)的方法實(shí)現(xiàn)方法需要左欄向左浮動(dòng)，右欄向右浮動(dòng)，中間設(shè)左右來撐開距離實(shí)現(xiàn)三欄布局中間欄不要設(shè)寬度，包括左欄左浮右欄右浮，中間不 本文由云+社區(qū)發(fā)表作者：前端林子 本文會(huì)分別介紹三種CSS實(shí)現(xiàn)三欄布局的方法，可在瀏覽器中打開查看效果 1.方法一：自身浮動(dòng)的方法 實(shí)現(xiàn)方法：需要左欄向左浮...

    hqman 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<