网站地图    收藏   

主页 > 前端 > css教程 >

CSS3可伸缩框属性,可用于等分显示子元素或按比

来源:自学PHP网    时间:2015-04-14 14:51 作者: 阅读:

[导读] 用法跟Android的android:layout_weight属性类 20284;,可类比Android中的用法,这样比较好记,由于目前所有浏览器都不支持大部分的属性,所以所有的属性都需要加上Firefox、Safari、Opera 以及 Ch...

用法跟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;

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论