アダプティブとは何ですか?
アダプティブ: 同じページを異なるサイズのデバイスに自動的に適応させ、異なるデバイスに異なるバージョンのページを提供する問題を解決します。
レスポンシブ レイアウト: 異なるサイズのデバイスで同じ Web ページをレンダリングする問題を解決します。
2 列アダプティブ レイアウト
1. Html 構造内 -
左右の 2 つのボックス; 2. 左側は固定幅、右側は 100% 幅;
3. 左側のボックスに「position:absolute」を設定;
4. 右側のボックスにサブボックスを追加setpadding-left,attributes 値は左ボックスの幅です。
ページ：
コード：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LiuQing</title>
<style>
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.left {
position: absolute;
left: 0;
width: 300px;
background-color: red;
color: #fff;
height: 100%;
}
.right {
background-color: pink;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>
しかし、左側のボックスがドキュメントフローから外れており、レベルが右側のボックスよりも高いため、右側のボックスのテキストが見えないという問題が発生しました。
flex についてはまだ学習していませんが、事前にその書き方を公開しておきます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LiuQing</title>
<style>
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
display: flex;
}
.left {
width: 300px;
background-color: red;
color: #fff;
height: 100%;
}
.right {
flex: 1;
background-color: pink;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>
ページ効果:
聖杯レイアウト — 3 列レイアウト
1. Html 構造内 – 最初にメイン コンテンツ、次にサイドバー
2. 幅を設定: 両側の固定幅の中央のコンテンツ幅を 100% に設定します。
3. テーマ コンテンツと左右の間に float: left を追加します。
4. 左側にマージンを設定します -left: -100%; 5.
右側に margin-left:-self の幅を設定します;
6. 外側の大きなボックスのパディングで中央のコンテンツを公開します: 0 右側の幅Side 0 左側の幅;
7. 位置を設定: 左側と右側それぞれに対して相対的; set left:- 左側の幅; 左側を復元します。 set right:- 右側の幅; 7.右側を元に戻す
主にフローティング属性とパディング属性によって実現されます。上記の方法でも実現できますが、複雑すぎるためここでは実装しません。ハハハハハハ... flex の実装を見てみましょう。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LiuQing</title>
<style>
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
display: flex;
}
.left {
width: 300px;
background-color: red;
color: #fff;
height: 100%;
}
.center {
flex: 1;
background-color: pink;
color: #fff;
height: 100%;
}
.right {
width: 300px;
height: 100%;
background-color: blue;
color: #fff;
}
</style>
</head>
<body>
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</body>
</html>
ダブルフライングウイングレイアウト - 3列レイアウト
1. Html 構造内 - 最初にメイン コンテンツ、次にサイド;
2. 両側の固定幅の中央コンテンツ幅に width:100% を設定;
3. テーマ コンテンツと左側との間に float:left を追加します。それぞれ右側のサイドバー;
4. 左側の margin-left: -100% を設定します; 左側を一番左に引っ張ります
5. 右側に margin-left:-self width を設定します; 右側を一番右に引っ張ります
6.メイン コンテンツのサブボックスに margin: 0 を設定し、サイド幅 0 左幅を設定し、中央のコンテンツを露出します。
聖杯レイアウトとほぼ同じですが、やはりフレックスを推奨します。
等高線レイアウト
1. 内側と外側の間隔をオフセットし、親要素に overflow:hidden を設定します。各列にはパディングによって背景色を拡張する必要があること
に注意してください。padding -bottom: 1000px; 各列は、パディングを使用してmargin-bottom: -1000px; each を拡張します。列はマージンによってオフセットされます 親ボックスのホーム overflow:hidden;長所: シンプルな構造、すべてのブラウザと互換性があります短所: 疑似輪郭、マージン、およびパディングの値を合理的に制御する必要があります
2. コンテンツの特性を利用して、親要素を展開し、各列に対応するコンテナを追加し、相互にネストし、毎日各コンテナに背景色を追加します。3 つのネストされた div が背景を担当し、3 つの列が役割を果たします
。 div ボックスの一番内側に配置されます;
相対的な配置によって 3 つの列の背景の位置を割り当てます;
マージンの負の値によってコンテンツを対応する背景の位置に移動します;
オーバーフローして親要素を非表示にします;
利点欠点: 優れたスケーラビリティ、自己適応、複雑な構造のネスト
<div class="box"> overflow:hidden超出隐藏
<div class="wrap1">
<div class="wrap2"> 置背景 position:ralative left:200px 使背景显示出来
<div class="wrap3"> 设置背景 设置背景 position:ralative left:500px 使背景显示出来
<div class="left">左边</div> 设置宽度 左浮动 200px margin-left=-700px
<div class="conter">中间</div>设置宽度 左浮动 500px margin-left=-500px
<div class="right">右边</div>设置宽度 左浮动 300px
</div>
</div>
</div>
</div>
全てコンテンツの高さなので高さは統一します
背景はwrap1、wrap2、wrap3にあります 背景色の幅を実現するために相対位置を使用し、コンテンツと一致させるためにマイナスのマージン値を使用します背景。