zoukankan      html  css  js  c++  java
  • CSS3弹性盒模型

    旧式的弹性盒子方法

    1、在拥有盒子的盒子上加display:box; 或 inline-box 开启弹性盒模型

    2、box-flex 分配空间,假如容器有a份,box-flex:2,那就占a分之2

    3、分布方向  水平box-orient: horizontal;  垂直 box-orient:vertical;

    4、定义显示顺序:box-ordinal-group

    实例(没作兼容)

    <!DOCTYPE html>
    <html lang="zh">
    
    <head>
        <meta charset="UTF-8">
        <title>旧弹性盒模型</title>
        <style type="text/css">
         .content{
             width: 1000px;
             display:-webkit-box;
         }
        .content div {
            height: 50px;
            line-height: 50px;
            text-align: center;     
        }
        
        #box1 {
            background: #F69A0B;
             -webkit-box-flex:1; 
             -webkit-box-ordinal-group:2; 
        }
        
        #box2 {
            background: #FE6403;
           -webkit-box-flex:2;
           -webkit-box-ordinal-group:1; 
        }
        
        #box3 {
            background: #02C3F5;
            -webkit-box-flex:3;
            -webkit-box-ordinal-group:3; 
        }
        </style>
    </head>
    
    <body>
        <div class="content">
            <div id="box1">box1</div>
            <div id="box2">box2</div>
            <div id="box3">box3</div>
        </div>
    </body>
    
    </html>

    新式的弹性盒子方法

    1、在拥有盒子的盒子上加display:flex; 开启弹性盒模型

    2、flex-grow 分配空间,假如容器有a份,box-flex:2,那就占a分之2

    3、分布方向 水平flex-direction: row; 垂直 flex-direction:column;

    4、定义显示顺序:order

    实例(没作兼容)-与上面效果相同,只是写法不一样

    <!DOCTYPE html>
    <html lang="zh">
    
    <head>
        <meta charset="UTF-8">
        <title>新弹性盒模型</title>
        <style type="text/css">
        .content {
            width: 1000px;
            height: 500px;
            display: -webkit-flex;
        }
        
        .content div {
            height: 50px;
            line-height: 50px;
            text-align: center;
        }
        
        #box1 {
            background: #F69A0B;
            -webkit-flex: 1;
            -webkit-flex-grow: 1;
            -webkit-order: 2;
        }
        
        #box2 {
            background: #FE6403;
            -webkit-flex: 2;
            -webkit-flex-grow: 2;
            -webkit-order: 1;
        }
        
        #box3 {
            background: #02C3F5;
            -webkit-flex: 3;
            -webkit-flex-grow: 3;
            -webkit-order: 3;
        }
        </style>
    </head>
    
    <body>
        <div class="content">
            <div id="box1">box1</div>
            <div id="box2">box2</div>
            <div id="box3">box3</div>
        </div>
    </body>
    
    </html>

    注意

    display:box; 是在属性值加兼容如 display:-webkit-box;   

  • 相关阅读:
    设置文字内容阴影效果
    android TouchEvent解析(2)
    后台运行 程序
    Intent 大全完整版
    URI URL的区别
    Java中List循环遍历的时候删除当前对象(自己)
    HDU 1005
    XML 导入 Sqlite 遇到的强大工具Navicat
    android eclipse开发环境 自动提示 程序无法响应解决方法
    DOM4J 递归解析xml文件
  • 原文地址:https://www.cnblogs.com/tinyphp/p/4772191.html
Copyright © 2011-2022 走看看