フロントエンド開発でよく使われるCSSの配置方法は、
しかし、基礎知識のないフロントエンド初心者の多くは、これら 4 つの位置決め方法の機能と違いを知らず、使用時に柔軟性に欠けています。Web ページのレイアウトをうまく行いたい場合、これら 4 つの位置決め方法が重要だということを知っておく必要があります。位置決めとレイアウトをしっかり学べば、フロントエンドの開発は簡単になります。 そこで今日は、CSS におけるこれら 4 種類の配置の機能と違いについて説明します。これら 4 つのレイアウトのすばらしい使い方をみんなに理解してもらいましょう。 1. 静的ポジショニング 当社の開発プロセスでは、特に指定がない限り、すべてのボックスは共通フローに配置されます。通常フローにおける要素のボックスの位置は、(X)HTML における要素の位置によって決まります。ブロックレベル要素は上から下に配置され、ボックス間の垂直距離はボックスの垂直余白によって計算されます。インライン要素は一列に水平に配置されます。これについては詳しく説明しません。 2. 相対的な位置付け 私たちのフロントエンド開発では、相対的な配置は常に通常のドキュメント フロー配置モデルの一部と見なされ、配置された要素の位置は通常のフローでの位置を基準に移動されます。相対配置を使用する要素は、移動されたかどうかに関係なく、元の位置を占め続けます。要素を移動すると、他のボックスが覆われてしまいます。 結果 3. 絶対位置指定 フロントエンド開発では、最も近い位置にある親要素を基準とします。最も近い位置にある親要素がない場合、その位置は最初の包含ブロック (body など) を基準とします。絶対配置されたボックスは、それを含むブロックから上、右、下、または左に移動できます。 結果 4. 固定位置 ブラウザ ウィンドウを基準にすると、残りの特性は絶対配置と同様になります。固定要素は、ブラウザ内の特定の位置に固定されている要素です。絶対位置に配置された要素はページに固定されています。スクロール バーをスクロールすると、絶対位置に配置された要素も上にスクロールしますが、固定要素はスクロールしません。 やっと これらの配置方法にはそれぞれ利点があります。多くの初心者は、ページを書くときに、これらの 4 つのレイアウト方法のどれを使用すればよいのか、とよく尋ねます。 (この質問はとても単純に聞こえます) 最後に、現在のプロのフロントエンド開発作業で最もよく使用されているのは絶対位置決めでも相対位置決めでもなく、絶対位置決めと相対位置決めの組み合わせであることをお伝えします。 (小白: 何ですって? フュージョン?) この組み合わせによって、新たな位置決め方法が生まれるわけではありません。代わりに、フロントエンド開発におけるレイアウト記述仕様を参照します。 親子絶対 (つまり、親要素は相対配置を使用し、子要素は絶対配置を使用し、それらを組み合わせてレイアウトを実現します。) このレイアウト仕様は、現段階ではフロントエンド開発で認められたレイアウト方法であり、多くのエラーを回避することもできます。 CSSの4種類の配置についての詳細説明は以上です。CSSの配置4種類の違いについて詳しく知りたい方は、123WORDPRESS.COMの過去記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。 |
>>: SWFObjectを使用すると、HTMLにFlashを挿入する際のブラウザ互換性の問題を完全に解決できます。
エクスポートデフォルト({ URL、 メソッド = 'GET'、 データ = nu...
ウェブ全体を検索して、さまざまな落とし穴を見つけましたが、問題は解決しませんでした。ついに自分でも分...
昨日、ある人のシステムのインストールを手伝ったのですが、自動パーティション分割をクリックするのを忘れ...
1. インストール方法は? 1. [実行] -> [cmd] と入力して、小さな黒いウィンドウ...
目次クラスコンポーネント機能コンポーネントインタビューのよくある質問: React における ref...
Linux のデフォルトの ssh リモート ポートは 22 です。デフォルトのポートは、悪意のある...
MySQLの自動増分主キーIDは段階的に増加しません1. はじめにMySQL データベースにデータを...
目次1. オプションの連鎖2. NULL値の結合3. 再帰型エイリアス4. アサーション署名5. P...
構造とパフォーマンスの紹介HTML 構造、CSS 表現、JavaScript 動作。Web ページの...
Linux の scp コマンド (Windows では scp は使用できません) と、mysql...
IE8 や Chrome で上記の設定を使用すると、画面の最大幅に合わせて表示が統一され、各列の幅は...
目次リストレンダリングキーの原理と機能主要原則の分析キーの役割要約するリストレンダリングキーの原理と...
目次序文クイックレビュー: JavaScript 関数関数とは何ですか?関数を宣言する関数の呼び出し...
フォーム内のフォーム フィールドが無効に設定されている場合、フォーム フィールドの値は送信されません...
カスタムパラメータを渡すだけhtml <div id="アプリ"> ...