zoukankan      html  css  js  c++  java
  • css display:box 新属性

    一、display:box;

      在元素上设置该属性,可使其子代排列在同一水平上,类似display:inline-block;。

    二、可在其子代设置如下属性

      前提:使用如下属性,必须在父代设置display:box;

      1.box-flex:number;

        1)占父级元素宽度的number份

        2)若子元素设置固定宽度,则该子元素应用固定宽度,其他未设置固定宽度的字元素将余下的父级宽度(父级-已设置固定宽度的子代元素的总宽度按 number占份数

        3)若子元素有margin值,则按余下(父级宽度-子代固定总宽度-总margin值)宽度占number份

      2.box-orient:horizontal/vertical

        在父级上设置该属性,则子代按水平排列或竖直排列。

        注:所有主流浏览器不支持该属性,必须加上前缀。

        1)horizontal  水平排列,子代总width=父级width。若父级固定宽度,则子代设置的width无效,子代会撑满父级宽度。

        2)vertical  垂直排列,子代总height=父级height。若父级固定高度,则子代设置的height无效,子代会撑满父级高度。

      3.box-direction:normal/reverse

        在父级上设置该属性,确认子代的排列顺序。

        1)normal  默认值,子代按html顺序排列

        2)reverse  反序

      4.box-align:start/end/center/stretch

        在父级设置,子代的垂直对齐方式。

        1)start  垂直顶部对齐

        2)end 垂直底部对齐

        3)center 垂直居中对齐

        4)stretch 拉伸子代的高度,与父级设置的高度一致。子代height无效。

      5.box-pack:start/end/center

        在父级设置,子代的水平对齐方式。

        1)start  水平左对齐

        2)end  水平右对齐

        3)center  水平居中对齐

  • 相关阅读:
    JS BOM对象 History对象 Location对象
    JS 字符串对象 数组对象 函数对象 函数作用域
    JS 引入方式 基本数据类型 运算符 控制语句 循环 异常
    Pycharm Html CSS JS 快捷方式创建元素
    CSS 内外边距 float positio属性
    CSS 颜色 字体 背景 文本 边框 列表 display属性
    【Android】RxJava的使用(三)转换——map、flatMap
    【Android】RxJava的使用(二)Action
    【Android】RxJava的使用(一)基本用法
    【Android】Retrofit 2.0 的使用
  • 原文地址:https://www.cnblogs.com/whiteMu/p/5378747.html
Copyright © 2011-2022 走看看