CSS は 3 列のアダプティブレイアウトを実装します-CSSチュートリアル-php.cn

CSS は 3 列のアダプティブレイアウトを実装します

Guanhui

リリース： 2020-07-20 12:53:17

転載

2747 人が閲覧しました

CSS は 3 列のアダプティブレイアウトを実装します

いわゆる 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 は中央に配置する必要があります。

レンダリングは次のとおりです: