• 关于display: box 和 box-flex


    这两天做手机项目,使用到这个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{
         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 值。得到的效果图如下:

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

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

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

  • 相关阅读:
    个人工作总结2
    个人工作总结1
    《梦断代码》阅读笔记01
    构建之法阅读笔记4
    四则运算-安卓版
    最大联通子数组之和(dfs,记忆化搜索,状态压缩)
    第五周进度报告
    第四周进度报告
    最大子数列之和问题
    构建之法阅读笔记3
  • 原文地址:https://www.cnblogs.com/yanyalun/p/4092543.html
Copyright © 2020-2023  润新知