深层次浅析css3 中display box应用方式

日期:2021-03-04 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

css3给display特性出示了box这个值,巨大的便捷了开发设计者,下面给大伙儿详细介绍css3 display box实际用法。

在其中的1个情景以下:

倘若大家要想使得內部的123元素水平以不一样的占比切分outer所占的室内空间,过去的做法大家将会会让123元素波动或设定display特性为inline-block,随后再给width特性设定宽度百分比去切分outer。

应用display:box后能够这样完成:


拷贝编码
编码以下:

<code class="language-css" hljs="">#outer{
width:600px;
height:100px;
display:-moz-box;
display:-webkit-box;
display:box;
}
#a1{
background:blue;
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
}
#a2{
background:green;
-moz-box-flex:2;
-webkit-box-flex:2;
box-flex:2;
}
#a3{
background:yellow;
-moz-box-flex:3;
-webkit-box-flex:3;
box-flex:3;
}</code>

实际效果以下:

子元素中box-flex特性为该元素的占有率,若想让此特性起效,父元素务必设定display:box。以a3为例,a3设定了box-flex为3,则他所占的宽度为600*(3/(1+2+3))为300px。

假如在其中1个子元素设定了固定不动宽度100px,则剩余的500px可能参加到占比区划的标准中。

以上所述便是本文给大伙儿共享的css3 中display box应用方式,期待大伙儿喜爱。

上一篇:怎样编写互联网营销推广计划方案 返回下一篇:没有了