成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css 布局：兩邊固定中間自適應

Martin91 / 3014人閱讀

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

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

浮動 




    
我在左邊

    
我在右邊

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

原理：

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

浮動元素高度為0，浮動盒子層級比 block 塊級水平盒子高，比 inline/inline-block 水平盒子低。

浮動內(nèi)嵌 div 




    

        
            我在中間
         
    

    
我在左邊

    
我在右邊

原理：

三個元素都浮動，其中主題元素沾滿一行 100% ，利用負 margin 把左右兩邊的元素放好。

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

定位 




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

    
我在左邊，我是定位元素

    
我在右邊，我是定位元素

原理：

左右兩個元素定位，可放任意位置。

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

flex 




    
我在左邊

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

    
我在右邊

原理：

flex 布局，子元素默認水平排列。

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

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/53084.html

相關(guān)文章

  • CSS || 三欄布局，兩邊固定，中間自適應

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

    pcChao 評論0 收藏0

  • css 布局：兩邊固定中間自適應

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

    CoyPan 評論0 收藏0

  • 三列布局（左右固定，中間自適應）

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

    aboutU 評論0 收藏0

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

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

    番茄西紅柿 評論0 收藏0

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

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

    tigerZH 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<