CSSの優先順位やStacking Contextなどの高度な機能を詳しく解説することで、CSSの理解がさらに深まります！！-CSSチュートリアル-php.cn

CSSの優先順位やStacking Contextなどの高度な機能を詳しく解説することで、CSSの理解がさらに深まります！！

PHPz

リリース： 2020-09-27 11:46:10

転載

3877 人が閲覧しました

CSSの優先順位やStacking Contextなどの高度な機能を詳しく解説することで、CSSの理解がさらに深まります！！

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

CSS 優先度

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

セレクターの優先順位

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

インラインスタイル (...;
ID セレクター (#id;
など) クラスセレクター (Class) (.class {...} など) , [href=''], :hover;
タグセレクター (Tag) (p,:before

など) セレクターの種類ごとに重みが異なります。各セレクターの重みは重みによって決定されます

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

CSSの優先順位やStacking Contextなどの高度な機能を詳しく解説することで、CSSの理解がさらに深まります！！

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

CSSの優先順位やStacking Contextなどの高度な機能を詳しく解説することで、CSSの理解がさらに深まります！！

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

CSS 優先順位ルール:

重みが等しい場合、後で表示されるスタイルシート設定の方が最初に表示されるスタイルシート設定よりも優れています;
作成者のルールはブラウザのルールよりも高くなります。つまり、CSS スタイルセットの優先順位です。 Web ページ作成者によるブラウザによって設定されたスタイルよりも高い;
継承された CSS スタイルは、後で指定された CSS スタイルほど良くありません;
同じグループのプロパティ設定では、「!重要」でマークされたルールの優先度が最も高くなります。

CSS 共通モデル

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

CSSの優先順位やStacking Contextなどの高度な機能を詳しく解説することで、CSSの理解がさらに深まります！！

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

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

基本属性

パディング
マージン
境界番号
##アウトライン
オフセット属性
上/左/下/右
.NET WinFormと.NETの違いWinForm:
デフォルトでは、Width/Height には Padding は含まれません

すべてをボックスモデルとして扱うことができます

##垂直マージンマージ

CSSの優先順位やStacking Contextなどの高度な機能を詳しく解説することで、CSSの理解がさらに深まります！！ If

の垂直マージンは 12px なので、2 つの

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

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

静的通常フローレイアウト (通常フロー)、デフォルト値。位置決めを行わない場合、要素は通常のフローで表示されます (上、下、左、右、または z-index 宣言は無視されます)。
Relative は、オフセット属性を持つ通常のフローレイアウトをサポートし、通常の位置を基準にして相対的に配置された要素を生成します。したがって、「left:20」は要素の LEFT 位置に 20 ピクセルを追加します。
絶対コンテナ要素内に絶対的に配置されるレイアウト。静的配置以外に、最初の親要素を基準にして配置される絶対配置要素を生成します。要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。
表示範囲内の絶対配置レイアウトを修正し、絶対配置要素を生成し、ブラウザウィンドウを基準にして配置されます。要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。

CSSの優先順位やStacking Contextなどの高度な機能を詳しく解説することで、CSSの理解がさらに深まります！！

#Float プロパティ

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

CSSの優先順位やStacking Contextなどの高度な機能を詳しく解説することで、CSSの理解がさらに深まります！！