【CSS3ボックスモデル表示：ボックスの応用】

CSS3の新しい属性

」の表示「:box;」と「box-flex: value」は、CSS3 で新しく追加されたボックスモデル属性であり、その外観により、N-multi 構造と 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ボックスモデル表示：ボックス適用の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。