いわゆる継承とは、現在の要素がこの属性を定義していない場合でも、HTML 要素が親要素から一部の CSS 属性を継承できることを意味します。では、CSS のどのプロパティが継承でき、どのプロパティが継承できないのでしょうか? CSSにおける属性継承の内容を見てみましょう。
まず、CSS の優先度を見てみましょう:
一般的に使用される CSS 非継承プロパティ
display: 要素が生成するボックスのタイプを指定しますtext-decoration: テキストに追加される装飾を指定しますtext-shadow: テキストの影効果white -space: 空白文字の処理 ボックスモデル属性: width、height、margin、border、padding 背景属性: バックグラウンド 位置決め属性: float、clear、position、top、right、bottom、left、min-width 、min -height、max-width、max-height、overflow、clip、z-index一般的に使用される CSS 継承可能な属性:
font: 結合されたフォントfont-family: 指定された要素のフォントファミリーfont -weight: フォントのウェイトを設定します font-size: フォントのサイズを設定します font-style: フォントのスタイルを定義します text-indent: テキストのインデント text-align: テキストの水平方向の配置text line-height : 行の高さcolor: テキストの色visibility: 要素の可視性Cursor 属性:cursorすべての要素は継承可能
1. 要素の可視性: Visibility2.カーソルインライン要素によって継承できる属性
1. フォントファミリー属性2. text-indent と text-align を除くテキストファミリー属性ブロックレベル要素によって継承できる属性
text-indent 、 text-aligninherit (継承) value
各属性は値「継承」を指定できます。つまり、指定された要素について、属性は、その要素の計算値と同じ値をとります。親要素の相対属性。継承された値は通常、フォールバック値としてのみ使用されます。これは、次のように明示的に「inherit」を指定することで強化できます。ただし、定義を繰り返す場合の問題は、border、margin、padding、background など、一部のプロパティを継承できないことです。 たとえば、に境界線が設定されている場合、この属性も継承されると、この
内のすべての要素に境界線が設定され、間違いなく Dazzling の結果が生成されます。 。同様に、マージンやパディングなど、要素の位置に影響を与えるプロパティは継承されません。
同時に、ブラウザのデフォルトのスタイルも継承結果に影響します。例:
body { font-size: 12px; }
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
