CSSにおける属性値継承の知識を総まとめ

この記事では主にCSSにおける属性値の継承を紹介し、どのような属性が継承できるのか、継承できないのかを紹介し、継承の制限やキャンセルできるかどうかなども分析します。具体的な内容については、以下の詳細な説明を確認できます。興味のある読者は、それを参照してください。皆さんのお役に立てれば幸いです。

継承: 現在の要素がこの属性を定義していない場合でも、HTML 要素は親要素から一部の CSS 属性を継承できます。

1.継承できるCSS属性と継承できないCSS属性

継承不可: 表示、マージン、境界線、パディング、背景、高さ、最小高さ、最大高さ、幅、最小幅、最大幅、オーバーフロー、位置、左、右、上、下、Z インデックス、浮動小数点数、クリア、テーブル レイアウト、垂直配置、改ページ後、ページブレッド前、および unicode-bidi。
可視性とカーソルなど、すべての要素は継承可能です。
インライン要素は、letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration を継承できます。テキスト変換、方向。
端子ブロック要素は、text-indent と text-align を継承できます。
List 要素は、list-style、list-style-type、list-style-position、list-style-image を継承できます。
テーブル要素は次のものを継承できます: border-collapse。

2. 値の継承

継承は、ドキュメント ツリー内の要素の一部の属性も、その子要素に継承できるかどうかを定義します。ドキュメントのいくつかのデフォルトのスタイル属性を設定するには、この属性をドキュメント ツリーのルートに設定できます。この属性が継承できる場合、その子孫の要素は、色、フォント サイズ、その他の属性などの属性を継承します。

3. 「継承」値

各属性には「継承」の値を割り当てることができます。つまり、指定された要素の属性は、その親要素の相対属性の計算値と同じ値をとります。 。継承値は通常、フォールバック値としてのみ使用されます。これは、「継承」を明示的に指定することで強化できます。たとえば、制限は次のとおりです。ボーダー、マージン、パディング、および背景。

この設定は意味があります。たとえば、

に境界線が設定されている場合、この属性も継承されると、この

内のすべての要素に境界線が設定されるため、間違いなく問題が発生します。結果。同様に、マージンやパディングなど、要素の位置に影響を与えるプロパティは継承されません。

同時に、ブラウザのデフォルトのスタイルも継承結果に影響します。たとえば、 p { font-size: inherit; }

4.继承的局限性

继承虽然减少了重复定义的麻烦，但是，有些属性是不能继承的，例如border（边框）、margin（边距）、padding（补白）和背景等。
这样设定是有道理的，例如，为一个

设定了边框，如果此属性也继承的话，那么在这个

内所有的元素都会有边框，这无疑会产生一个让人眼花缭乱的结果。同样的，影响元素位置的属性，例如margin（边距）和padding（补白），也不会被继承。

　　同时，浏览器的缺省样式也在影响着继承的结果。例如：

      body { font-size: 12px; }

// H2 中国語テキストは、12 ピクセル サイズのテキストではなく、タイトル 2 スタイルのテキストになります。

これは、ブラウザのデフォルトのスタイルが

の CSS ルールを設定しているためです。

同時に、一部の古いバージョンのブラウザは継承をあまりサポートしていない可能性があります。たとえば、一部のブラウザは に遭遇すると、継承された属性をすべて失います

5. CSS プロパティは継承されるとキャンセルできず、再定義のみ可能です。

6. ケース

親要素の位置: 相対 子要素: 位置: 絶対 親要素の幅は固定されており、子要素は親要素の幅を継承します (二次ナビゲーションにとって非常に重要です。非表示のナビゲーション バーの幅が固定されていないか、幅が親要素よりも大きい場合、通常、現時点では子要素の幅のみをリセットできます)関連する推奨事項:

属性値の継承の概要in css

javascript 特定のCSS属性値の取得_交換体験

CSS属性値の使い方を詳しく解説

以上がCSSにおける属性値継承の知識を総まとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。