ホームページ > 記事 > ウェブフロントエンド > CSS をさらに深く掘り下げて、Web 開発の「ピッチ」を軽減_html/css_WEB-ITnose
通常、CSS を学ぶと、簡単に習得できるように感じますが、実際のアプリケーションで埋めるのが難しいさまざまな「落とし穴」に遭遇することがよくあります。混乱と不満の解決策として、この記事では CSS の優先順位やコンテキストのスタックなどの多くの高度な機能について詳しく説明します。 CSS についてより深く理解できるようになります。
優先度は、どの属性値が要素に最も関連しているかを判断することによってブラウザが決定し、要素に適用するものです。優先度はセレクターから構成されるマッチング ルールによってのみ決定されます。 P タグにクラス (Class) を追加すると、クラス内の一部の属性は実行後に変更されず、CSS セレクターに優先順位の問題が発生します。
一般的なセレクターの種類:
インライン スタイル (例: ...)
ID セレクター (ID セレクター) #id; など
図に示すソースの優先順位 Show
CSS 優先順位ルール:
各セレクターには重みがあり、重みが大きいほど優先順位が高くなります
共通 CSS モデル
CSS では、幅と高さはコンテンツ領域 (要素) の幅と高さを指します。パディング、境界線、余白を増やしてもコンテンツ領域のサイズには影響しませんが、要素のボックス全体のサイズは大きくなります。ボックスの両側に 10 ピクセルのマージンと 5 ピクセルのパディングがあると仮定します。要素ボックスを 100 ピクセルにしたい場合は、コンテンツの幅を 70 ピクセルに設定する必要があります。必須の属性は次のとおりです:
基本属性
幅/高さ
と .NET WinForm の違い:
Vertical Margin merge
の垂直マージンがが 12px の場合、2 つの
間の垂直距離はどれくらいですか?常識的には 12 + 12 = 24px であるはずですが、答えは依然として 12px です。縦方向の余白が重なるため、大きい方の余白が覆われます。
Position 属性は、要素の配置タイプを指定します。この属性は、要素のレイアウトを確立するために使用される位置決めメカニズムを定義します。任意の要素を配置できますが、絶対要素または固定要素は、要素自体のタイプに関係なく、ブロック レベルのボックスを生成します。相対的に配置された要素は、通常のフローではデフォルトの位置からオフセットされます。以下は、Position 属性の値の範囲です:
静的な通常のフロー レイアウト (通常のフロー)、デフォルト値。位置決めを行わない場合、要素は通常のフローで表示されます (上、下、左、右、または z-index 宣言は無視されます)。
Absolute はコンテナ要素内の絶対配置レイアウトであり、静的配置以外に最初の親要素を基準にして配置される絶対配置要素を生成します。要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。
表示範囲内の絶対配置レイアウトを修正し、ブラウザ ウィンドウを基準にして配置された絶対配置要素を生成します。要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。
float 属性は、要素がどの方向にフロートするかを定義します。歴史的に、このプロパティは常に画像に適用され、テキストが画像の周りを回り込むようにしていましたが、CSS では任意の要素をフローティングにすることができます。フローティング要素は、要素のタイプに関係なく、ブロック レベルのボックスを作成します。
z-index スタックスペース特性を提供し、サブ要素のレンダリング順序に影響を与える構造は、スタッキングコンテキストと呼ばれます。
ブラウザは、次のルールを満たす DOM 要素にスタッキング コンテキストを割り当てます。
ルート要素 (html)
「Positioned」要素 (位置: 絶対または相対) で、指定された z-index 値が自動ではありません
flex 項目で、指定された z-index 値が自動ではありません要素
不透明度が 1 未満の要素
none 以外の変換値を指定する要素
Normal 以外のミックスブレンドモード値を指定する要素
フィルターを指定する要素none以外の値
分離値がisolateである要素を指定
will-change属性に上記リストのいずれかの属性を値とする要素を指定
-webkit-overflowを持つ要素を指定-scrolling value は touch
DOM ツリー構造によれば、積み重ねられたコンテキストを持つ要素はツリー構造を形成します。
スタッキングコンテキスト内の要素は、z-index に基づいて順番にスタックされます。 z-index が大きい方が優先
z-index 0 レベルの要素のうち、スタックコンテキストを持つ要素のスタック順序が最初
上記の条件が区別できない場合は、 DOM ツリーはスタック順序を決定するために使用されます。
パフォーマンスを向上するには、構築パイプラインのすべての要素に注意を払う必要があります。
変換と不透明度を除き、属性を変更すると、描画レイヤーまたはグラデーション要素の CSS セレクターのパフォーマンスがトリガーされます
セレクターの右端が、このセレクター (キー セレクター) のキー条件になります
ブラウザはセレクターを右から左に一致させるため、できるだけ具体的な条件を使用する必要がありますおそらく右端です。
* ルールの使用は避けてください
セレクターはできるだけ短くする必要があります
元のリンク: http://slides.com/colinhan/deck-2-3#/5