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

這篇文章給大家分享的是有關CSS中常見自適應布局是什么的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

　　自適應布局：

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

　　方法一

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

　　HTML代碼

　　<divclass="box">

　　<divclass="left"></div>

　　<divclass="right"></div>

　　</div>

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

　　<styletype="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>

　　效果圖：

　　未標題-1.jpg

　　方法二

　　左邊自適應，右邊定寬

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

　　HTML代碼：

　　<divclass="box">

　　<divclass="left"></div>

　　<divclass="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>

感謝各位的閱讀！關于“CSS中常見自適應布局是什么”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！