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

    注意在使用弹性盒模型的时候 父元素必须要加display:-webkit-box 或 display:-webkit-inline-box(为方便学习只写一种浏览器内核,项目中要写全)

    Box-orient 定义盒模型的布局方向
       Horizontal 水平显示
       vertical 垂直方向
    box-direction 元素排列顺序
    Normal 正序
    Reverse 反序
    box-ordinal-group 设置元素的具体位置
    .box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box; font-size:20px;color:#fff; }
    .box div{width:100px;height:100px;background:red;border:1px solid #fff;}
    .box div:nth-of-type(1){-webkit-box-ordinal-group:2;}
    .box div:nth-of-type(2){-webkit-box-ordinal-group:4;}
    .box div:nth-of-type(3){-webkit-box-ordinal-group:1;}
    .box div:nth-of-type(4){-webkit-box-ordinal-group:5;}
    .box div:nth-of-type(5){-webkit-box-ordinal-group:3;}
    Box-flex 定义盒子的弹性空间
    子元素的尺寸=盒子的尺寸*子元素的box-flex属性值 / 所有子元素的box-flex属性值的和 
    .box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box; font-size:20px;color:#fff; }
    .box div{height:100px;background:red;border:1px solid #fff;}
    .box div:nth-of-type(1){width:300px;}
    .box div:nth-of-type(2){-webkit-box-flex:2;}
    .box div:nth-of-type(3){-webkit-box-flex:3;}
    .box div:nth-of-type(4){-webkit-box-flex:4;}
    .box div:nth-of-type(5){-webkit-box-flex:5;}
    
    </style>
    </head>
    <body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
    </body>
    </html>
     
    box-pack 对盒子富裕的空间进行管理
    Start 所有子元素在盒子左侧显示,富裕空间在右侧
    End 所有子元素在盒子右侧显示,富裕空间在左侧
    Center 所有子元素居中
    Justify 富余空间在子元素之间平均分布
     
    html{height:100%;}
    body{height:100%;margin:0;}
    .box{height:100%; display:-webkit-box;-webkit-box-direction:Reverse; font-size:20px;color:#fff;-webkit-box-pack:center; -webkit-box-align:center;}
    .box div{width:100px;height:100px;background:red;border:1px solid #fff;}
    </style>
    </head>
    <body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
    </body>
    </html>

    webkit-box-align:center:在垂直方向上对元素的位置进行管理
    Star 所有子元素在据顶
    End 所有子元素在据底
    Center 所有子元素居中
     
  • 相关阅读:
    springboot和springcloud版本对应关系
    nexus安装包下载
    centos7安装Redis的踩坑之旅
    搭建本地Spring Initializr服务器
    ElasticSearch数据查看插件elasticsearch-head
    ELK学习历程
    如何使用ob函数输出静态html文件
    微信开发之获取jsapi_ticket
    static_关键字
    static关键字_1
  • 原文地址:https://www.cnblogs.com/guohuiru/p/5194793.html
Copyright © 2011-2022 走看看