ホームページ > 記事 > ウェブフロントエンド > CSS3ボックスモデル表示：ボックス適用の詳細説明
CSS3ボックスモデル表示：ボックス適用の詳細説明
- 黄舟オリジナル
- 2017-09-30 09:39:062362ブラウズ
【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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。