css-可伸缩框属性(Box)-1.1

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

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 */
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值