CSS におけるパーセンテージの問題の分析
この記事では、CSS のパーセンテージについての簡単な説明を主に紹介します。CSS スタイルを定義するときに長さの単位「%」がよく使用されますが、このパーセンテージは誰に関係するのでしょうか?
この記事では、CSS についての簡単な説明を紹介します。
結論:
標準ストリーム内の要素について、その属性が継承されているかどうかを確認します。 width と margin-left の場合は継承可能であり、親要素または祖先要素 (実際には包含ブロック) を参照します。高さの場合は継承がなく、親要素または祖先要素はその高さに適応します。すべての子要素と (これには注意が必要です)。
絶対配置は、最も近い親要素または祖先要素を参照します。親要素または祖先要素がない場合は、最初の包含ブロックを参照します (W3C ではブラウザ固有の方法が指定されていないため、ブラウザによって異なる場合があります)。それを達成します)。しかし実際には、ほとんどのブラウザは表示可能領域を絶対的に配置された包含ブロックとして扱います。
固定位置は視覚領域を参照します
幅はパーセンテージに設定されます
通常、一般的な子要素は、パーセンテージの参照として親要素の計算値を継承します。およびルート要素は、初期値を参考にしてくださいたとえば、.box には幅が設定されていませんが、デフォルトで body の計算された値が継承されます。また、.box は .item の親要素であるため、.item です。 .box の計算値を継承します。ブロックレベルの要素で幅が設定されていない場合、その要素は含まれているブロックの幅を継承するため、その幅はデフォルトで全画面になります。高さをパーセンテージに設定します
結論高さをパーセンテージに設定すると、高さは幅のように親要素または祖先要素を継承しません。要素は、子要素の実際の高さ (高さの計算値) に基づいて自動適応されます。通常は、すべての子要素のコンテンツの高さの合計です。子要素は、テキスト行の高さに基づいて特定の高さの値を設定します (子要素の高さが特定の値に設定されていない場合)。絶対配置の要素の場合、その高さがパーセンテージである場合、絶対配置は親要素またはそれに最も近い祖先要素の高さを参照します。祖先要素の場合、それは最初の要素を参照します (W3C ではブラウザが実装する方法を指定していないため、ブラウザによって異なる場合があります)。しかし実際には、ほとんどのブラウザは表示可能領域を絶対的に配置された包含ブロックとして扱います。 通常、幅をパーセンテージで設定することを好みますが、高さをパーセンテージで設定する場合は注意してください。<style> body,p{ margin:0; padding:0; } .box{ width:100px; height:100%; background-color: #58d3e2; } </style> <p class="box">height 100%</p>
<style> body,p{ margin:0; padding:0; } .box{ width:100px; height:100px; background-color: #58d3e2; } </style> <p class="box">height 100%</p>
<style> body,p{ margin:0; padding:0; } .d{ height: 100px; width: 200px; background-color: #9d9d9d; } .box{ width:100px; height:100px; background-color: #58d3e2; } </style> <p class="d"> <p class="box">height</p> </p>
絶対配置がある場合
1. 祖先要素を配置せずに絶対配置する
このとき、絶対配置とはビューポートの概念に注意してください。りー
改变height分别为100%和50%,可以发现html的高度为0,并没有自适应p的高度,因为p已经彻底脱离标准流了,我们说过,如果绝对定位没有定位的祖先元素,则包含块为初始包含块,这里的初始包含块即为可视区,所以这里的百分比是参照可视区的大小来计算的。所以为50%时占视口的一半。注意这只是一个视口的高度,把滚动条往下拉拉就知道了。
2.绝对定位的元素在另外一个定位元素里面(除static外)
这时百分比参照的是父元素生成的包含块计算出来的值
所以想让定位元素的高度占满整个屏幕,可以:
body{ position:relative; }
margin-left设置成百分比
<style> body,p{ margin:0; padding:0; } .box{ position:absolute; width:100px; height:100px; margin-left: 100%; background-color: #58d3e2; } </style> <p class="box">margin-left</p>
这时出现了滚动条,这是因为将p的margin-left设置成了100%,而百分比是参照其包含块body的宽度,body又是参照的html(某些浏览器将它当作初始包含块)。而html的初始包含块是可视区,所以可视区的宽度再加上元素的100%,自然就超出了屏幕了。
解决方法:
(1)利用calc函数
<style> body,p{ margin:0; padding:0; } .box{ position:absolute; width:100px; height:100px; margin-left: calc(100%-100px); background-color: #58d3e2; } </style> <p class="box">margin-left</p>
(2)让body的宽度减去100px,因为p的百分比是参照其父元素的宽度计算的,因此这里将它的父元素的宽度减小,那么它的margin-left的100%自然就小了
<style> body,p{ margin:0; padding:0; } body{ margin-right;100px; } .box{ position:absolute; width:100px; height:100px; margin-left: 100%; background-color: #58d3e2; } </style> <p class="box">margin-left</p>
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
以上がCSS におけるパーセンテージの問題の分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











Vue.js では、placeholder 属性は、input 要素のプレースホルダー テキストを指定します。これは、ユーザーがコンテンツを入力していないときに表示され、入力のヒントや例を提供し、フォームのアクセシビリティを向上させます。その使用方法は、input 要素にプレースホルダー属性を設定し、CSS を使用して外観をカスタマイズすることです。ベスト プラクティスには、入力に関連すること、短く明確にすること、デフォルトのテキストを避けること、アクセシビリティを考慮することが含まれます。

スパン タグは、テキストにスタイル、属性、または動作を追加できます。 色やフォント サイズなどのスタイルを追加するために使用されます。 idやclassなどの属性を設定します。クリック、ホバーなどの関連する動作。さらに処理または引用するためにテキストにマークを付けます。

CSS の REM は、ルート要素 (html) のフォント サイズに対する相対単位です。次の特性があります: ルート要素のフォント サイズに相対し、親要素の影響を受けません。ルート要素のフォント サイズが変更されると、REM を使用する要素もそれに応じて調整されます。任意の CSS プロパティとともに使用できます。 REM を使用する利点は次のとおりです。 応答性: さまざまなデバイスや画面サイズでもテキストを読みやすい状態に保ちます。一貫性: Web サイト全体でフォント サイズが一貫していることを確認します。スケーラビリティ: ルート要素のフォント サイズを調整することで、グローバル フォント サイズを簡単に変更できます。

Vue に画像を導入するには、URL、require 関数、静的ファイル、v-bind ディレクティブ、CSS 背景画像の 5 つの方法があります。動的画像は Vue の計算プロパティまたはリスナーで処理でき、バンドルされたツールを使用して画像の読み込みを最適化できます。パスが正しいことを確認してください。そうでないと、読み込みエラーが表示されます。

JavaScript でプロンプト() メソッドを使用する場合、次の 3 つの方法で改行を実現できます。 1. 改行する位置に「\n」文字を挿入します。 2. 行に改行文字を使用します。プロンプトテキスト; 3. CSS の "white" -space: pre" スタイルを使用して改行を強制します。

ノードは、HTML 要素を表す JavaScript DOM 内のエンティティです。これらはページ内の特定の要素を表し、その要素にアクセスして操作するために使用できます。一般的なノード タイプには、要素ノード、テキスト ノード、コメント ノード、ドキュメント ノードなどがあります。 getElementById() などの DOM メソッドを通じて、ノードにアクセスし、プロパティの変更、子ノードの追加/削除、ノードの挿入/置換、ノードのクローン作成などの操作を行うことができます。ノードトラバーサルは、DOM 構造内を移動するのに役立ちます。ノードは、ページ コンテンツ、イベント処理、アニメーション、およびデータ バインディングを動的に作成するのに役立ちます。

ブラウザ プラグインは通常、次の言語で作成されます。 フロントエンド言語: JavaScript、HTML、CSS バックエンド言語: C++、Rust、WebAssembly その他の言語: Python、Java

1. まず、左下隅にある設定アイコンを開き、設定オプションをクリックします。 2. 次に、ジャンプしたウィンドウで CSS 列を見つけます。 3. 最後に、不明なプロパティ メニューのドロップダウン オプションをエラー ボタンに変更します。 。
