可伸缩框属性（Box）

下面是按照盒子模型展示后的一些属性。在使用以下代码前不要忘了加这个哦

             
          display: -moz-box;   /* Firefox */ 
         
          display: -ms-flexbox; /* IE10 */ 
         
          display: -webkit-box;/* Safari、Opera 以及 Chrome */ 
         
          display: box;        /* W3C */

IE不支持box哦！！！需要支持IE的时候用flex

--------------------------------------------------------
--------------------------------------------------------

1、box-align 垂直位置

2、box-direction 显示方向

3、box-flex 相对尺寸

4、box-ordinal-group 子元素显示顺序

5、box-orient 子元素排列顺序

6、box-pack 水平位置

7、box-shadow 阴影

8、box-sizing 绘制内边距边框的位置
--------------------------------------------------------
--------------------------------------------------------

1、box-align 垂直位置

/*    start: 将剩余所有空间扔在最后
        end: 将剩余所有空间扔在开始
     center: 将剩余所有空间一半扔在开始，一半扔在最后
    justify: 在每个子元素之间分割多余的空间（首个子元素前和最后一个子元素后没有多余的空间）
*/
-moz-box-align:start|end|center|justify;/* Firefox */
-webkit-box-align:start|end|center|justify;/* Safari、Opera 以及 Chrome */
box-align:start|end|center|justify;/* W3C */

2、box-direction 显示方向

/*   normal: 以默认方向显示子元素。
    reverse: 以反方向显示子元素。类似右对齐
    inherit: 继承
*/
-moz-box-direction:normal|reverse|inherit;/* Firefox */
-webkit-box-direction:normal|reverse|inherit;/* Safari、Opera 以及 Chrome */
box-direction:normal|reverse|inherit;/* W3C */

3、box-flex 相对尺寸

/* 2.0 (记住这个是给子元素绑的) */
/* 是否可伸缩其尺寸, 同父级的子内容的尺寸是相对的 */
-moz-box-flex: value;/* Firefox */
-webkit-box-flex: value;/* Safari、Opera 以及 Chrome */
box-flex: value;/* W3C */

4、box-ordinal-group 子元素显示顺序

/* 子元素显示顺序(记住这个是给子元素绑的) */
-ms-flex-order:value; /* Internet Explorer 10 */
-moz-box-ordinal-group:value; /* Firefox */
-webkit-box-ordinal-group:value; /* Safari and Chrome */
box-ordinal-group:value;

5、box-orient 子元素排列顺序

/*   horizontal: 水平
       vertical: 垂直
    inline-axis: 同horizontal
     block-axis: 同vertical
        inherit: 继承
*/
-moz-box-orient: horizontal|vertical|inline-axis|block-axis|inherit;/* Firefox */
-webkit-box-orient: horizontal|vertical|inline-axis|block-axis|inherit;/* Safari、Opera 以及 Chrome */
box-orient: horizontal|vertical|inline-axis|block-axis|inherit;/* W3C */

6、box-pack 水平位置

/*    start: 将剩余所有空间扔在最后
        end: 将剩余所有空间扔在开始
     center: 将剩余所有空间一半扔在开始，一半扔在最后
    justify: 在每个子元素之间分割多余的空间（首个子元素前和最后一个子元素后没有多余的空间）
*/
-moz-box-pack: start|end|center|justify;/* Firefox */
-webkit-box-pack: start|end|center|justify;/* Safari、Opera 以及 Chrome */
box-pack: start|end|center|justify;/* W3C */

7、box-shadow 阴影

/* box-shadow: 【水平阴影位置☆】 【垂直阴影位置☆】 【模糊距离】 【阴影尺寸】 【颜色】 【将外部阴影改为内部阴影】; */
-moz-box-shadow: 10px 10px 50px 20px pink inset;/* Firefox */
-webkit-box-shadow: 10px 10px 50px 20px pink inset;/* Safari、Opera 以及 Chrome */
box-shadow: 10px 10px 50px 20px pink inset;/* W3C */

8、box-sizing 绘制内边距边框的位置

/* content-box: 在宽度和高度之外绘制元素的内边距和边框
    border-box: 为元素指定的任何内边距和边框都在已设定的宽度和高度内进行绘制
       inherit: 继承
*/
-moz-box-sizing: content-box|border-box|inherit;/* Firefox */
-webkit-box-sizing: content-box|border-box|inherit;/* Safari、Opera 以及 Chrome */
box-sizing: content-box|border-box|inherit;/* W3C */

可伸缩框属性（Box）

猜你喜欢