zoukankan      html  css  js  c++  java
  • 8.1.6 弹性盒模型(1)

    弹性盒模型

    注意在使用弹性盒模型的时候 父元素必须要加display: boxdisplay: inline-box

    box-orient 定义盒模型的布局方向(写在父元素上 )

      Horizontal 水平显示(默认)

      vertical 垂直方向

    box-direction 元素排列顺序(写在父元素上 )

      Normal 正序(默认)

      Reverse 反序

    box-ordinal-group 设置元素的具体位置

    box-flex 定义盒子的弹性空间

    子元素的尺寸 = 盒子的尺寸 * 子元素的box-flex属性值 / 所有子元素的box-flex属性值的和

    box-pack 对盒子富裕的空间进行管理(水平方向)

      start 所有子元素在盒子左侧显示,富裕空间在右侧

      end 所有子元素在盒子右侧显示,富裕空间在左侧

      center 所有子元素居中

      justify 富余空间在子元素之间

    box-align 在垂直方向上对元素的位置进行管理(垂直方向)

      start 所有子元素在据顶

      end 所有子元素在据底

      center 所有子元素居中

    问:未知宽高的块元素如何在屏幕中水平垂直居中?(请看以下代码)

    css

    *{ padding: 0; margin: 0; }
    html, body{ height: 100%; }
    .box{ height: 100%; font-size:20px; color: #fff; display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; }
    .box div{ width: 100px; height: 100px;background: red; border: 1px solid #fff; }

    html

    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
  • 相关阅读:
    字符数组数据映射转换到实体对象model注解方式 demo
    字符数组转换及数字求和 java8 lambda表达式 demo
    java8 Lambda及Stream学习笔记
    java读取txt文件行的两种方式对比
    sftp jsch文件移动备份的思路
    APOI2009-抢掠计划
    NOIP2011
    省选算法(转)
    割点
    实验十 团队作业6:团队项目用户验收&Beta冲刺
  • 原文地址:https://www.cnblogs.com/zouxinping/p/4964953.html
Copyright © 2011-2022 走看看