AppCan流失布局与弹性盒子的区别（3）

来源：互联网发布：js中单引号双引号编辑：程序博客网时间：2024/06/06 21:05

在传统的流式布局，由内容决定容器布局的大小，

弹性盒子恰好相反，它是由父容器分配大小，再由父容器给子容器分配大小，

看一个示例

在AppCan， phone目录下，增加一个html页面: 弹性盒子和流式布局.html

[html] view plain copy
 
<!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>  

在弹性盒子里，有两个特点:
1. 在外层使用-webkit-box,属性，2. 在子元素使用-webkit-box-flex 属性

注意：在弹性盒子中，使用abslute 绝对定位属性, 可以按照指定比例来显示，不会随着内容发生偏移

0 0