zoukankan      html  css  js  c++  java
  • CSS3可伸缩框属性,可用于等分显示子元素或按比例显示子元素的大小

    使用方法跟Android的android:layout_weight属性类似。可类比Android中的使用方法。这样比較好记,因为眼下全部浏览器都不支持大部分的属性,所以全部的属性都须要加上Firefox、Safari、Opera 以及 Chrome支持替代的-moz-和-webkit-前缀,如今基本上全部的CSS3属性都应该这样做,即每一个属性都须要至少设置三个,參考以下的样例。

    父容器属性:
    display:box;当定义了这个属性时,子元素想居中显示时margin:0px auto是无效的,需使用text-align:center (在Android中布局方式为LinearLayout子控件的layout_weight才干生效,css3中display类似的设为box)
    box-orient : horizontal(水平) | vertical(垂直) | inline-axis(水平) | block-axis(垂直) | inherit; (Android中的android:orientation属性)
    box-direction : normal(默认) | reverse(反转) | inherit;
    box-align(父容器里面子容器的垂直对齐方式) : start(居顶) | end(居底) | center(居中) | baseline | stretch(拉伸); (Android中的android:gravity属性)
    box-pack(父容器里面子容器的水平对齐方式) : start(居左) | end(居右) | center(居中) | justify(水平等分父容器宽度); (Android中的android:gravity属性)
    box-lines(规定假设列超出了父框中的空间。是否要换行显示。

    眼下没有浏览器支持 box-lines 属性。) : single|multiple;

    例:

    display:box;
    display:-moz-box;
    display:-webkit-box;
    box-orient:horizontal;
    -moz-box-orient:horizontal;
    -webkit-box-orient:horizontal;


    子容器属性:
    box-flex(规定框的子元素是否可伸缩其尺寸。) : value(元素的可伸缩行。柔性是相对的,比如 box-flex 为 2 的子元素两倍于 box-flex 为 1 的子元素。

    )。当当中的元素设置了详细的width或height和margin时,其它元素依照父容器的大小减去这些详细的值后再按比例分配。

    如父容器设置了宽度为1200px。box-orient定义成水平划分,即horizontal或inline-axis,子元素定义了box-flex分别为1。2,3。那么第一个子元素的宽度将为200px,第二个为400px,第三个为600px。假设第二个子元素定义了宽度为300px,第一个和第三个的box-flex定义分别为1和2。则第一个宽度将为(1200 - 300)  * 1 / (1+2) = 300px,第三个为600px。第二个为300px。设了margin的话也要一样减去后再划分。

     (Android中的android:layout_weight属性)

    例:

    box-flex:3;
    -moz-box-flex:3;
    -webkit-box-flex:3;

  • 相关阅读:
    1088
    1082 read number in chinese
    1079 total sales of supply chain
    1075 pat judge
    1074 reverse list
    1071 speech pattern
    ts 之 多种泛型的处理方式
    玩一下node中的child_process
    玩转 js 位运算
    记录一下尝试的class和function分别作为构造函数方法
  • 原文地址:https://www.cnblogs.com/gavanwanggw/p/6913283.html
Copyright © 2011-2022 走看看