首頁 > web前端 > css教學 > 主體

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

黄舟
發布: 2017-09-30 09:39:06
原創
2362 人瀏覽過


【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;
}
登入後複製
##########

以上是CSS3盒子模型display:box的應用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!