Heim >Web-Frontend >HTML-Tutorial >CSS3可伸缩框属性,可用于等分显示子元素或按比例显示子元素的大小_html/css_WEB-ITnose

CSS3可伸缩框属性,可用于等分显示子元素或按比例显示子元素的大小_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:01:261258Durchsuche

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

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn