CSS中常見的自適應(yīng)布局是什么

這篇文章主要介紹CSS中常見的自適應(yīng)布局是什么，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)公司從2013年開始，先為前鋒等服務(wù)建站，前鋒等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為前鋒企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

CSS中常見自適應(yīng)布局有：左邊定寬右邊自適應(yīng)；右邊定寬左邊自適應(yīng)；兩邊定寬中間自適應(yīng)

今天將介紹的是CSS中常見的自適應(yīng)布局，有一定的參考價值，希望對大家有所幫助。接下來在文章中將為大家詳細介紹自適應(yīng)布局的幾種方法

自適應(yīng)布局：

自適應(yīng)布局的特點就是根據(jù)不同的設(shè)備其屏幕尺寸的大小來自適應(yīng)，也就是在每個靜態(tài)布局中，頁面元素會隨著窗口的大小的調(diào)整發(fā)生變化

方法一

左邊固定右邊自適應(yīng)，一般用于移動端Web的列表展示

HTML代碼

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
    </div>

實現(xiàn)方法：給父元素一個絕對定位使其子元素可以撐開父元素高度，固定一邊定寬且左浮動，右邊自適應(yīng)的寬高給百分比

 <style type="text/css">
    .box{
         position: absolute;
        width:100%;
        height: 100%;
    }
     .left{
            width:200px;
            height:100%;
            background: pink;
            float: left;
        }
        .right{
            width:100%;
            height:100%;
            background: skyblue;
        }
    </style>

效果圖：

方法二

左邊自適應(yīng)，右邊定寬

display:table-cell屬性就是讓標簽元素以表格單元格的形式呈現(xiàn)，類似于td標簽，這個屬性只適用于目E8瀏覽器及其以上版本的和其他現(xiàn)代瀏覽器都是支持此屬性的。這個屬性的使用為我們的自適應(yīng)式布局帶來就簡便

HTML代碼：

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
    </div>

實現(xiàn)方法：給父元素設(shè)置為table元素再通過display:table-cell完成

.box{
    position: absolute;
     width:100%;
    height: 100%;
    display: table;
    table-layout: fixed;
    }
.left {
    width: 200px;
    height:100%;
    display:table-cell;
    background: pink;
    }

.right {
   display: table-cell;
   width:100%;
   height: 100%;
   display: table-cell;
     background: skyblue;
        }
    </style>

效果圖：

方法三

兩邊定寬中間自適應(yīng)

HTML代碼

<div class="box">
    <div class="left"></div>
    <div class="content"></div>
    <div class="right"></div>
    </div>

實現(xiàn)方法：flex 屬性是用于設(shè)置或檢索彈性盒模型對象的子元素如何分配空間。

 .box{
 position: absolute;
 display: flex;
 width: 100%;
 height: 100%;
    }
 .left {
 width: 200px;
height:100%;
 float:left;
background: pink;}
.content{
float: left;
height: 100%;
flex: 1;
 background-color:#f1f19b;
}
.right {
 display: table-cell;
width:200px;
height: 100%;
 float: left;
background: skyblue;
        }

效果圖如下：

以上是“CSS中常見的自適應(yīng)布局是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享文章：CSS中常見的自適應(yīng)布局是什么
文章源于：http://muchs.cn/article26/jcjpcg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、小程序開發(fā)、服務(wù)器托管、網(wǎng)站改版、網(wǎng)站設(shè)計、動態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)