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>
  • 相关阅读:
    xfce4-windowck-plugin的替代品
    git使用Beyond Compare作为diff和merge工具
    Visual Studio设置多个快捷键
    scrapy参数-COOKIES_ENABLED 最权威解释, 帮你避坑
    Linux基础使用
    python 所有的库整理
    Nginx配置详解
    15个常用的javaScript正则表达式
    Redis开发建议
    mysql 同步大量数据小技巧
  • 原文地址:https://www.cnblogs.com/zouxinping/p/4964953.html
Copyright © 2011-2022 走看看