css聖杯レイアウトと翼レイアウト編
6520 ワード
https://blog.csdn.net/wangchengiii/article/details/77926868
タイトルの要求:以下のDOM構造に対して、CSSを編纂して、3欄の水平配置を実現して、その中でleft、rightはそれぞれ左右の両側に位置して、leftの幅は200 pxで、rightの幅は300 pxで、mainは中間に位置して、幅は適応します.要求:追加のDOMノードを追加できますが、既存のノードの順序は変更できません.main left right聖杯レイアウトとダブルフライ翼レイアウトは、3列の左右の欄固定中間欄の枠に適応したページレイアウト(聖杯が主体で耳が2つあることを想像してください;鳥は体に翼を1対加えています)、聖杯レイアウトはKevin Cornellが2006年に提案したレイアウトモデルの概念です.国内で最も早くタオバオUEDのエンジニア(伝説は玉伯)によって改善され、伝播され、中国でも双飛翼の配置と呼ばれ、その配置要求はいくつかある:3列の配置、中間幅の適応、両側の定幅;中間バーは、ブラウザでレンダリングを優先的に表示します.任意の列の高さが最も高いことを許可します.私たちのテーマの要求は聖杯のレイアウトと翼のレイアウトの要求と同じであることがわかります.具体的な実現方法を見てみましょう.方法1:聖杯レイアウト1.基本スタイルを高さが一致するようにleft main rightにmin-height:130 pxを追加します.2.聖杯レイアウトは相対レイアウトで、まず親要素containerの位置を設定する:実現効果は左右にそれぞれ200 pxと300 pxの領域を空けて、効果は図のように:3.本体部分の3つのサブ要素を左に設定すると、次のような状況になります.どうすればいいですか.焦らないでゆっくりしてください.main幅をwidth:100%に設定し、単独で1行を満たす.leftとrightの負の外側距離を設定するには、left、main、rightを順番に並べますが、上図のleftとrightは次の行にあります.負のmargin-left:負のmargin-leftを使用すると、要素がドキュメントに沿って左に移動し、負の数値が大きいと前の行に移動します.負のmarginの応用についても博大で奥深く、ここでは詳しく紹介できないに違いない.left部分のmargin-leftを-100%に設定すると、leftは行全体の幅を左に移動します.leftの左側は親要素の枠線なので、leftは前の行の先頭まで左に移動し続け、main部分を上書きします(下図をよく見ると、mainの中の字「main」がなくなり、leftに隠されているため)、leftが上に移動するとrightは前の行の先頭位置にあります.このときright部分margin-leftを負の幅に設定すると、rightは前の行の末尾に左に移動します.6.次にleftとrightをそれぞれこの2つのセリフに移動すればいい.相対位置決めを使用してleftセクションとrightセクションを移動できます.これで,3列の中間適応レイアウト,すなわち伝説の聖杯レイアウトを完成した.完全なコードは次のとおりです.
方法2:ダブルフライ翼レイアウト聖杯レイアウトとダブルフライ翼レイアウトで問題を解決する案は前半で同じで、つまり3つの欄がすべてfloatで浮動するが、左右の2つの欄に負のmarginを加えて中間欄divと並べて3つの欄レイアウトを形成する.違いは、「中間欄divコンテンツが隠されていない」という問題を解決する考え方が異なることです.彼のHTML構造は変化しました:直接コードを貼って、読者は自分で彼らの異同を理解することができます:codepenコードhttps://codepen.io/guokangxun/pen/GBqGgL
ダブルフライ翼レイアウトは聖杯レイアウトより1つ多くdivを使用しており、大体4つのcss属性を少なくする(聖杯レイアウトcontainerのpadding-leftとpadding-rightの2つの属性に、左右の2つのdiv用相対レイアウトposition:relativeと対応するrightとleftの計4つの属性を加え、両翼レイアウトサブdivにはmargin-leftとmargin-rightの計2つの属性があり、聖杯レイアウトの考え方よりも直接的で簡潔である.簡単に言えば、両翼レイアウトは聖杯レイアウトより1つのdivが多く作成されているが、相対レイアウトは不要であると考えられる.聖杯レイアウトと翼レイアウトの詳細については、参照:聖杯レイアウトと翼レイアウトの役割と区別CSSレイアウト–聖杯レイアウト&翼レイアウト方法3:FlexレイアウトFlexはFlexible Boxの略で、「弾性レイアウト」を意味し、ボックスモデルに最大の柔軟性を提供します.いずれのコンテナもFlexレイアウトとして指定できるため、Flexレイアウトは将来のレイアウトの第一選択となります.Flexレイアウトのいくつかの具体的な文法実装については、チェン一峰大神のFlexレイアウトチュートリアルを参照してください:文法編;JailBreakはFlexレイアウトのためにDemoを作成したので、参考にすることができます.Flexレイアウトの具体的な例を理解するには、チェン一峰大神のFlexレイアウトチュートリアルを参照してください:インスタンス編;Flexレイアウトインスタンスを直接表示するには、codepenに直接Demoを表示することができます.次に、この例の具体的な実装について説明する:1.まずcontainerブロックをFlexコンテナに設定すると、container傘下のmain、left、rightの3つのサブ要素が自動的にコンテナメンバーになり、Flexプロジェクト(flex item)、略称「プロジェクト」と呼ばれます. 2.この3つのプロジェクトに対して初期設定プロジェクトを行い、内容に基づいて弾力性のあるレイアウトを行う:3.orderプロパティ設定配列順では、3つのアイテムの並べ替え方法が異なります.mainが1番目に並んでいます.mainを真ん中にするには、leftを左にするには、Flexコンテナの下にあるアイテムのプロパティ「order」プロパティで設定します.orderプロパティの場合、アイテムの配列順序を定義します.小さいほど前に、デフォルトは0です.４.プロジェクト属性flex-growでmainの拡大割合を設定し、空きスペースをmainで埋め、3つのプロジェクトが1行未満になるようにします.デフォルトは0です.つまり、残りのスペースは処理されません.5.プロジェクト属性flex-basisでleftとrightの固定幅を設定することで、私たちの目標を実現しました.簡単ではありませんか.これがflexレイアウトの魅力です..6.最後に、完全なコードは以下の通りです.
方法4:絶対位置決めレイアウト絶対位置決め要素の位置をドキュメントフローとは無関係にするため、空間を占有しない.この点は相対位置決めとは異なり,相対位置決めは実際には通常ストリームにおける要素の位置に対する通常ストリーム位置決めモデルの一部と見なされる.ヒント:絶対的に配置されたボックスは、ドキュメントフローに関係なく、ページ上の他の要素を上書きできます.これらのボックスのスタック順序は、z-indexプロパティを設定することによって制御できます.本題に戻ります:絶対位置決めは、万金油のような存在に相当し、どんなレイアウトでも絶対位置決めを使って実現できるので、具体的な実現過程については後述しません.次は直接コードをつけて、分からないcall私です.
実現結果はもちろん同じです!(完)
転載先:https://www.cnblogs.com/kevoin/p/9327877.html
タイトルの要求:以下のDOM構造に対して、CSSを編纂して、3欄の水平配置を実現して、その中でleft、rightはそれぞれ左右の両側に位置して、leftの幅は200 pxで、rightの幅は300 pxで、mainは中間に位置して、幅は適応します.要求:追加のDOMノードを追加できますが、既存のノードの順序は変更できません.main left right聖杯レイアウトとダブルフライ翼レイアウトは、3列の左右の欄固定中間欄の枠に適応したページレイアウト(聖杯が主体で耳が2つあることを想像してください;鳥は体に翼を1対加えています)、聖杯レイアウトはKevin Cornellが2006年に提案したレイアウトモデルの概念です.国内で最も早くタオバオUEDのエンジニア(伝説は玉伯)によって改善され、伝播され、中国でも双飛翼の配置と呼ばれ、その配置要求はいくつかある:3列の配置、中間幅の適応、両側の定幅;中間バーは、ブラウザでレンダリングを優先的に表示します.任意の列の高さが最も高いことを許可します.私たちのテーマの要求は聖杯のレイアウトと翼のレイアウトの要求と同じであることがわかります.具体的な実現方法を見てみましょう.方法1:聖杯レイアウト1.基本スタイルを高さが一致するようにleft main rightにmin-height:130 pxを追加します.2.聖杯レイアウトは相対レイアウトで、まず親要素containerの位置を設定する:実現効果は左右にそれぞれ200 pxと300 pxの領域を空けて、効果は図のように:3.本体部分の3つのサブ要素を左に設定すると、次のような状況になります.どうすればいいですか.焦らないでゆっくりしてください.main幅をwidth:100%に設定し、単独で1行を満たす.leftとrightの負の外側距離を設定するには、left、main、rightを順番に並べますが、上図のleftとrightは次の行にあります.負のmargin-left:負のmargin-leftを使用すると、要素がドキュメントに沿って左に移動し、負の数値が大きいと前の行に移動します.負のmarginの応用についても博大で奥深く、ここでは詳しく紹介できないに違いない.left部分のmargin-leftを-100%に設定すると、leftは行全体の幅を左に移動します.leftの左側は親要素の枠線なので、leftは前の行の先頭まで左に移動し続け、main部分を上書きします(下図をよく見ると、mainの中の字「main」がなくなり、leftに隠されているため)、leftが上に移動するとrightは前の行の先頭位置にあります.このときright部分margin-leftを負の幅に設定すると、rightは前の行の末尾に左に移動します.6.次にleftとrightをそれぞれこの2つのセリフに移動すればいい.相対位置決めを使用してleftセクションとrightセクションを移動できます.これで,3列の中間適応レイアウト,すなわち伝説の聖杯レイアウトを完成した.完全なコードは次のとおりです.
main
left
right
方法2:ダブルフライ翼レイアウト聖杯レイアウトとダブルフライ翼レイアウトで問題を解決する案は前半で同じで、つまり3つの欄がすべてfloatで浮動するが、左右の2つの欄に負のmarginを加えて中間欄divと並べて3つの欄レイアウトを形成する.違いは、「中間欄divコンテンツが隠されていない」という問題を解決する考え方が異なることです.彼のHTML構造は変化しました:直接コードを貼って、読者は自分で彼らの異同を理解することができます:codepenコードhttps://codepen.io/guokangxun/pen/GBqGgL
main
left
right
ダブルフライ翼レイアウトは聖杯レイアウトより1つ多くdivを使用しており、大体4つのcss属性を少なくする(聖杯レイアウトcontainerのpadding-leftとpadding-rightの2つの属性に、左右の2つのdiv用相対レイアウトposition:relativeと対応するrightとleftの計4つの属性を加え、両翼レイアウトサブdivにはmargin-leftとmargin-rightの計2つの属性があり、聖杯レイアウトの考え方よりも直接的で簡潔である.簡単に言えば、両翼レイアウトは聖杯レイアウトより1つのdivが多く作成されているが、相対レイアウトは不要であると考えられる.聖杯レイアウトと翼レイアウトの詳細については、参照:聖杯レイアウトと翼レイアウトの役割と区別CSSレイアウト–聖杯レイアウト&翼レイアウト方法3:FlexレイアウトFlexはFlexible Boxの略で、「弾性レイアウト」を意味し、ボックスモデルに最大の柔軟性を提供します.いずれのコンテナもFlexレイアウトとして指定できるため、Flexレイアウトは将来のレイアウトの第一選択となります.Flexレイアウトのいくつかの具体的な文法実装については、チェン一峰大神のFlexレイアウトチュートリアルを参照してください:文法編;JailBreakはFlexレイアウトのためにDemoを作成したので、参考にすることができます.Flexレイアウトの具体的な例を理解するには、チェン一峰大神のFlexレイアウトチュートリアルを参照してください:インスタンス編;Flexレイアウトインスタンスを直接表示するには、codepenに直接Demoを表示することができます.次に、この例の具体的な実装について説明する:1.まずcontainerブロックをFlexコンテナに設定すると、container傘下のmain、left、rightの3つのサブ要素が自動的にコンテナメンバーになり、Flexプロジェクト(flex item)、略称「プロジェクト」と呼ばれます. 2.この3つのプロジェクトに対して初期設定プロジェクトを行い、内容に基づいて弾力性のあるレイアウトを行う:3.orderプロパティ設定配列順では、3つのアイテムの並べ替え方法が異なります.mainが1番目に並んでいます.mainを真ん中にするには、leftを左にするには、Flexコンテナの下にあるアイテムのプロパティ「order」プロパティで設定します.orderプロパティの場合、アイテムの配列順序を定義します.小さいほど前に、デフォルトは0です.４.プロジェクト属性flex-growでmainの拡大割合を設定し、空きスペースをmainで埋め、3つのプロジェクトが1行未満になるようにします.デフォルトは0です.つまり、残りのスペースは処理されません.5.プロジェクト属性flex-basisでleftとrightの固定幅を設定することで、私たちの目標を実現しました.簡単ではありませんか.これがflexレイアウトの魅力です..6.最後に、完全なコードは以下の通りです.
flexbox
main
left
right
方法4:絶対位置決めレイアウト絶対位置決め要素の位置をドキュメントフローとは無関係にするため、空間を占有しない.この点は相対位置決めとは異なり,相対位置決めは実際には通常ストリームにおける要素の位置に対する通常ストリーム位置決めモデルの一部と見なされる.ヒント:絶対的に配置されたボックスは、ドキュメントフローに関係なく、ページ上の他の要素を上書きできます.これらのボックスのスタック順序は、z-indexプロパティを設定することによって制御できます.本題に戻ります:絶対位置決めは、万金油のような存在に相当し、どんなレイアウトでも絶対位置決めを使って実現できるので、具体的な実現過程については後述しません.次は直接コードをつけて、分からないcall私です.
position
main
left
right
実現結果はもちろん同じです!(完)
転載先:https://www.cnblogs.com/kevoin/p/9327877.html