位置が絶対の場合、関連する属性のパーセンテージは、参照先の要素 (包含ブロック) を基準として計算され、位置がレンダリングされます。 まず、次のことを知っておく必要があります。 1. [パーセンテージ参照][1]: 包含ブロックに基づいてパーセンテージを計算する: (1) 要素の margin/padding/left/right/width は包含ブロックの幅を参照して計算されます。 (2) height/top と bottom のパーセンテージを計算するには、包含ブロックの高さが使用されます。包含ブロックの高さがその内容に基づいて変化し、包含ブロックの位置プロパティに relative または static の値が割り当てられている場合、これらの値は 0 に計算されます。 2. [包含ブロックを決定する][2]: 要素の包含ブロックを決定するプロセスは、要素の位置プロパティに完全に依存します。 (1)位置プロパティが静的または相対的である場合、包含ブロックは、最も近い「祖先ブロック要素」(インラインブロック、ブロック、リスト項目要素など)またはフォーマットコンテキスト(テーブルコンテナ、フレックスコンテナ、グリッドコンテナ、ブロックコンテナ自体など)のコンテンツ領域の端で構成されます。 (2)位置プロパティが絶対値の場合、包含ブロックは、位置値が静的でない(つまり、値が固定、絶対、相対、またはスティッキーである)最も近い祖先要素のパディング領域(パディング左+コンテンツ+パディング右)の端から構成されます。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <スタイル> 体 { 色: オレンジ; } div { 位置: 絶対; /*box-sizing: border-box; /*content=(width-border-padding)追加する場合 box-sizing: border-box;; width=content 追加しない場合 */*/ 幅: 400ピクセル; 境界線: 5px 実線オレンジ; パディング: 50px; 高さ: 160px; 背景: ライトグレー; } p { position: absolute; /* 包含ブロックは、最も近い祖先要素(ブロック要素である場合もそうでない場合もある)のパディング エッジ(padding-left + content + padding-right)で構成されます。 幅: 50%; /* == (50+400+50)px * 50% = 250px */ 高さ: 25%; /* == (50+160+50)px * 25% = 65px */ マージン: 5%; /* == (50+400+50)px * 5% = 25px */ 境界線: 5px 実線オレンジ; パディング: 5%; /* == (50+400+50)px * 5% = 25px */ 背景: ピンク; 色: 緑; } /*p { /* 包含ブロックは、最も近い祖先ブロック要素(ブロック要素のみ可能)または書式設定コンテキストのコンテンツ領域の端(コンテンツ)で構成されます。 幅: 50%; /* == 400px * 50% = 200px */ 高さ: 25%; /* == 160px * 25% = 40px */ マージン: 5%; /* == 400px * 5% = 20px */ 境界線: 5px 実線オレンジ; パディング: 5%; /* == 400px * 5% = 20px */ 背景: ピンク; 色: 緑; }*/ </スタイル> </head> <本文> <div> <p>これは段落です!</p> </div> </本文> </html> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: MySQLインデックスの作成について知っておくべきこと
tomcat 設定ファイルから、tomcat の起動時にデフォルトで 8080 (8443)、800...
React は Facebook の社内プロジェクトとして始まりました。 React の出現は革命的...
10 日間のチュートリアルでは、最も理解しやすい言語を使用し、最も基本的なことから始めて、誰もが W...
この記事では、jsネイティブウォーターフォールフロープラグインの具体的なコードを参考までに共有します...
XAML レイアウトを使用する場合、インターフェイスを Metro 風にするために、一部のボタンでは...
ファイル名が少ないファイルを表示ファイル名を少なく | grep -n コンテンツを検索内容に応じて...
序文国家とは何か私たちは皆、React はステート マシンであると言います。それはどのように反映され...
SELECT * FROM テーブル名制限m,n; SELECT * FROM テーブル LIMI...
ウェブサイトのレイアウトの多様化は、当社のフロントエンドの得意分野です。最近、UC ブラウザのデフォ...
実験環境ApacheとTomcatは両方ともIPアドレス192.168.153.136のホストにイン...
目次1. 背景2. 前提条件https:証明書システム: 3. 操作プロセス3.1 証明書の生成3....
目次前面に書かれた予防開発環境構築開発構成に関する注意事項前面に書かれたuni-app は、Vue....
Linux システムを使用したことがある友人なら、 catコマンドを使用したことがあるはずです。もち...
目次序文列挙可能なプロパティ反復可能なオブジェクトforEachメソッドとmapメソッドチェーン呼び...
MYSQL でよく使用されるクエリ コマンド: mysql> select version()...