AppCan_3 传统的流式布局 与 弹性盒子
生活随笔
收集整理的這篇文章主要介紹了
AppCan_3 传统的流式布局 与 弹性盒子
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在傳統的流式布局，由內容決定容器布局的大小，
彈性盒子恰好相反，它是由父容器分配大小，再由父容器給子容器分配大小，
看一個示例
在AppCan， phone目錄下，增加一個html頁面: ??彈性盒子和流式布局.html
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><link rel="stylesheet" href="css/fonts/font-awesome.min.css"><link rel="stylesheet" href="css/ui-box.css"><link rel="stylesheet" href="css/ui-base.css"><link rel="stylesheet" href="css/ui-color.css"><link rel="stylesheet" href="css/appcan.icon.css"><link rel="stylesheet" href="css/appcan.control.css"></head><body class="um-vp bc-bg" ontouchstart><!---流式布局---><div style="display:inline; border:1px solid blue"><div style="display:inline; background:#66ccff">銀教授</div><div style="display:inline; background:#ffffff">么么噠</div></style><br/><br/><!--彈性盒子,可以看到 子元素1,2并不是1:2比例, 這個問題再下一部分解決--><div style="display:-webkit-box;width:300px;border:1px solid blue"><div style="-webkit-box-flex:1; background:#66ccff">當時我就震驚了</div><div style="-webkit-box-flex:2; background:#ffffff">小么小二郎</div><div style="background:#66ccff">lazyman</div></div><br/><div style="display:-webkit-box;width:300px;border:1px solid blue"><div style="-webkit-box-flex:1; background:#66ccff;position: relative" ><div style="position:absolute;width:100%;height:100%">冷哥微博搬運工</div> </div><div style="-webkit-box-flex:2; background:#ffffff;position: relative" ><div style="position:absolute;width:100%;height:100%">寶峰任</div></div><div style="background:#66ccff">lazyman</div></div></body> </html>
<span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; background-color: rgb(255, 255, 255);">效果圖</span>
在彈性盒子里，有兩個特點:
1. 在外層使用-webkit-box,屬性，2. 在子元素使用-webkit-box-flex 屬性?
注意：在彈性盒子中，使用abslute 絕對定位屬性, 可以按照指定比例來顯示 ，不會隨著內容發生偏移?
總結
以上是生活随笔為你收集整理的AppCan_3 传统的流式布局 与 弹性盒子的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 我提莫谢谢你！给我100块羞辱离职，原来
- 下一篇： win10重装系统后连不上公司服务器,W