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

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

　　自適應(yīng)布局：

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

　　方法一

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

　　HTML代碼

　　<divclass="box">

　　<divclass="left"></div>

　　<divclass="right"></div>

　　</div>

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

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

　　效果圖：

　　未標(biāo)題-1.jpg

　　方法二

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

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

　　HTML代碼：

　　<divclass="box">

　　<divclass="left"></div>

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

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