CSS値

CSS 値のソース

まず、CSS の構文は単純ですが、そのプロパティと値は正式に定義されており、正確にはブラウザーの製造元によって定義されていることを知っています。

これらの指定された値は、次の状況から来ます:

1. inherit は、祖先要素から値を継承することを意味します。どの属性にもそれがあります。

2. initial はユーザーエージェントのデフォルト値を表します。どの属性にもそれがあります。

3. ブラウザ固有の値には通常、-ms-、-webkit- などの接頭辞が付いていますが、接頭辞のない値もあります。

4. ブラウザ間で共有される値は共有されていますが、各ブラウザの実装は必ずしも同じではありません。

したがって、CSS の互換性の問題の主な原因は、ブラウザのメーカーによって実装された CSS レンダリングの不一致と進化であることは確かです。

CSS 仕様の値

最終的にユーザーに提示される値は 4 つのステップを経ます: 最初に指定された値 (「指定された値」)、次に継承された値 (「計算された値」)、そして次の値に変換されます。 「使用される値」)、そしてブラウザー独自の制限により取得される「実際の値」

は、指定值-->计算值-->使用值-->实际值

指定された値です

値を指定するには 3 つの可能性があり、1 つはユーザー エージェントのデフォルト値です。 1 つはプログラム内でアーティストによって書き込まれた値で、もう 1 つは明示的な継承の値です

通常、継承も初期も明示的に指定する必要はありません。ただし、場合によっては、これら 2 つの値が非常に便利です。

計算値

これは、ドキュメントが形成される前に CSS ファイルとカスケード ルールの継承関係を解析することによって、レンダリング エンジンによって計算された値です。

使用値

cssとhtmlを組み合わせて文書化した後の値です。

計算値と使用値の違いは、ブラウザーが最初に HTML ファイルと CSS ファイルを別々に解析し、次にそれらをマージすることを理解してください。詳細はこちらの2枚の写真をご参照ください。

webkitレンダリングプロセス

Geokoレンダリングプロセス

実際の値

は、たとえば、すべてのブラウザは小数点以下7桁を処理できないため、精度が低下します。

これらの 4 つの値は仕様に基づいています。他のブラウザ実装はこの 4 段階のプロセスに従って機能しない可能性がありますが、現在主流のブラウザはこのプロセスに従います

カスケードは継承とは異なることに注意してください。カスケードは個々の CSS プロパティに対して行われ、継承は要素に対して行われます。レイヤ化には重み付けの問題が伴うことがよくあります。

Chrome Developer

1. 指定値(3種類)

2. ユーザーエージェントのデフォルト値(変更不可)

3. アンダースコア付きの値はカスケードルールの対象となることを示し、つまり、承認されています。重要なものはスタイルでカバーされています。

4. 4 をクリックして、対応するノードとスタイル ビューにジャンプします。 4 の下の部分は、スタイルがどの要素から継承されているかを示します。通常、ここから要素の祖先 DOM チェーンを確認できます。

5. 灰色の部分は、ルールが利用できないことを示します。実行時に計算されます。
   例:

今、次のように h1 の高さを指定します

計算された値を見ると、Chrome が小数点以下 4 桁を保持していることがわかります:

使用量の値を表示する (理由)このボックス内を調べるためのボックスは、以前に使用された値に対応するドキュメントの形式を表します)

最終的な実際の値はここにあります(ページ上で直接表示します):

次のことができます。パディングがある場合は、ドキュメントが形成された後にパディングが追加され、それが視覚的な幅と高さに追加されることを確認してください。もちろん、box-sizing 属性が指定されている場合は異なりますが、これは最後のステップで発生することがわかります。

CSS値のソース

まず、CSSの構文は単純ですが、そのプロパティと値は正式に定義されているわけではないことを知っています。ブラウザの製造元によって定義されています。

これらの指定された値は、次の状況から来ます:

inherit は、祖先要素から値を継承することを意味します。どの属性にもそれがあります。

1. initial はユーザーエージェントのデフォルト値を表します。どの属性にもそれがあります。

2. ブラウザ固有の値には通常、-ms-、-webkit- などの接頭辞が付いていますが、接頭辞のない値もあります。

3. ブラウザ間で共有される値は共有されていますが、各ブラウザの実装は必ずしも同じではありません。

したがって、CSS の互換性の問題の主な原因は、ブラウザのメーカーによって実装された CSS レンダリングの不一致と進化であることは確かです。

CSS 仕様の値

最終的にユーザーに提示される値は 4 つのステップを経ます: 最初に指定された値 (「指定された値」)、次に継承された値 (「計算された値」)、そして次の値に変換されます。 「使用される値」)、最後にブラウザー独自の制限により取得される「実際の値」

指定值-->计算值-->使用值-->实际值指定値

値の指定には 3 つの可能性があり、1 つはユーザー エージェントのデフォルト値です。 1 つはプログラム内でアーティストによって書き込まれた値で、もう 1 つは明示的な継承の値です

通常、継承も初期も明示的に指定する必要はありません。ただし、場合によっては、これら 2 つの値が非常に便利です。

計算値

これは、ドキュメントが形成される前に CSS ファイルとカスケード ルールの継承関係を解析することによって、レンダリング エンジンによって計算された値です。

使用値

cssとhtmlを組み合わせて文書化した後の値です。

計算値と使用値の違いは、ブラウザーが最初に HTML ファイルと CSS ファイルを別々に解析し、次にそれらをマージすることを理解してください。詳細はこちらの2枚の写真をご参照ください。

webkitレンダリングプロセス

Geokoレンダリングプロセス

実際の値

は、たとえば、すべてのブラウザは小数点以下7桁を処理できないため、精度が低下します。

これらの 4 つの値は仕様に基づいています。他のブラウザ実装はこの 4 段階のプロセスに従って機能しない可能性がありますが、現在主流のブラウザはこのプロセスに従います

カスケードは継承とは異なることに注意してください。カスケードは個々の CSS プロパティに対して行われ、継承は要素に対して行われます。レイヤ化には重み付けの問題が伴うことがよくあります。

Chrome Developer

指定値(3種類)
ユーザーエージェントのデフォルト値(変更不可)
アンダースコア付きの値はカスケードルールの対象となることを示し、つまり、承認されています。重要なものはスタイルでカバーされています。
4 をクリックして、対応するノードとスタイル ビューにジャンプします。 4 の下の部分は、スタイルがどの要素から継承されているかを示します。通常、ここから要素の祖先 DOM チェーンを確認できます。

4. 灰色の部分は、ルールが利用できないことを示します。実行時に計算されます。

5. 例:

   次のように h1 の高さを指定します

計算された値を表示すると、Chrome が小数点以下 4 桁を保持していることがわかります:

使用量の値を表示 (理由)このボックス内で確認できるのは、ボックスはドキュメントの構成を表しており、以前に使用された値に対応します)

最終的な実際の値はここにあります(ページ上で直接表示します):

パディングがある場合は、ドキュメントが形成された後にパディングが追加され、ブラウザ上で表示されるときに、視覚的な幅と高さに追加されます。もちろん、box-sizing 属性が指定されている場合は異なりますが、これは最後のステップで発生することがわかります。

CSS 値関連の記事をさらに詳しく知りたい場合は、PHP 中国語 Web サイトに注目してください。