CSS3盒模型display:box的應用詳解

來源:互聯網
上載者:User


【CSS3盒模型display:box的應用】




CSS3新增屬性

“display:box;”和“box-flex:數值”是css3新添加的盒子模型屬性,它的出現可以解決我們通過N多結構、css實現的布局方式。

經典的一個布局應用就是布局的垂直等高、水平均分、按比例劃分。

box-flex屬性:主要讓子容器針對父容器的寬度按一定規則進行劃分。

啥都不說了,自己貼代碼看效果。

Html結構:

<body>                              <p>魔</p>        <p>術</p>        <p>師</p></body>

應用:水平布局

body {    /*預設水平布局*/    display: -webkit-box;    display: -moz-box;    display: box;    width: 500px;    height: 300px;    margin: 100px auto;}p:nth-child(1) {    -webkit-box-flex: 3;    -moz-box-flex: 3;    box-flex: 3;    background: orange;}p:nth-child(2) {    -webkit-box-flex: 1;    -moz-box-flex: 1;    box-flex: 1;    background: purple;}p:nth-child(3) {    /*-webkit-box-flex: 2;    -moz-box-flex: 2;    box-flex: 2;*/    width: 200px;/*可以寫定值*/    background: green;}


應用:垂直布局

body {    display: -webkit-box;    display: -moz-box;    display: box;    /*垂直布局*/    -webkit-box-orient:vertical;    -moz-box-orient:vertical;    box-orient:vertical;    width: 300px;    height: 500px;    margin: 50px auto;}p:nth-child(1) {    -webkit-box-flex: 3;    -moz-box-flex: 3;    box-flex: 3;    background: orange;}p:nth-child(2) {    -webkit-box-flex: 1;    -moz-box-flex: 1;    box-flex: 1;    background: purple;}p:nth-child(3) {    /*-webkit-box-flex: 2;    -moz-box-flex: 2;    box-flex: 2;*/    height: 200px;/*可以寫定值*/    background: green;}
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.