CSS の継承と自動

とても単純な寓話ですが、樹齢千年の木が雷に打たれてまだ立っていたのに、アリの侵入によって破壊されてしまいました。自分は CSS に熟達していると思っている人でも、小さな問題によって混乱してしまうことがよくあります。通常、これは非常に小さな値ですが、増幅と歪みを重ねた後は、構造全体の形状が崩れてしまいます。 CSS は非常にシンプルな言語で、習得も使用も簡単ですが、最もガベージ コードが発生しやすい言語でもあります。これは言語を深く勉強していないことが原因です。 CSS はデフォルト値、継承方式、重み付け方式の 3 つのブロックで構成されていると私は考えています。ユーザーが属性を設定しない場合、デフォルト値はブラウザによってデフォルトで指定された属性です。 CSS フレームワークには基本的に、reset.css というファイルがあり、これをリセットしてブラウザ間の差異をなくすために使用されます。以下では継承システムに焦点を当てます。重み付けシステム、つまり優先順位の問題については、この記事の範囲を超えているため、これ以上は説明しません。

CSS では、多くのプロパティを継承できます。たとえば、特定の段落のフォントが白に設定されている場合、その要素のフォントは設定する必要がないか、継承するように設定されている場合は白になります。これらの属性は継承プロパティと呼ばれ、親要素が同じ状況にある場合は、対応する属性の計算および変換された値を取得し、一致する場合は最終的に参照を使用します。デバイスのデフォルト値が見つかりません。

継承されたプロパティのリストは次のとおりです:

• border-collapse

• border-spacing

• caption-side

• color

• cursor

• 方向

• 空のセル

• font

• font-family

• font-stretch

• font-size

• font-size-adjust

• font-style

• フォント- バリアント

• フォントの太さ

• 文字間隔

• 行の高さ

• リストスタイル

• 不透明度

• リストスタイル-画像

• リスト- style -type

• quotes

• text-align

• text-indent

• text-transform

• white-space

• word-spacing

http:/ / m.sbmmt.com/

親要素にはフォントスタイルを設定しましたが、子要素を設定していませんでした。子要素を取り出すと、その値がrgb形式に変換されていることがわかりました。もちろん IE です!)

しかし、IE7 以前のバージョンでは、方向と可視性以外のスタイル属性を設定するために継承を使用することはサポートされていません。詳しくはこちらとこちらをご覧ください

IE8では、本来継承プロパティであるtext-alignが失敗してしまいます。

 <table>
  <tr>
    <th>Ruby</th>
    <th>Rouvre</th>
  </tr>
  <tr>
    <td>By</td>
    <td>司徒正美</td>
  </tr>
</table>

 
  table, tr, td, th {
    border-collapse: collapse;
    border: 1px solid #000;
  }
  table {
    text-align: right;
  } 
  td, th {
    width: 100px;
  }

本来、テーブルからテキストの右揃えの設定を継承するはずでしたが、失敗しました...

IE8 のこの精神薄弱なバグは、明示的に設定することで解決することも簡単です継承する。

 
  table, tr, td, th {
    border-collapse: collapse;
    border: 1px solid #000;
  }
  table {
    text-align: right;
  }
  td, th {
    width: 100px;
  }
  th {
    text-align: inherit;
  }

さらに、継承できない CSS プロパティがいくつかあり、最も古典的なものはボーダーシリーズです。これは非継承プロパティと呼ばれ、設定しない場合はブラウザのデフォルト値のみを取得できます。デフォルト値は Firefox では初期値と呼ばれます。これに関連した良いニュースは、Firefox ではデフォルト値も指定できるため、スタイルをリセットする必要がないことです。

以下は、継承されていないプロパティのリストです:

• background

• border

• bottom

• clear

• display

• フロート

• 高さ

• 左

• マージン

• アウトライン

• オーバーフロー

• パディング

• 位置

• 右

• トップ

• 可視性

• 幅

• z-index

子要素を設定しない場合は、ブラウザのデフォルト値の透明が取得されます（W3Cはすべての色をRGB形式に変換するようですが、これは余分です (a はアルファです)

次に、あいまいな値ですが長さの概念がある auto を見てみましょう。次のプロパティに適用されます。

• マージン-* (左|下|上 |右|開始|終了)

• 上

• 下

• 左

• 右

• table-layout

• z-index

• -moz-column - 幅

• 言語

• ブロックレベル要素の測定可能な属性 (幅、高さなど) では、値が設定されていない場合、デフォルト値は auto ですが、値によって簡単にオーバーライドできます。つまり、暗黙的に継承されます。インライン要素ではボックス モデルがないため、設定されていない場合は Firefox でもボックス モデルを返します。これは要素の幅と高さを正確に計算するのに非常に悪影響を及ぼします。自動には対称性もあります。これは中央配置のレイアウトでよく使用されます。オーバーフローなどの非メトリック属性の中には、特定の分析が必要です。
  CSS 継承と自動に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。