フロントエンド開発でよく使われる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を挿入する際のブラウザ互換性の問題を完全に解決できます。
コードは次のようになります。 。プロセス{ 境界線:1px 実線 #B7B7B8; 背景:#F8F8...
1. スタートアップメニューでは、カーソルを最初の行に移動します - eを押します 2. UTF-8...
機能: 前のページまたは次のページにジャンプします。要素: ページングの基本要素は、前のページ + ...
1. ソフトウェアのインストールパスを確認します。 Linuxソフトウェアをインストールできる場所は...
2.1、msiインストールパッケージ2.1.1、インストール特に重要なのは、インストール前に、元の ...
この記事は Linux centos8 をベースにして、docker をインストールし、イメージをプ...
目次1. 解凍する2. データフォルダを作成する3. MySQLに環境変数を追加する3.1 コントロ...
この記事では、jQueryブリージングカルーセル制作原理の具体的なプロセスを参考までに紹介します。具...
最近、Rails 経由で「utf8」でエンコードされた UTF-8 文字列を MariaDB に保存...
この記事では、例を使用して、MySQL ステートメントを使用して、単純な追加、削除、変更、およびクエ...
目次序文質問オンラインソリューション序文この記事の内容は私がこの業界に入ったときのメモを元にしている...
実際、Apacheクラスタを構築するのは難しくありません。私もインターネットで情報を見つけて自分で設...
展示する デザインパスワード強度分析パスワードは数字、文字、特殊記号で構成されていますパスワード: ...
HTML ファイルとは何ですか? HTML は Hyper Text Markup Language...
MacにはApache環境が付属していますターミナルを開き、sudo apachectl -v と入...