ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS は 3 列のアダプティブ レイアウトを実装します
CSS は 3 列のアダプティブ レイアウトを実装します
- Guanhui転載
- 2020-07-20 12:53:172763ブラウズ
いわゆる 3 列アダプティブ レイアウトとは、両側の固定幅と中央のアダプティブ ブロック幅を指します。この質問は、今年の NetEase 社内プッシュ フロントエンド エンジニアの面接でも聞かれました。ここでは主に 2 つのカテゴリに分けます。1 つは従来の位置の実装に基づいており、もう 1 つは CSS3 の新機能であるフレキシブル ボックス モデル レイアウトの実装に基づいています。
1. 位置やマージンなどの従来の属性に基づくレイアウト
ここにも 3 つの方法があります。すなわち、絶対配置方法、Holy Grail です。レイアウト、セルフフローティング方式。
1).絶対配置方法
絶対配置方法の原則は、絶対配置によりドキュメントから分離されるため、左側と右側で絶対配置を使用することです。フロー、その背後の中央は自然にそれらにフローし、次に margin 属性を使用して左右の要素の幅を残し、中央の要素を画面の幅に適応させることができます。
コードは次のとおりです:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>layout_box</title> <link rel="stylesheet" type="text/css" href="../css/layout_box.css"> </head> <body> <h3>实现三列宽度自适应布局</h3> <p id = "left">我是左边</p> <p id = "right">我是右边</p> <p id = "center">我是中间</p> </body> </html>
css コード:
html,body{ margin: 0px;width: 100%; }
h3{height: 100px;margin:20px 0 0;}
#left,#right{width: 200px;height: 200px; background-color: #ffe6b8;position: absolute;top:120px;}
#left{left:0px;}
#right{right: 0px;}
#center{margin:2px 210px ;background-color: #eee;height: 200px; }このレイアウト方法の利点は、3 つの ps の順序を任意に変更できることです。欠点は、絶対配置のため、ページ上に他のコンテンツがある場合、top の値を慎重に扱う必要があることです。上記の例でタイトルを追加するのと同じように、CSS スタイルを初期化するのが最善です。スタイルがが初期化されていない場合、両側と中央の値が揃いません。また、ブラウザウィンドウが縮小するため、200pxより小さい場合は圧縮が発生します。
結果は図の通りで、中央の列の幅が画面サイズに合わせて伸縮しているのがわかります。
2). セルフフローティング メソッドを使用する
セルフフローティング メソッドの原理は、左と右にそれぞれ float:left と float:right を使用することです。 . Float は左右を左右にします 要素はドキュメントフローの外にあり、中央の要素は通常は通常のドキュメントフロー内にあります。マージンを使用して左右のマージンを指定して配置します。
HTML コード:
<h3>使用自身浮动法定位</h3> <p id = "left_self">我是左边</p> <p id = "right_self">我是右边</p> <p id = "center_self">我是中间</p>
css コード:
#left_self,#right_self{ width: 200px;height: 200px; background-color: #ffe6b8 }
#left_self {float: left;}
#right_self{float: right;}
#center_self{margin: 0 210px;height: 200px; background-color: #a0b3d6}このレイアウト方法の利点は、外界の影響を受けにくいことですが、欠点は、順序が3 つの要素のうち、必ず中央に配置する必要があります。最後は絶対配置とは異なります。中央は文書の流れの位置を占めるため、最後に配置する必要があります。左右の要素の位置は関係ありません。ブラウザ ウィンドウが小さい場合、右側の要素は次の行に移動します。
3). 聖杯レイアウト
聖杯レイアウトの原則はネガティブマージン法です。 Holy Grail レイアウトを使用するには、まず中心要素の外側に p を含める必要があります。p を含めるには、BFC を形成するように float 属性を設定し、幅を設定する必要があります。この幅は、マージンの負の値と一致する必要があります。左側のブロックの具体的な原理については、こちらを参照してください。聖杯のレイアウトについては、こちらで詳しく説明されています。
実装コード:
<h3>使用margin负值法进行布局</h3> <p id = "wrap"> <p id = "center"></p> </p> <p id = "left_margin"></p> <p id = "right_margin"></p>
CSS コード:
#wrap{ width: 100%;height: 100px; background-color: #fff;float: left;}
#wrap #center{ margin:0 210px; height: 100px;background-color: #ffe6b8; }
#left_margin,#right_margin{ float: left;width: 200px;height: 100px;background-color: darkorange }
#left_margin {margin-left: -100%; background-color: lightpink}
#right_margin{margin-left: -200px;} この方法は Web サイトのレイアウトで非常に一般的であり、面接の一般的なテスト ポイントでもあります。列は相互に関連しており、特定の抵抗を持ちます。なお、レイアウトの中央部分は必ず前に配置され、左右の順序は問われません。左高速マージンの場合、負の値はラップの幅と等しくなければなりません。
Web ページ幅 3 列のアダプティブ レイアウトを実装する 3 つの方法を下の図に示します。
2、css3 新機能
p のレイヤーを周囲にラップし、表示するように設定します: flex ; flex: 1 を中央に設定します; ただし、ボックス モデルはデフォルトで互いに近く、マージンを使用してマージンを制御できます。
コード:
<p id = "box"> <p id = "left_box"></p> <p id = "center_box"></p> <p id = "right_box"></p> </p>
css スタイル:
#box{width:100%;display: flex; height: 100px;margin: 10px;}
#left_box,#right_box{width: 200px;height: 100px; margin: 10px; background-color: lightpink}
#center_box{ flex:1; height: 100px;margin: 10px; background-color: lightgreen}注: center は中央に配置する必要があります。
レンダリングは次のとおりです:
#CSS レイアウトには他にも多くの機能があります。次のステップでは、フローティングを明確に調べてから、位置および表示属性。
推奨チュートリアル: 「CSS チュートリアル 」
以上がCSS は 3 列のアダプティブ レイアウトを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。