被废了的display:box弹性盒模型

Posted 2020-08-08 追梦子

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了被废了的display:box弹性盒模型相关的知识，希望对你有一定的参考价值。

　　这几天在研究弹性布局，看书中写的是display:box，结果在chrome浏览器中是正常的，想着移动端大部分浏览器也是webkit内核的应该也没啥问题，结果确实没问题，但仔细一看，高度呢？好吧，严重的bug，高度不起作用了（特殊情况）。再查查资料原来w3c已经废了display:box;换成display:flex了，只好重新学过了，以后还是看这个吧http://www.w3schools.com/国外站请自备神器。

　　UC啥的浏览器用的还是display:box最新的是display:flex，所以移动端还得写两份。当然你也可以使用flex.css库它已经帮你解决兼容性了，但项目小的话还是自己写吧。

下面是写的小dome。

使用box-align需要配合box-orient使用
box-align属性是在相反方向的轴线上发生作用的。如果box-orient设置为horizontal，box-align就会把空间分配在垂直轴上，反之亦然。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性盒模型</title>
    <link rel="stylesheet" href="box-dome.css">
</head>
<body>
    <!-- display:box; -->
    <section id="test_1">
        <p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
        <p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
        <p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
    </section>
    <!-- 平分 -->
    <section id="test_2">
        <p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
        <p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
        <p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
    </section>
    <!-- 左右1份中间3份 -->
    <section id="test_3">
        <p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
        <p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
        <p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
    </section>
    <!-- 第一个固定，其他自适应 -->
    <section id="test_4">
        <p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
        <p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
        <p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
    </section>
    <!-- box-orient:vertical; -->
    <section id="test_5">
        <p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
        <p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
        <p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
    </section>
    <!-- box-orient:horizontal; -->
    <section id="test_6">
        <p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
        <p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
        <p>另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
    </section>
    <!-- box-direction:reverse; -->
    <section id="test_7">
        <p>1 另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
        <p>2 另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
        <p>3 另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
    </section>
    <!-- box-ordinal-group:number; -->
    <section id="test_8">
        <p>1 另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
        <p>2 另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
        <p>3 另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
    </section>
    
    <!-- 使用box-align需要配合box-orient使用 -->
    
    <!-- orient-horizontal -- align-end -->
    <section id="test_9">
        <p>1 另外要注意的事情是子元素溢出了父元素之外，因为它的父元素的宽度是600px，并且每个子元素都是200px宽，还要加上边距、填充和边框，所以组合起来的方框宽度已经超过了父元素的宽度</p>
    </section>
    <!-- orient-horizontal -- align-center -->
    <section id="test_10">
        <p>另外要注意的事情</p>
    </section>
    <!-- orient-vertical -- align-center -->
    <section id="test_11">
        <p>另外要注意的事情</p>
    </section>
    <!-- orient-vertical -- align-center -->
    <section id="test_12">
        <p>另外要注意的事情</p>
    </section>
    <!-- 水平垂直居中 -->
    <section id="test_13">
        <div>
            <p>另外要注意的事情</p>
        </div>
    </section>
</body>
</html>

/* webkit-box */
#test_1{
    display:-webkit-box;

    width:600px;
}
#test_1>p{
    width:200px;
    margin:0 10px;
    text-align:justify;
}
#test_1>p::after{
    content:‘‘;
    display:inline-block;
    width:100%;
}

/* 平分 */
#test_2{
    display:-webkit-box;

    outline:1px solid #ccc;
}
#test_2>p{
    -webkit-box-flex:1;

    margin:10px;
    border-right:1px solid #ccc;
}

/* 左右1份中间3份 */
#test_3{
    display:-webkit-box;

    outline:1px solid #ccc;
}
#test_3>p{
    -webkit-box-flex:1;
    
    width:100px;

    margin:10px;
    border-right:1px solid #ccc;
}
#test_3>p:first-child+p{
    -webkit-box-flex:3;
}

/* 第一个固定，其他自适应 */
#test_4{
    display:-webkit-box;

    outline:1px solid #ccc;
}
#test_4>p{
    -webkit-box-flex:1;
    
    margin:10px;
    border-right:1px solid #ccc;
}
#test_4>p:first-child{
    -webkit-box-flex:0;

    width:100px;
}

/* box-orient:vertical; */
#test_5{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    
    width:500px;
    outline:1px solid #ccc;
}
#test_5>p{
    -webkit-box-flex:1;

    margin:10px;
    border-right:1px solid #ccc;
}

/* box-orient:horizontal;水平 */
#test_6{
    display:-webkit-box;
    -webkit-box-orient:horizontal;
    
    width:500px;
    outline:1px solid #ccc;
}
#test_6>p{
    -webkit-box-flex:1;

    margin:10px;
    border-right:1px solid #ccc;
}

/* box-direction:reverse;垂直 */
#test_7{
    display:-webkit-box;
    -webkit-box-direction:reverse;
    
    width:500px;
    outline:1px solid #ccc;
}
#test_7>p{
    -webkit-box-flex:1;

    margin:10px;
    border-right:1px solid #ccc;
}

/* box-ordinal-group:number; */
#test_8{
    display:-webkit-box;
    
    width:500px;
    outline:1px solid #ccc;
}
#test_8>p{
    -webkit-box-flex:1;

    margin:10px;
    border-right:1px solid #ccc;
}
#test_8>p:first-child{
    -webkit-box-ordinal-group:2;
}
#test_8>p:first-child+p{
    -webkit-box-ordinal-group:1;
}
#test_8>p:last-child{
    -webkit-box-ordinal-group:3;
}

/* 使用box-align需要配合box-orient使用 */

/* orient-horizontal -- align-end */
#test_9{
    display:-webkit-box;
    -webkit-box-orient:horizontal;
    -webkit-box-align:end;
    
    height:100px;
    outline:1px solid #ccc;
}
#test_9>p{
    -webkit-box-flex:1;
    
    margin:10px;
    border-right:1px solid #ccc;
}

/* orient-horizontal -- align-center */
#test_10{
    display:-webkit-box;
    -webkit-box-orient:horizontal;
    -webkit-box-align:center;
    
    height:100px;
    outline:1px solid #ccc;
}
#test_10>p{
    -webkit-box-flex:1;
    
    margin:10px;
    border-right:1px solid #ccc;
}

/* orient-vertical -- align-center */
#test_11{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-box-align:end;
    
    height:100px;
    outline:1px solid #ccc;
}
#test_11>p{
    -webkit-box-flex:1;
    
    margin:10px;
    border-right:1px solid #ccc;
}

/* orient-vertical -- align-center */
#test_12{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-box-align:center;
    
    height:100px;
    outline:1px solid #ccc;
}
#test_12>p{
    -webkit-box-flex:1;
    
    margin:10px;
    border-right:1px solid #ccc;
}

/* 水平垂直居中 */
#test_13{
    display:-webkit-box;
    -webkit-box-orient:horizontal;
    -webkit-box-align:center;
    
    height:100px;
    outline:1px solid #ccc;
}
#test_13>div{
    -webkit-box-flex:1;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-box-align:center;
    
    margin:10px;
    /*margin:0 auto;*/
}

以上是关于被废了的display:box弹性盒模型的主要内容，如果未能解决你的问题，请参考以下文章

盒模型display:-webkit-box;(转)

多行省略问题