CSS中常見的自適應布局是什么

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

CSS中常見自適應布局有：左邊定寬右邊自適應；右邊定寬左邊自適應；兩邊定寬中間自適應

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

自適應布局：

自適應布局的特點就是根據不同的設備其屏幕尺寸的大小來自適應，也就是在每個靜態布局中，頁面元素會隨著窗口的大小的調整發生變化

方法一

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

HTML代碼

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

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

 <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>

效果圖：

方法二

左邊自適應，右邊定寬

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

HTML代碼：

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

實現方法：給父元素設置為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>

效果圖：

方法三

兩邊定寬中間自適應

HTML代碼

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

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

 .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中常見的自適應布局是什么”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！