この記事は、CSS の二重飛行翼レイアウトと聖杯レイアウトについての簡単な説明を主に紹介しています。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。
Double-wing レイアウトと Holy Grail レイアウトは、どちらも両側に中央を固定したアダプティブ 3 列レイアウトを実現する方法です。最近、3 列レイアウトの実装方法についてのメモを整理していたので、引っ張ることにしました。これら 2 つの古典的なレイアウトを覚えておくための記事を作成します。
1. 聖杯レイアウト
フローティング、負のマージン、相対位置、追加タグなし
レンダリング
DOM構造:
rreeeスタイル:
りー左、中、右部分のスタイル変更処理
1. 真ん中の部分はブラウザの幅の変更に合わせて変更する必要があるので、ここでは*を左、中、右にフロートさせます。 、真ん中の部分が100%なので、左 レイヤーと右レイヤーが上に上がる位置がありません
<p class="header">Header</p> <p class="bd"> <p class="main">Main</p> <p class="left">Left</p> <p class="right">Right </p> </p> <p class="footer">Footer</p>
2 左レイヤーの余白を150減らしたところ、次のことが分かりました。左側のレイヤーが上に移動しました。これは、ウィンドウ用のスペースがなかったため、上に移動することしかできませんでした
rree3. 次に、2 番目のステップに従って、次のことがわかります。ウィンドウの幅を左端と同じ幅に移動するだけです
<style> body{padding:0;margin:0} .header,.footer{width:100%; background: #666;height:30px;clear:both;} .bd{ padding-left:150px; padding-right:190px; } .left{ background: #E79F6D; width:150px; float:left; margin-left:-100%; position: relative; left:-150px; } .main{ background: #D6D6D6; width:100%; float:left; } .right{ background: #77BBDD; width:190px; float:left; margin-left:-190px; position:relative; right:-190px; } </style>
4。左側と右側なので、外側のレイヤーにパディングを追加する必要がありました
5。ただし、追加後、左側と右側の列もインデントされたため、相対位置設定を使用しました。 、それぞれがそれ自体に対して相対的に移動して最終結果を取得します
.left{ background: #E79F6D; width:150px; float:left; } .main{ background: #D6D6D6; width:100%; float:left; } .right{ background: #77BBDD; width:190px; float:left; }
2. 追加のタグを追加しなくても、聖杯レイアウトはすでに完璧です、聖杯レイアウト相対配置を使用した後は、将来レイアウトに制限があり、幅の制御を変更する場所が多くなるでしょう。そこで、より簡潔で便利な他の方法はありますか?
淘宝網 UED の議論では、p を 1 つ追加すると、相対レイアウトの必要性がなくなり、フローティング マージンとネガティブ マージンのみが使用されます。これは、私たちがダブル フライング ウィング レイアウトと呼ぶものです。 DOM 構造: p がメインの内部層に追加されました
.left{ background: #E79F6D; width:150px; float:left; margin-left:-150px; }
スタイル:
左右の列の相対的な位置を削除しました
ラッピング層のパディングを削除し、マージンで置き換えました真ん中の列に新しいpがあります
3. 二重飛行翼レイアウトと聖杯レイアウトの違い聖杯レイアウトと二重飛行翼レイアウトの問題の解決策は、前半も同じです。つまり:
中央の列の幅を100%に設定します
- 3つの列はすべてfloatです
- 左右の列に負のマージンを追加し、並べて配置します中央の列 p を使用して 3 列のレイアウトを形成します。
- その違いは、中央の列 p コンテンツがブロックされない問題を解決するためのさまざまなアイデアにあります。
Holy Grail Layout
3つの列の外側のラッピングレイヤーの左右のpadding-leftとpadding-rightを設定します
- 相対レイアウト位置を使用します: 左と右のPSに相対し、右に一致しますと left 属性をそれぞれ自分自身を基準にして移動します 中央の p をブロックしないように
- 両翼レイアウト
- コンテンツを配置するために中央 p の中にサブ p を作成します
- このサブ p 、margin-left と margin-right を使用して、左右の列 p を確保します
- の位置には 1 つ多くの p があり、使用する CSS 属性は 4 つ少なくなります (pp のadding-leftとpadding-rightの2つの属性)聖杯レイアウトの中央に加え、左右の 2 つの PS は相対レイアウト位置を使用します。相対と対応する Right と Left には合計 4 つの属性があり、ダブルウィング レイアウトの sub-p には合計 6 つの属性があります。 margin-left と margin-right の合計 2 つの属性 (6-2=4) を使用します。
そして、二重飛行翼レイアウトにはもう 1 つの利点があります。これにより、メインが BFC 要素に変わり、画面幅が縮小されたときにメインが圧迫されなくなり、聖杯レイアウトが圧迫されます。
関連おすすめ:
両翼レイアウトの変形と使い方の詳しい説明
以上がCSS二重翼レイアウトと聖杯レイアウトとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

この投稿では、Blackle Moriは、CohostのHTMLサポートの限界を押し広げようとしている間に見つかったハックのいくつかを示します。あえてこれらを使用してください、あなたもCSS犯罪者とラベル付けされないようにしてください。

CSSを備えたカスタムカーソルは素晴らしいですが、JavaScriptを使用して次のレベルに物事を引き出すことができます。 JavaScriptを使用して、カーソル状態間で移行し、カーソル内に動的テキストを配置し、複雑なアニメーションを適用し、フィルターを適用できます。

2025年には、互いに互いに跳ね返る要素を伴うインタラクティブなCSSアニメーションは、CSSにPongを実装する必要はありませんが、CSSの柔軟性とパワーの増加はLee&#039;の疑いを補強します。

CSSバックドロップフィルタープロパティを使用してユーザーインターフェイスをスタイルするためのヒントとコツ。バックドロップフィルターを複数の要素間でレイヤー化する方法を学び、それらを他のCSSグラフィカル効果と統合して、精巧なデザインを作成します。

まあ、SVG&#039;の組み込みのアニメーション機能は、計画どおりに非推奨されることはありませんでした。確かに、CSSとJavaScriptは負荷を運ぶことができる以上のものですが、以前のようにSmilが水中で死んでいないことを知っておくのは良いことです

イェーイ、テキストワラップのジャンプを見てみましょう:サファリテクノロジーのプレビューにかなり着陸してください!しかし、それがChromiumブラウザーでの仕組みとは異なることに注意してください。

このCSS-Tricksアップデートは、アルマナック、最近のポッドキャスト出演、新しいCSSカウンターガイド、および貴重なコンテンツを提供するいくつかの新しい著者の追加の大幅な進歩を強調しています。

ほとんどの場合、人々はTailwind&#039;の@Apply機能を紹介します。このように展示されたとき、@Applyはまったく有望な音をしません。だからobvio


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター

WebStorm Mac版
便利なJavaScript開発ツール

SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

ホットトピック









