html+cssレイアウトの3つの方法（ナチュラルレイアウト/フローレイアウト/ポジショニングレイアウト）
|
1. 自然なレイアウト<br />レイアウトは変更せずに自動的に左揃えになります。 2. 流動的なレイアウト<br />上記で述べた float:left の状況。 3. レイアウトの配置<br />相対配置と絶対配置はどちらも親 div タグを基準とします。 相対 - 要素の元の位置を参照ポイントとして使用します。絶対 - 親 div タグの原点 (左上隅) を参照ポイントとして使用します。 外側のレイヤーは position:relative なので、内側のレイヤーが absolute の場合は、外側のレイヤーの左上隅を変位の基準として配置されます。もちろん、外側のレイヤーには position:relative のみが記述され、left と top の 2 つの値が記述されます。これは、この要素が本来配置されるべき位置が、左揃えと上揃えのレイアウト参照原点として使用されることを意味します。 また、外側のレイヤーに position:absolute が 1 つしかなく、position:relative がないという状況もあります。このとき、どのポイントが基準として使用されるでしょうか。このときの原則は、親要素に相対要素がある場合は親要素が参照原点として使用され、position:relative がない場合は body が参照原点として使用されるというものです。 position:absolute の相対的な外側のレイヤーがない場合、2 つのレイアウトに違いはありません。 もちろん、最後のケースは、外側のレイヤーが position: absolute、内側のレイヤーが position: relative の場合、何が起こるでしょうか?本来の原則によれば、絶対は本体をレイアウト原点として参照し、相対はそれが本来あるべき位置をレイアウト原点として参照します。このとき、実際には外側のレイヤーの左上隅をレイアウト原点として参照します。 残りは実際の状況によって異なります。 |
<<: React Hooksコンポーネント間で値を渡す方法の詳細な説明（tsを使用）
>>: MySQL プロジェクトでトランザクション分離レベルを選択する方法
推薦する
XHTML 入門チュートリアル: Web ページのヘッダーと DTD
ヘッドと DTD はページには表示されませんが、Web ページの重要な要素です。 なぜ失敗したのでし...
トリガーメソッドを使用して、ファイルタイプの入力をクリックせずにポップアップファイル選択ダイアログボックスを実現します。
トリガー メソッドを使用できます。JavaScript にはネイティブのトリガー関数はありません。自...
Reactにおけるキーの役割の詳細な説明
目次質問: ボタンをクリックすると、スパンの色が赤に変わりますか?上記の問題を分析します。 2番目の...
Dockerイメージ構築原理の分析（Dockerをインストールしなくてもイメージを構築できる）
イメージの構築は、DevOps プロセスにおいて非常に重要なプロセスです。一般的に、イメージの構築と...
TypeScript 学習ノート: 型の絞り込み
目次序文型推論真理値の絞り込み平等の縮小演算子の絞り込みインスタンスの絞り込み狭まりの本質ユニオン型...
円形グラデーションプログレスバー効果を実現する CSS サンプルコード
実装のアイデア一番外側は大きな円（グラデーションカラー）グラデーションの円を覆うように、内側に半円を...
Docker を使用して開発環境を構築する方法 (Windows および Mac)
目次1. Dockerを使用する利点2. Dockerをインストールする1) LinuxにDocke...
MySQL の完全なデータベース バックアップ データを使用して単一のテーブル データを復元する方法
序文データベースをバックアップするときは、データベース全体のバックアップを使用します。ただし、何らか...
Windows 10 に付属する仮想マシンのネットワークを設定するための詳細な手順 (グラフィック チュートリアル)
1. サーバー ホストをクリックし、右側の操作リストで [仮想スイッチ管理] をクリックして、仮想...
バックアップと削除のためにリアルタイムでステートメントを検出するMySQLトリガーの考え方の詳細な説明
問題の説明: ユーザーは、テーブルに「違反」という単語を含むフィールドが時々表示されることを要求して...
Linux で FastDFS を使用してイメージ サーバーを構築する
目次サーバー計画1. システムコンポーネントをインストールする2. fastdfsをインストールする...
Vue.js フロントエンド Web ページ ポップアップ非同期動作例の分析
目次1. 序文2. ポップアップコンポーネントを2つ見つける3. 自分で作る3.1. Promise...
Javascriptで戦略パターンを実装する方法
目次概要コードの実装要約する概要戦略パターンは、JavaScript デザイン パターンにおける動作...
HTMLからPDFへのスクリーンショット保存機能の実装
テクノロジーの活用itext.jar: バイト ファイル入力ストリームを画像、PDF などに変換しま...
MySQL でメタデータ ロックがブロックされている場所を確認する方法
MySQL でメタデータ ロックがブロックされている場所を確認する方法手順: 1. セッション1の実...