CSS をさらに深く掘り下げて、Web 開発の「ピッチ」を軽減_html/css_WEB-ITnose

通常、CSS を学ぶと、簡単に習得できるように感じますが、実際のアプリケーションで埋めるのが難しいさまざまな「落とし穴」に遭遇することがよくあります。混乱と不満の解決策として、この記事では CSS の優先順位やコンテキストのスタックなどの多くの高度な機能について詳しく説明します。 CSS についてより深く理解できるようになります。

CSS優先度

優先度は、どの属性値が要素に最も関連しているかを判断することによってブラウザが決定し、要素に適用するものです。優先度はセレクターから構成されるマッチング ルールによってのみ決定されます。 P タグにクラス (Class) を追加すると、クラス内の一部の属性は実行後に変更されず、CSS セレクターに優先順位の問題が発生します。

セレクターの優先順位

一般的なセレクターの種類:

• インライン スタイル (例: ...)

• ID セレクター (ID セレクター) #id; など

クラスセレクター (Class)、.class {...}、[href='']、:hover; など
タグ選択 div,:before など
各タイプのセレクターの重みは異なり、各セレクターの優先順位は重みによって決定されます。

インライン スタイル: 1,0, 0,0
ID セレクター: 1,0 ,0
クラスセレクター: 1,0
タグセレクター: 1

図に示すソースの優先順位 Show

スタイルシステムは以下から始まります一番右のセレクター左側のルールに一致します。現在のセレクターの左側に他のセレクターがある限り、スタイル システムは、ルールに一致する要素が見つかるか、不一致により終了するまで、左に移動し続けます。

CSS 優先順位ルール:

各セレクターには重みがあり、重みが大きいほど優先順位が高くなります

重みが等しい場合、最初に表示されるスタイル シート設定よりも後から表示されるスタイル シート設定が優先されます。 ;

作成者のルールは閲覧者のルールよりも優先されます。つまり、Web ページ作成者によって設定された CSS スタイルは、ブラウザによって設定されたスタイルよりも優先されます。後で指定する CSS スタイルと同様です。

同じ属性設定セットでは、「! important」とマークされたルールが最も優先されます

共通 CSS モデル

ボックス モデルは CSS テクノロジーで使用される考え方です。 Webデザインでよく使われるモデルです。

ボックスモデル関連の CSS 属性要素のコンテンツ、幅と高さ (Width/Height)、パディング、ボーダー、マージン。

CSS では、幅と高さはコンテンツ領域 (要素) の幅と高さを指します。パディング、境界線、余白を増やしてもコンテンツ領域のサイズには影響しませんが、要素のボックス全体のサイズは大きくなります。ボックスの両側に 10 ピクセルのマージンと 5 ピクセルのパディングがあると仮定します。要素ボックスを 100 ピクセルにしたい場合は、コンテンツの幅を 70 ピクセルに設定する必要があります。必須の属性は次のとおりです:

基本属性

幅/高さ

パディング
マージン
ボーダー
アウトライン
オフセット属性
Top/Left/Bottom/Right

• • と .NET WinForm の違い:

デフォルトでは、Width/Height には Padding が含まれません

• 4 つの値の順序Margin/Padding 属性の左上 (時計回り)
  すべてはボックスモデルとみなすことができます

Vertical Margin merge

の垂直マージンがが 12px の場合、2 つの

間の垂直距離はどれくらいですか?常識的には 12 + 12 = 24px であるはずですが、答えは依然として 12px です。縦方向の余白が重なるため、大きい方の余白が覆われます。

Position 属性は、要素の配置タイプを指定します。この属性は、要素のレイアウトを確立するために使用される位置決めメカニズムを定義します。任意の要素を配置できますが、絶対要素または固定要素は、要素自体のタイプに関係なく、ブロック レベルのボックスを生成します。相対的に配置された要素は、通常のフローではデフォルトの位置からオフセットされます。以下は、Position 属性の値の範囲です:

静的な通常のフロー レイアウト (通常のフロー)、デフォルト値。位置決めを行わない場合、要素は通常のフローで表示されます (上、下、左、右、または z-index 宣言は無視されます)。

• Relative は、offset 属性を持つ通常のフロー レイアウトをサポートし、通常の位置を基準にして相対的に配置された要素を生成します。したがって、「left:20」は要素の LEFT 位置に 20 ピクセルを追加します。

  • Absolute はコンテナ要素内の絶対配置レイアウトであり、静的配置以外に最初の親要素を基準にして配置される絶対配置要素を生成します。要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。

  • 表示範囲内の絶対配置レイアウトを修正し、ブラウザ ウィンドウを基準にして配置された絶対配置要素を生成します。要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。

Float 属性

float 属性は、要素がどの方向にフロートするかを定義します。歴史的に、このプロパティは常に画像に適用され、テキストが画像の周りを回り込むようにしていましたが、CSS では任意の要素をフローティングにすることができます。フローティング要素は、要素のタイプに関係なく、ブロック レベルのボックスを作成します。

スタッキングコンテキスト

z-index スタックスペース特性を提供し、サブ要素のレンダリング順序に影響を与える構造は、スタッキングコンテキストと呼ばれます。

ブラウザは、次のルールを満たす DOM 要素にスタッキング コンテキストを割り当てます。

• ルート要素 (html)

• 「Positioned」要素 (位置: 絶対または相対) で、指定された z-index 値が自動ではありません

• flex 項目で、指定された z-index 値が自動ではありません要素

• 不透明度が 1 未満の要素

• none 以外の変換値を指定する要素

• Normal 以外のミックスブレンドモード値を指定する要素

• フィルターを指定する要素none以外の値

• 分離値がisolateである要素を指定

• will-change属性に上記リストのいずれかの属性を値とする要素を指定

• -webkit-overflowを持つ要素を指定-scrolling value は touch

z-index

積み重ね順

• DOM ツリー構造によれば、積み重ねられたコンテキストを持つ要素はツリー構造を形成します。

• スタッキングコンテキスト内の要素は、z-index に基づいて順番にスタックされます。 z-index が大きい方が優先

• z-index 0 レベルの要素のうち、スタックコンテキストを持つ要素のスタック順序が最初

• 上記の条件が区別できない場合は、 DOM ツリーはスタック順序を決定するために使用されます。

パフォーマンス

ピクセル レンダリング パイプライン

パフォーマンスを向上するには、構築パイプラインのすべての要素に注意を払う必要があります。

• スタイル
  • スタイルの選択を減らす 複雑さプロセッサーの

  • スタイル計算を実行する必要がある要素の数を削減します

• レイアウト
  • ほぼすべてのレイアウトはドキュメント全体の範囲内で発生します。

  • フレックスボックスを使用して古いレイアウトモデルを置き換えます

  • 強制同期レイアウトイベントの発生を回避します

  • 急速な連続レイアウトを回避します

  • レイアウトのトリガーを可能な限り回避します

• ペイント

  変換と不透明度を除き、属性を変更すると、描画レイヤーまたはグラデーション要素の CSS セレクターのパフォーマンスがトリガーされます

  • セレクターの右端が、このセレクター (キー セレクター) のキー条件になります

  • ブラウザはセレクターを右から左に一致させるため、できるだけ具体的な条件を使用する必要がありますおそらく右端です。

  • * ルールの使用は避けてください

  • セレクターはできるだけ短くする必要があります

ID セレクターの前に修飾子を追加しないでください

クラス セレクターを修飾するためにタグ セレクターを使用する必要はありません

• 元のリンク: http://slides.com/colinhan/deck-2-3#/5