亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

css 布局：兩邊固定中間自適應(yīng)

CoyPan / 3486人閱讀

摘要：解析四種常用方法以及原理浮動(dòng)浮動(dòng)內(nèi)嵌定位。浮動(dòng)元素高度為，浮動(dòng)盒子層級(jí)比塊級(jí)水平盒子高，比水平盒子低。中間元素用，防止內(nèi)容跑到左右兩塊定位元素下面被遮蓋。我在左邊我在中間，自動(dòng)占據(jù)剩余空間我在右邊原理布局，子元素默認(rèn)水平排列。

解析四種常用方法以及原理：浮動(dòng)、浮動(dòng)內(nèi)嵌 div、定位、flex。

浮動(dòng) 




    
我在左邊

    
我在右邊

    
我排最后，但是跑到中間來了

原理：

浮動(dòng)元素和非浮動(dòng)元素不在同一個(gè)立體空間，如果不清浮動(dòng)，位置在它下面的元素將往上浮。

浮動(dòng)元素高度為0，浮動(dòng)盒子層級(jí)比 block 塊級(jí)水平盒子高，比 inline/inline-block 水平盒子低。

浮動(dòng)內(nèi)嵌 div 




    

        
            我在中間
         
    

    
我在左邊

    
我在右邊

原理：

三個(gè)元素都浮動(dòng)，其中主題元素沾滿一行 100% ，利用負(fù) margin 把左右兩邊的元素放好。

主題元素里面再套一個(gè)子元素，子元素 margin: 0 200px ，防止內(nèi)容跑到左右兩塊浮動(dòng)元素下面被遮蓋。

定位 




    
我在中間，我用 margin 抵消左右兩塊定位元素占據(jù)空間

    
我在左邊，我是定位元素

    
我在右邊，我是定位元素

原理：

左右兩個(gè)元素定位，可放任意位置。

中間元素用 margin: 0 200px，防止內(nèi)容跑到左右兩塊定位元素下面被遮蓋。

flex 




    
我在左邊

    
我在中間，flex: 1 自動(dòng)占據(jù)剩余空間

    
我在右邊

原理：

flex 布局，子元素默認(rèn)水平排列。

flex: 0 1 auto -> 默認(rèn)，占據(jù)空間不跟隨父級(jí)放大，跟隨變小，自身本來寬度

flex: 1 1 auto -> auto，占據(jù)空間跟隨父級(jí)放大，同時(shí)跟隨變小，自身本來寬度

flex: 0 0 auto -> none，占據(jù)空間不跟隨父級(jí)放大，同時(shí)也不跟隨變小，自身本來寬度

flex: 1 1 1 -> auto，占據(jù)空間跟隨父級(jí)放大，同時(shí)跟隨變小，并且自動(dòng)占滿剩余空間

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/114035.html

相關(guān)文章

  • CSS || 三欄布局，兩邊固定，中間自適應(yīng)

    摘要：實(shí)現(xiàn)基于純實(shí)現(xiàn)的三欄布局需要將中間的內(nèi)容放在結(jié)構(gòu)的最后，否則右側(cè)會(huì)沉在中間內(nèi)容的下側(cè)原理元素浮動(dòng)后，脫離文檔流，后面的元素受浮動(dòng)影響，設(shè)置受影響元素的值即可兩邊固定寬度，中間寬度自適應(yīng)。 1 float實(shí)現(xiàn) 基于純float實(shí)現(xiàn)的三欄布局需要將中間的內(nèi)容放在HTML結(jié)構(gòu)的最后，否則右側(cè)會(huì)沉在中間內(nèi)容的下側(cè) 原理：元素浮動(dòng)后，脫離文檔流，后面的元素受浮動(dòng)影響，設(shè)置受影響元素的margi...

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

  • css 布局：兩邊固定中間自適應(yīng)

    摘要：解析四種常用方法以及原理浮動(dòng)浮動(dòng)內(nèi)嵌定位。浮動(dòng)元素高度為，浮動(dòng)盒子層級(jí)比塊級(jí)水平盒子高，比水平盒子低。中間元素用，防止內(nèi)容跑到左右兩塊定位元素下面被遮蓋。我在左邊我在中間，自動(dòng)占據(jù)剩余空間我在右邊原理布局，子元素默認(rèn)水平排列。 解析四種常用方法以及原理：浮動(dòng)、浮動(dòng)內(nèi)嵌 div、定位、flex。 浮動(dòng) .wrap {background: #eee; padding: 20px...

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

  • 三列布局（左右固定，中間自適應(yīng)）

    1、定位 我是左邊，我是固定的 我是中間，我是自適應(yīng)的，左邊右邊都position固定了，他們脫離了文檔流，我終于得到機(jī)會(huì)擠進(jìn)中間啦！只要我margin一下就沒人會(huì)擋住我啦！我可真是個(gè)小機(jī)靈鬼(同時(shí)，我還是個(gè)自由人，我div寫在開頭中間結(jié)尾都可以呢) 我是右邊，我也是固定的 *{ margin:0; padding: 0; } .l...

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

  • css常見的各種布局下----三列布局

    css 三列布局，左右固定寬度右邊自適應(yīng) 　　1不使用定位，只使用浮動(dòng)可以實(shí)現(xiàn)左右固定，中間寬度自適應(yīng)布局 　　　　　1.1.1 自適應(yīng)部分一定要放第一個(gè)位子，使用浮動(dòng)，并且設(shè)置寬度為100%，不設(shè)置浮動(dòng)元素內(nèi)容不夠稱不開整個(gè)寬度 　　　　　1.1.2 左右固定部位，使用margin-left :負(fù)數(shù)，使其左右靠齊 　　　　　1.1.3 中間自適應(yīng)部分嵌套一個(gè)div，設(shè)置m...

    番茄西紅柿 評(píng)論0 收藏0

  • css常見的各種布局下----三列布局

    摘要：三列布局，左右固定寬度右邊自適應(yīng)不使用定位，只使用浮動(dòng)可以實(shí)現(xiàn)左右固定，中間寬度自適應(yīng)布局自適應(yīng)部分一定要放第一個(gè)位子，使用浮動(dòng)，并且設(shè)置寬度為，不設(shè)置浮動(dòng)元素內(nèi)容不夠稱不開整個(gè)寬度左右固定部位，使用負(fù)數(shù)，使其左右靠齊中間自適應(yīng)部分嵌套一css 三列布局，左右固定寬度右邊自適應(yīng) 1不使用定位，只使用浮動(dòng)可以實(shí)現(xiàn)左右固定，中間寬度自適應(yīng)布局 1.1.1 自適應(yīng)部分一定要放第一個(gè)位子，使...

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

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<