zoukankan      html  css  js  c++  java
  • css3中webkit-box的用法

    转自:http://www.frontopen.com/288.html

    1、之前要实现横列的web布局,通常就是float或者display:inline-block; 但是都不能做到真正的流体布局。至少width要自己去算百分比。
    2.flexible box 就可以实现真正意义上的流体布局。只要给出相应属性,浏览器会帮我们做额外的计算。

    提供的关于盒模型的几个属性:

    box-orient           子元素排列 vertical or horizontal
    box-flex             兄弟元素之间比例,仅作一个系数
    box-align            box 排列
    box-direction        box 方向
    box-flex-group       以组为单位的流体系数
    box-lines
    box-ordinal-group    以组为单位的子元素排列方向
    box-pack

    提供的关于盒模型的几个属性:

    1、三列自适应布局,且有固定margin:

    <style>
    .wrap {
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    }
    .child {
    min-height: 200px;
    border: 2px solid #666;
    -webkit-box-flex: 1;
    margin: 10px;
    font-size: 100px;
    font-weight: bold;
    font-family: Georgia;
    -webkit-box-align: center;
    }
    </style>
    <div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    </div>

    2、当一列定宽,其余两列分配不同比例亦可(三列布局,一列定宽,其余两列按1:2的比例自适应):

    <!DOCTYPE html>
    <html>
    <
    meta charset=”utf-8″ />
    <
    style> .wrap { display: -webkit-box; -webkit-box-orient: horizontal; } .child { min-height: 200px; border: 2px solid #666; margin: 10px; font-size: 40px; font-weight: bold; font-family: Georgia; -webkit-box-align: center; } .w200 {width: 200px} .flex1 {-webkit-box-flex: 1} .flex2 {-webkit-box-flex: 2} </style> <div> <div>200px</div> <div>比例1</div> <div>比例2</div> </div> </html>

    3、下面是一个常见的web page 的基本布局:

    <!DOCTYPE html><html><meta charset=”utf-8″ /><style>
    header, footer, section {
    border: 10px solid #333;
    font-family: Georgia;
    font-size: 40px;
    text-align: center;
    margin: 10px;
    }
    #doc {
    width: 80%;
    min-width: 600px;
    height: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    margin: 0 auto;
    }
    header,
    footer {
    min-height: 100px;
    -webkit-box-flex: 1;
    }
    #content {
    min-height: 400px;
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    }
    
    .w200 {width: 200px}
    .flex1 {-webkit-box-flex: 1}
    .flex2 {-webkit-box-flex: 2}
    .flex3 {-webkit-box-flex: 3}
    </style>
    <div id=”doc”>
    <header>Header</header>
      <div id=”content”>
        <section>定宽200</section>
        <section>比例3</section>
        <section>比例1</section>
      </div>
    <footer>Footer</footer>
    </div>
    </html>
  • 相关阅读:
    document.write("x3cx54")?是加密了吗?
    SQL中以count及sum为条件的查询
    给MyEclipse 10增加SVN功能
    iOS参考工具和资源
    Apple Developer参考资料
    [转]最常见的20个jQuery面试问题及答案
    丢掉鼠标-Mac神软Alfred使用手册
    jQuery执行进度提示窗口的实现(progressbar)
    [转]5个JavaScript面试题
    自己写的POIUtil,主要解决从不同的HSSFWorkbook复制sheet以及根据单元格插入图片等
  • 原文地址:https://www.cnblogs.com/lixiangyong/p/webkit-box.html
Copyright © 2011-2022 走看看