欢迎来到山村网

关于display: box 和 box-flex

2019-03-30 10:04:44浏览:767 来源:山村网   
核心摘要:这两天做手机项目,使用到这个css3新属性。现在还不为所有浏览器支持,所以使用的时候要加上前缀。使用方法见下面:html代码:di

这两天做手机项目,使用到这个css3新属性。现在还不为所有浏览器支持,所以使用的时候要加上前缀。使用方法见下面:

html代码:

<div class="s-indLine">            <div class="s-indNav s-indIntro">                <span class="s-icon"></span>                <p>品牌介绍</p>            </div>            <div class="s-indNav s-indInfo">                <span class="s-icon"></span>                <p>优惠信息</p>            </div>        </div>        <div class="s-indLine">            <div class="s-indNav s-indShop">                <span class="s-icon"></span>                <p>门店查找</p>            </div>            <div class="s-indNav s-indGoods">                <span class="s-icon"></span>                <p>热卖商品</p>            </div>        </div>

css代码:

.s-indLine{        display: -webkit-box;    display: -moz-box;    display: box;    margin-bottom: 10px;    -moz-box-orient:horizontal;    -webkit-box-orient:horizontal;    box-orient:horizontal;}.s-indLine .s-indNav{    -webkit-box-flex: 5;    -moz-box-flex: 5;    box-flex: 5;    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    box-sizing: border-box;    border-radius: 10px;    color: #ffffff;    text-align: center;    height: 105px;    padding: 15px 0px;    font-size: 1.5rem;}.s-indLine .s-indNav:first-child{    margin-right: 10px;}.s-indIntro{    background: #4eb566;}.s-indInfo{    background: #ffa422;}.s-indShop{    background: #7788f2;}.s-indGoods{    background: #ef604d;}.s-indLine .s-indNav .s-icon, .s-groupNav .s-icon{    width: 50px;    height: 50px;    display: inline-block;    background-repeat: no-repeat;    background-size: 100% 100%;    background-position: center;}.s-indIntro .s-icon{    background-image: url("group.png");}.s-indInfo .s-icon{    background-image: url("group.png");}.s-indShop .s-icon{    background-image: url("group.png");}.s-indGoods .s-icon{    background-image: url("group.png");}

可以不给子元素设置box-flex值,直接使用width代替,也可以设置margin 和 padding 值。得到的效果图如下:

关于display: box 和 box-flex  山村

在chrome或者手机其他的以-webkit为内核的浏览器上调试时,上面的代码是没有问题的,但是在火狐下面,会出现问题,如下图所示:

这地方解决办法,必须给父元素添加width样式,例如 width: 100%; 即可。

此外在火狐上还有一个问题,上面说到可以给子元素不设置box-flex,而是设置width,但是在火狐上不能识别width,而是必须设置box-flex。

(责任编辑:豆豆)
下一篇:

H5移动端页面设计心得分享

上一篇:

使用html5+js实现像素风头像生成器

  • 信息二维码

    手机看新闻

  • 分享到
打赏
免责声明
• 
本文仅代表作者个人观点,本站未对其内容进行核实,请读者仅做参考,如若文中涉及有违公德、触犯法律的内容,一经发现,立即删除,作者需自行承担相应责任。涉及到版权或其他问题,请及时联系我们 xfptx@outlook.com