三欄レイアウト(左右幅固定,中間適応)の実現方式とその延長問題
グローバルCSS設定
浮動の3つの欄の配置はまず左右の箱を書いてから中間の箱のhtml構造を書いて、左右の2つの箱の幅の高さと浮動を設置しなければなりません
真ん中の箱の高さが左右を超えると、親DIVの幅がいっぱいになり、内容が左に流れるのは、フローティングの原理と関係があります.ブロック級の要素なので、左右の箱を超えないと、ブロックがブロックされ、超えるとブロックされず、自然と残りの場所が埋め込まれます.元の幅と一致するには、marginを加えます.
利点:比較的簡単で互換性も良い.フローティングをクリアすれば問題ありません.
欠点:フローティングレイアウトには限界があり、フローティング要素はドキュメントフローから離れているため、フローティングをクリアするには、この処理が悪いと、高度な陥没など多くの問題をもたらし、中間htmlが最後に書かれているため、重要な内容を優先的にロードできません.
絶対位置決め三欄レイアウト親箱を相対位置決めし、左右の箱を絶対位置決めし、両側に密着し、中間箱を両側箱に対してleftとrightを設定し、同時に高さを設定する
長所:とても速くて、設置はとても便利で、その上問題をも出しにくくて、あなたはすぐにこのような配置の方式を考え出すことができて、その上JSと一緒に設置を使うことができます
欠点:絶対的な位置決めはドキュメントフローから離れており、次のすべてのサブ要素がドキュメントフローから離れていることを意味し、この方法の有効性と使用性が比較的悪い.
flex三段レイアウト
利点:felxboxレイアウトはcss 3に新しく出たもので、上記の2つの方法の不足を解決するために現れたもので、比較的完璧なものです.現在、モバイル側のレイアウトもflexboxを使用しています.
欠点:IE 9と以下のブラウザは互換性がありません.
表レイアウト表の親コンテナの幅を設定するには
長所:表のレイアウトは歴史の上で多くの人に捨てられて、表のレイアウトが面倒で、操作が煩雑だと言って、実はこれは1種の誤解で、多くのシーンの中で、表のレイアウトはやはりとても適用して、例えばこの3欄のレイアウト、表のレイアウトで簡単に書きました.また、テーブルレイアウトの互換性がよく、flexレイアウトが互換性がない場合は、テーブルレイアウトを試してみることができます.
欠点:表のレイアウトにも欠陥があり、そのうちの1つのセルの高さが超えると、両側のセルも一緒に高くなりますが、この効果は私たちが望んでいない場合があります.
グリッドレイアウト
利点:メッシュレイアウトを作成する最も強力で簡単なツールです.表のように、グリッドレイアウトはWebデザイナーが要素に基づいて列または行に整列させることができますが、彼は表とは異なり、グリッドレイアウトにはコンテンツ構造がなく、様々なレイアウトが表と同じではありません.たとえば、1つのグリッドレイアウトのサブ要素は、独自の位置を特定できます.これにより、要素の位置を重ねたり類似したりすることができます.
短所:互換性が悪い.IE 10+でサポートされており、一部の属性のみサポートされています.
聖杯レイアウトメインパネルの設定幅は100%で、メインパネルと2つのサイドバーはすべてフローティングを設定して、よく左フローティングで、この2つのサイドバーはメインパネルに押し下げられて、負のマージンを設定することによってフローティングのサイドバーを引き上げて、左側の欄の負のマージンは100%で、ちょうどウィンドウの幅なので、メインパネルの下の左からメインパネルに位置する左に走って、右側の欄はこの時メインパネルの下の左にフローティングして、負の余白を負に設定した自己幅は、メインパネルの右側にちょうど浮動します. サイドバーがメインパネルの内容を遮らないように、外層に左右のpadding値を左右のサイドバーの幅として設定し、サイドバーにスペースを空けると、メインパネルの幅が小さくなります.サイドバーの負の余白はメインパネルに対して相対的であるため、2つのサイドバーは私たちの理想的なように左右に止まるのではなく、縮小したメインパネルとともに中間に寄せ合い、このとき相対レイアウトを使用して、2つのサイドバーを対応する位置に調整します. dom構造が変化しないことに注意し、浮動を除去し、高さの崩壊を避けることに注意する .
利点:主要部分を優先的にレンダリングでき、互換性がよく、構造が簡単です.
欠点:には最小幅があり、ページが最小幅より小さいとレイアウトが乱れます. なのでbodyにmin-widthを設定したほうがいいです.このmin-widthは試したものではないに違いないが、どうやって計算するのだろうか.つまりleft-width*2+right-widthですが、なぜかというと、簡単に言えば「相対的な位置が設定されているので、leftの元の位置とrightの位置が重なると、フローティングのせいで1行が置けないと改行する」ということです. 「聖杯レイアウト」は幅が小さすぎてレイアウトが混乱する欠陥があるため、アリタオバオは「双飛翼レイアウト」 を提案した.
両翼の配置思想:
利点:聖杯レイアウトの問題を解決し、汎用性が高く、様々な幅の変化をサポートする
欠点:ただし、「ダブルフラップレイアウト」はDOMツリーのレベルを増加させるため、ブラウザレンダリングエンジンがレイアウトツリーを構築する際の計算消費量も増加します.
ダブルフライ翼レイアウトは聖杯レイアウトよりもdivを1つ多く作成しましたが、相対的にレイアウトする必要はありません.
その他のレイアウト方法
互換性も比較的強い
延長1:
1、各方法の長所と短所は、上に2、高さが既知でない場合、中間の内容が開いている場合、前の方法はどれがまだ使用できますか? marginのフローティング三欄レイアウト を追加 flexレイアウト テーブルレイアウト 聖杯レイアウト 両翼レイアウト には、さらに別の方法でレイアウト がある.
3、各方法の互換性はどうですか.
延長2:ページレイアウトの変形3段レイアウト:左右幅固定、中間適応 上下高さ固定、中間適応 2つのバーのレイアウト:左幅固定、右適応 右幅固定、左適応 上高さ固定、下適応 下高さ固定、上適応
html *{
padding: 0;
margin: 0;
}
section {
margin: 20px 0;
}
article > div {
min-height: 100px;
}
浮動の3つの欄の配置はまず左右の箱を書いてから中間の箱のhtml構造を書いて、左右の2つの箱の幅の高さと浮動を設置しなければなりません
<section class="layout float">
<style>
.layout.float .left-middle-right {
overflow: hidden; /* */
}
.layout.float .left-middle-right .left {
width: 300px;
float: left;
background: red;
}
.layout.float .left-middle-right .right {
width: 300px;
float: right;
background: blue;
}
.layout.float .left-middle-right .middle {
background: yellow;
}
style>
<article class="left-middle-right">
<div class="left">leftdiv>
<div class="right">rightdiv>
<div class="middle">middlediv>
article>
section>
真ん中の箱の高さが左右を超えると、親DIVの幅がいっぱいになり、内容が左に流れるのは、フローティングの原理と関係があります.ブロック級の要素なので、左右の箱を超えないと、ブロックがブロックされ、超えるとブロックされず、自然と残りの場所が埋め込まれます.元の幅と一致するには、marginを加えます.
<section class="layout float">
<style>
.layout.float .left-middle-right {
overflow: hidden; /* */
}
.layout.float .left-middle-right .left {
width: 300px;
float: left;
background: red;
}
.layout.float .left-middle-right .right {
width: 300px;
float: right;
background: blue;
}
.layout.float .left-middle-right .middle {
background: yellow;
margin-left: 300px;
margin-right: 300px;
}
style>
<article class="left-middle-right">
<div class="left">leftdiv>
<div class="right">rightdiv>
<div class="middle">middlediv>
article>
section>
利点:比較的簡単で互換性も良い.フローティングをクリアすれば問題ありません.
欠点:フローティングレイアウトには限界があり、フローティング要素はドキュメントフローから離れているため、フローティングをクリアするには、この処理が悪いと、高度な陥没など多くの問題をもたらし、中間htmlが最後に書かれているため、重要な内容を優先的にロードできません.
絶対位置決め三欄レイアウト親箱を相対位置決めし、左右の箱を絶対位置決めし、両側に密着し、中間箱を両側箱に対してleftとrightを設定し、同時に高さを設定する
<section class="layout absolute">
<style>
.layout.absolute .left-middle-right {
position: relative;
}
.layout.absolute .left-middle-right .left {
position: absolute;
width: 300px;
left: 0;
background: red;
}
.layout.absolute .left-middle-right .right {
position: absolute;
width: 300px;
right: 0;
background: blue;
}
.layout.absolute .left-middle-right .middle {
position: absolute;
left: 300px;
right: 300px;
background: yellow;
}
style>
<article class="left-middle-right">
<div class="left">leftdiv>
<div class="right">rightdiv>
<div class="middle">middlediv>
article>
section>
長所:とても速くて、設置はとても便利で、その上問題をも出しにくくて、あなたはすぐにこのような配置の方式を考え出すことができて、その上JSと一緒に設置を使うことができます
欠点:絶対的な位置決めはドキュメントフローから離れており、次のすべてのサブ要素がドキュメントフローから離れていることを意味し、この方法の有効性と使用性が比較的悪い.
flex三段レイアウト
<section class="layout flex">
<style>
.layout.flex .left-middle-right {
display: flex;
margin-top: 140px;
}
.layout.flex .left-middle-right .left {
width: 300px;
background: red;
}
.layout.flex .left-middle-right .right {
width: 300px;
background: blue;
}
.layout.flex .left-middle-right .middle {
flex: 1;
background: yellow;
}
style>
<article class="left-middle-right">
<div class="left">leftdiv>
<div class="middle">middlediv>
<div class="right">rightdiv>
article>
section>
利点:felxboxレイアウトはcss 3に新しく出たもので、上記の2つの方法の不足を解決するために現れたもので、比較的完璧なものです.現在、モバイル側のレイアウトもflexboxを使用しています.
欠点:IE 9と以下のブラウザは互換性がありません.
表レイアウト表の親コンテナの幅を設定するには
<section class="layout table">
<style>
.layout.table .left-middle-right {
width: 100%;
display: table;
height: 100px;
}
.layout.table .left-middle-right .left {
width: 300px;
background: red;
display: table-cell;
}
.layout.table .left-middle-right .right {
width: 300px;
background: blue;
display: table-cell;
}
.layout.table .left-middle-right .middle {
background: yellow;
display: table-cell;
}
style>
<article class="left-middle-right">
<div class="left">leftdiv>
<div class="middle">middlediv>
<div class="right">rightdiv>
article>
section>
長所:表のレイアウトは歴史の上で多くの人に捨てられて、表のレイアウトが面倒で、操作が煩雑だと言って、実はこれは1種の誤解で、多くのシーンの中で、表のレイアウトはやはりとても適用して、例えばこの3欄のレイアウト、表のレイアウトで簡単に書きました.また、テーブルレイアウトの互換性がよく、flexレイアウトが互換性がない場合は、テーブルレイアウトを試してみることができます.
欠点:表のレイアウトにも欠陥があり、そのうちの1つのセルの高さが超えると、両側のセルも一緒に高くなりますが、この効果は私たちが望んでいない場合があります.
グリッドレイアウト
<section class="layout grid">
<style>
.layout.grid .left-middle-right {
width: 100%;
display: grid;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.layout.grid .left-middle-right .left {
width: 300px;
background: red;
}
.layout.grid .left-middle-right .right {
width: 300px;
background: blue;
}
.layout.grid .left-middle-right .middle {
background: yellow;
}
style>
<article class="left-middle-right">
<div class="left">leftdiv>
<div class="middle">middlediv>
<div class="right">rightdiv>
article>
section>
利点:メッシュレイアウトを作成する最も強力で簡単なツールです.表のように、グリッドレイアウトはWebデザイナーが要素に基づいて列または行に整列させることができますが、彼は表とは異なり、グリッドレイアウトにはコンテンツ構造がなく、様々なレイアウトが表と同じではありません.たとえば、1つのグリッドレイアウトのサブ要素は、独自の位置を特定できます.これにより、要素の位置を重ねたり類似したりすることができます.
短所:互換性が悪い.IE 10+でサポートされており、一部の属性のみサポートされています.
聖杯レイアウト
<section class="layout shengbei">
<style>
.layout.shengbei .left-middle-right {
padding: 0 300px 0 300px;
}
.layout.shengbei .left-middle-right > div {
position: relative;
float: left;
}
.layout.shengbei .left-middle-right .left {
left: -300px;
background: red;
width: 300px;
margin-left: -100%;
}
.layout.shengbei .left-middle-right .right {
right: -300px;
width: 300px;
background: blue;
margin-left: -300px;
}
.layout.shengbei .left-middle-right .middle {
background: yellow;
width: 100%;
}
style>
<article class="left-middle-right">
<div class="middle">middlediv>
<div class="left">leftdiv>
<div class="right">rightdiv>
article>
section>
利点:主要部分を優先的にレンダリングでき、互換性がよく、構造が簡単です.
欠点:
両翼の配置思想:
<section class="layout feiyi">
<style>
.layout.feiyi .left-middle-right {
overflow: hidden;
}
.layout.feiyi .left-middle-right > div {
float: left;
}
.layout.feiyi .left-middle-right .left {
width: 300px;
background: red;
margin-left: -100%;
}
.layout.feiyi .left-middle-right .right {
width: 300px;
background: blue;
margin-left: -300px;
}
.layout.feiyi .left-middle-right .content {
width: 100%;
background: yellow;
}
.layout.feiyi .left-middle-right .middle {
margin: 0 300px;
}
style>
<article class="left-middle-right">
<div class="content">
<div class="middle">middlediv>
div>
<div class="left">leftdiv>
<div class="right">rightdiv>
article>
section>
利点:聖杯レイアウトの問題を解決し、汎用性が高く、様々な幅の変化をサポートする
欠点:ただし、「ダブルフラップレイアウト」はDOMツリーのレベルを増加させるため、ブラウザレンダリングエンジンがレイアウトツリーを構築する際の計算消費量も増加します.
ダブルフライ翼レイアウトは聖杯レイアウトよりもdivを1つ多く作成しましたが、相対的にレイアウトする必要はありません.
その他のレイアウト方法
<section class="layout new">
<style>
.layout.new .left-middle-right {
position: relative;
}
.layout.new .left-middle-right > div {
}
.layout.new .left-middle-right .left {
position: absolute;
top: 0;
width: 300px;
background: red;
left: 0;
}
.layout.new .left-middle-right .right {
position: absolute;
top: 0;
width: 300px;
background: blue;
right: 0;
}
.layout.new .left-middle-right .middle {
margin: 0 300px;
background: yellow;
}
style>
<article class="left-middle-right">
<div class="middle">middlediv>
<div class="left">leftdiv>
<div class="right">rightdiv>
article>
section>
互換性も比較的強い
延長1:
1、各方法の長所と短所は、上に2、高さが既知でない場合、中間の内容が開いている場合、前の方法はどれがまだ使用できますか?
3、各方法の互換性はどうですか.
延長2:ページレイアウトの変形3段レイアウト: