CSS には、静的配置 (static)、相対配置 (relative)、絶対配置 (absolute)、固定配置 (fixed) という 4 つの配置方法があり、配置には、左、右、上、ボトム、Z インデックスなど。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
CSS での配置をレイアウトに上手に適用すると、ページの美化に非常に役立ちます。CSS には、静的配置、相対配置、絶対配置、固定配置、およびさまざまな配置という 4 つの配置方法があります。パラメータなど: 左、右、上、下、Z インデックスなど。
1. 静的配置 (static)
配置属性を持たない一般的なラベル要素は静的配置であり、ページ下部の標準フローに属します。
2. 絶対配置 (absolute)
絶対配置要素をドキュメント フローからドラッグし、左、右、上、下などの属性を使用して、最も近い要素を基準にして配置します。 set 親要素は絶対に配置されます。要素の親に配置属性が設定されていない場合は、body 要素の左上隅を基準に配置されます。絶対的に配置された要素は積み重ねることができ、積み重ね順序は z-index 属性によって制御できます。z-index 値は単位のない整数で、大きい方が上にあり、負の値をとることもできます。
絶対配置 配置方法: 親要素が、position:relative、position:absolute、position:fixed など、静的以外の位置を設定する場合、その親要素に対して相対的になります。 left、top、right、bottom 属性によって指定されます。その親要素に位置設定が設定されていない場合は、その親要素の親要素に位置設定が設定されているかどうかによって決まります。それでも設定されていない場合は、上位の要素に進みます。レベルの祖先要素。類推すると、簡単に言うと、その配置は、静的配置以外の配置を持つ最初の祖先要素に対して相対的です。すべての祖先要素が上記の 3 つの配置のいずれかを持たない場合、ドキュメントに対して相対的になります。 . body から位置へ (ブラウザ ウィンドウに対して相対的ではなく、ウィンドウに対して相対的な位置が固定されます)。
<head>
<style type="text/css">
.box {
background: red;
width: 100px;
height: 100px;
float: left;
margin: 5px;
}
.two {
position: absolute;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="box" >One</div>
<div class="box two" >Two</div>
<div class="box" >Three</div>
<div class="box">Four</div>
</body>class="two" の p を
の上端と左端から 50 ピクセルの位置に配置します。他の要素のレイアウトが変更され、この要素の元の位置に空白スペースは残りません。
(学習ビデオ共有: css ビデオ チュートリアル)
3. 相対位置 (relative)
relative配置された要素は積み重ねることができず、左、右、上、下などの属性に基づいて通常のドキュメント フロー内でオフセットされます。 Z-index 階層設計を使用することもできます。
<head>
<style type="text/css">
.box {
background: red;
width: 100px;
height: 100px;
float: left;
margin: 5px;
}
.two {
position: relative;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="box" >One</div>
<div class="box two" >Two</div>
<div class="box" >Three</div>
<div class="box">Four</div>
</body>class="two" の p を元の位置の上と左から 50 ピクセルの位置に配置します。他の要素のレイアウトは変更されませんが、この要素の元の位置に空白スペースが残ります。
4. 固定配置 (固定)
固定配置は絶対配置と似ていますが、ブラウザ ウィンドウを基準にして配置され、スクロールに従いません。スクロール用のバー。
固定位置の最も一般的な使用法の 1 つは、マージン、境界線、またはパディングを使用せずに、ページ上に固定ヘッダー、固定フット、または固定サイドバーを作成することです。
5. 絶対配置と相対配置
絶対配置は、建物のさまざまな階にさまざまな要素を配置するようです (1 階を除き、テキストは 1 階に配置されます)。影響: 相対的に配置された要素は第 1 レベルにあり、テキスト フローと一緒に保存され、相互に影響を与えます。
絶対配置に設定された要素は、ドキュメント フロー内のスペースを占有しません。要素が絶対配置に設定されている場合、ドキュメント フロー内のその位置は削除され、フローティングになります。実際には、相対配置を設定します。配置によっても要素はフローティングになりますが、それらの違いは、相対配置ではドキュメント フロー内でその要素が占めるスペースが削除されないことです。他の要素はそのスペースを占有することはできませんが、絶対配置では要素が削除されます。ドキュメント フロー内での位置によって要素が削除されます。ドキュメント フローから完全に抽出され、他の要素がそのスペースを占有することができ、その重なり順は z-index によって設定できます。
プログラミング関連の知識について詳しくは、プログラミング ビデオをご覧ください。 ！
以上がCSSにはいくつかの種類の配置がありますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
HTMLとReact：マークアップとコンポーネントの関係Apr 12, 2025 am 12:03 AMHTMLとReactの関係は、フロントエンド開発の中核であり、最新のWebアプリケーションのユーザーインターフェイスを共同で構築します。 1）HTMLはコンテンツ構造とセマンティクスを定義し、Reactはコンポーネントを介して動的インターフェイスを構築します。 2）ReactコンポーネントはJSX構文を使用してHTMLを埋め込み、インテリジェントなレンダリングを実現します。 3）コンポーネントライフサイクルは、状態および属性に従ってHTMLレンダリングと動的に更新を管理します。 4）コンポーネントを使用して、HTML構造を最適化し、保守性を向上させます。 5）パフォーマンスの最適化には、不必要なレンダリングの回避、重要な属性の使用、およびコンポーネントの単一の責任を維持することが含まれます。
ReactとFrontend：インタラクティブエクスペリエンスの構築Apr 11, 2025 am 12:02 AMReactは、インタラクティブなフロントエンドエクスペリエンスを構築するための好ましいツールです。 1）Reactは、コンポーネント化と仮想DOMを通じてUIの開発を簡素化します。 2）コンポーネントは、関数コンポーネントとクラスコンポーネントに分割されます。関数コンポーネントはよりシンプルで、クラスコンポーネントはより多くのライフサイクル方法を提供します。 3）Reactの作業原則は、パフォーマンスを改善するために仮想DOMおよび調整アルゴリズムに依存しています。 4）国家管理は、usestateまたはthis.stateを使用し、ComponentDidmountなどのライフサイクルメソッドが特定のロジックに使用されます。 5）基本的な使用には、コンポーネントの作成と状態の管理が含まれ、高度な使用にはカスタムフックとパフォーマンスの最適化が含まれます。 6）一般的なエラーには、不適切なステータスの更新とパフォーマンスの問題が含まれます。
反応とフロントエンドスタック：ツールとテクノロジーApr 10, 2025 am 09:34 AMReactは、コアコンポーネントと状態管理を備えたユーザーインターフェイスを構築するためのJavaScriptライブラリです。 1）コンポーネントと州の管理を通じてUIの開発を簡素化します。 2）作業原則には和解とレンダリングが含まれ、React.memoとusememoを通じて最適化を実装できます。 3）基本的な使用法は、コンポーネントを作成およびレンダリングすることであり、高度な使用法にはフックとコンテキストアピの使用が含まれます。 4）不適切なステータスの更新などの一般的なエラーでは、ReactDevtoolsを使用してデバッグできます。 5）パフォーマンスの最適化には、React.MEMO、仮想化リスト、コードスプリッティの使用が含まれ、コードを読みやすく保守可能に保つことがベストプラクティスです。
HTMLにおけるReactの役割：ユーザーエクスペリエンスの向上Apr 09, 2025 am 12:11 AMReactはJSXとHTMLを組み合わせてユーザーエクスペリエンスを向上させます。 1）JSXはHTMLを埋め込み、開発をより直感的にします。 2）仮想DOMメカニズムは、パフォーマンスを最適化し、DOM操作を削減します。 3）保守性を向上させるコンポーネントベースの管理UI。 4）国家管理とイベント処理は、インタラクティブ性を高めます。
反応コンポーネント：HTMLで再利用可能な要素を作成しますApr 08, 2025 pm 05:53 PMReactコンポーネントは、機能またはクラスによって定義され、UIロジックのカプセル化、およびプロップを介して入力データを受け入れることができます。 1）コンポーネントの定義：関数またはクラスを使用して、反応要素を返します。 2）レンダリングコンポーネント：Reactコールレンダリングメソッドまたは機能コンポーネントを実行します。 3）マルチプレックスコンポーネント：データをプロップに渡して、複雑なUIを構築します。コンポーネントのライフサイクルアプローチにより、ロジックをさまざまな段階で実行でき、開発効率とコードメンテナビリティが向上します。
厳密なモードの目的を反応しますApr 02, 2025 pm 05:51 PMReact Strictモードは、追加のチェックと警告をアクティブにすることにより、Reactアプリケーションの潜在的な問題を強調する開発ツールです。これは、レガシーコード、安全でないライフサイクル、および副作用を特定するのに役立ち、現代の反応の実践を促進します。
断片の使用法を使用しますApr 02, 2025 pm 05:50 PM反応フラグメントにより、余分なDOMノードなしで子供をグループ化すること、構造、パフォーマンス、アクセシビリティが向上します。それらは、効率的なリストレンダリングの鍵をサポートしています。
反応調整プロセスApr 02, 2025 pm 05:49 PMこの記事では、Reactの和解プロセスについて説明し、DOMを効率的に更新する方法について詳しく説明しています。重要な手順には、調整のトリガー、仮想DOMの作成、拡散アルゴリズムの使用、最小限のDOM更新の適用が含まれます。また、Perfoをカバーしています
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。
メモ帳++7.3.1
使いやすく無料のコードエディター
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
