CSSインタビューの知識ポイントの要約（継続的な更新...）

1.標準のCSSボックスモデルとは何ですか？IEの下位バージョンのボックスモデルの違いは何ですか？

• ボックスモデルには、IEボックスモデル（ボーダーボックス）、W3C標準ボックスモデル（コンテンツボックス）の2つがあります。
• ボックスモデル：コンテンツ、パディング、マージン、ボーダーの4つの部分に分かれています

IEボックスモデルとW3C標準ボックスモデルの違い：

（1）W3C標準ボックスモデル：属性の幅と高さにはコンテンツのみが含まれ、境界線とパディングは含まれません。
（2）IEボックスモデル：属性の幅と高さにはコンテンツ、境界線、パディングが含まれます。これはコンテンツ
+パディング+境界線を指します。

回答：
ボックスモデルは、それぞれ4つの部分で構成されていますmargin、border、padding和content。

標準ボックスモデルとIEボックスモデルの違いは、幅と高さを設定すると、対応する範囲が異なることです。標準ボックスモデルの幅と高さの属性の範囲にはコンテンツのみが含まれ、IEボックスモデルの幅と高さの属性の範囲には境界線、パディング、コンテンツが含まれます。

要素のbox-sizing属性を変更することで、要素のボックスモデルを変更できます。

---

2. CSSセレクターとは何ですか？

（1）idセレクター（#myid）
（2）クラスセレクター（.myclassname）
（3）ラベルセレクター（div、h1、p）
（4）子孫セレクター（h1 p）
（5）隣接する子孫選択セレクター（サブ）セレクター（ul> li）
（6）ブラザーセレクター（li〜a）
（7）隣接するブラザーセレクター（li + a）
（8）属性セレクター（a [rel = "external"]）
（9）疑似タイプセレクター（a ：hover、li：nth-​​child）
（10）疑似要素セレクター（:: before、:: after）
（11）ワイルドカードセレクター（*）

---

:: beforeと：afterのダブルコロンとシングルコロンの違いは何ですか？これら2つの疑似要素の役割を説明します。

单冒号（:）CSS3疑似クラスのCSS3 、CSS3疑似双冒号（::）要素の場合。（疑似要素は二重コロンと疑似要素名で構成されます）既存の疑似要素の書き込みと互換性を持たせるために、一部のブラウザーでは単一コロンを使用して疑似要素を表すこともできます。

疑似クラスは通常、ホバー、リンクなどの要素のいくつかの特別な状態に一致しますが、疑似要素は通常、後、前などの特別な位置に一致します。

• 挿入されたコンテンツを他のコンテンツの前に表示する場合は:: beforeを使用し、そうでない場合は:: afterを使用します。
• コードの順序に関しては、:: afterによって生成されたコンテンツも:: beforeによって生成されたコンテンツよりも遅くなります。
• スタックの観点に従うと、:: afterによって生成されたコンテンツは、:: beforeによって生成されたコンテンツの上になります。

---

4.疑似クラスと疑似要素の違い

CSSは、ドキュメントツリーの外部で情報をフォーマットするための疑似クラスと疑似要素の概念を導入しています。言い換えると、疑似クラスと疑似要素は、ドキュメントツリーにない部分、たとえば、文の
最初の文字やリストの最初の要素を変更するために使用されます。

疑似クラスは、特定の状態にあるときに既存の要素に対応するスタイルを追加するために使用されます。この状態は、ユーザーの動作に応じて動的に変化します。 たとえば、ユーザーが指定された要素にカーソルを合わせると、：hoverを使用してこの要素の状態を記述できます。

疑似要素は、ドキュメントツリーにない要素を作成し、それらにスタイルを追加するために使用されます。要素の特定の部分のスタイルを設定できます。たとえば、:: beforeを使用して要素の前にテキストを追加し、これらのテキストにスタイルを追加できます。ユーザーはテキストを見ることができますが、テキストは実際にはドキュメントツリーにありません。

---

5. CSSのどのプロパティを継承できますか？

継承可能な属性：

（1）フォントファミリー属性
font、font-family、font-weight、font-size、font-style、font-variant、font-stretch、font-size-adjust

（2）テキストシリーズの属性：
text-indent、text-align、text-shadow、line-height、word-spacing、letter-spacing、
text-transform、direction、color

（3）テーブルレイアウト属性
caption-side border-collapseempty-cells

（4）列
表サブリストスタイルタイプ、リストスタイルイメージ、リストスタイル位置、リストスタイル

（5）カーソル属性
カーソル

（6）要素の可視
性の可視性

（7）一般的に使用されないものもあります。話す、ページングする、ネストされた引用の引用符タイプを設定する、その他の属性

要素の継承された属性に指定された値がない場合、親要素の同じ属性の計算値が取得されます。 ドキュメントのルート要素のみが、属性の概要で指定された初期値を取ります（ここでの意味は、属性自体の定義のデフォルト値である必要があります）。

要素の継承されていない属性に指定された値がない場合、属性の初期値が初期値として使用されます。（値は属性の概要で指定されます）。

注：属性が継承されていない場合は、inheritキーワードを使用して、属性が親要素からその値を継承するinheritように指定できます。キーワードは、継承を明示的に指定するために使用され、継承された/継承されていない属性に使用できます。

---

6. CSS優先度アルゴリズムはどのように計算されますか？

CSSの優先度は、スタイル宣言の特殊性の値に基づいて判断されます。

セレクターの特異性の値は、次のように4つのレベルに分けられます。

（1）タグ内セレクターx、0,0,0
（2）IDセレクター0、x、0,0
（3）クラスセレクター/属性セレクター/疑似クラスセレクター0,0、x、0
（4）要素および疑似要素セレクター0,0,0、x

計算方法：

（1）各レベルの初期値は0です。
（2）各レベルの重ね合わせは、セレクターが表示された回数の加算であり、0,99,99,99のように実行できません。次に、次のように表されます。0,0,0,0
（3）各レベルのカウント間に相関関係はなく、レベルの判断は左から右です。特定の桁の値が同じである場合、次の値が判断されます
（4）ワイルドカードセレクター特殊値は0,0,0,0です。2つの優先度が同じである場合、最後の優先度が最も高く、！importantも適用されます。継承されたスタイルの優先度は最も低く、ワイルドカードスタイルの優先度は継承されたスタイルよりも高くなります
（5）！important（weight ）、特別な値はありませんが、優先度が最も高く、メモリを容易にするために、特別な値は1,0,0,0,0と見なすことができます。

計算例：

（1）#demo a{color: orange;}
特別値：0,1,0,1
（2）div#demo a{color: red;}
特別値：0,1,0,2

セレクターの特異性値の比較は左から右にソートされます。つまり、1で始まる特異性値は、0で始まるすべての特異性値よりも大きくなります。

---

7.疑似型LVHAの説明は何ですか？

タグには4つの状態があります。リンクアクセス前、リンクアクセス後、マウスオーバー、アクティブ化の4つの疑似カテゴリに対応しますlink、:visited、:hover、:active：;

タグには4つの状態があります。リンクアクセス前、リンクアクセス後、マウスオーバー、アクティブ化の4つの疑似カテゴリに対応します：link、：visited、：hover、：active;

リンクにアクセスしていない場合：

（1）マウスがリンク上を移動すると、リンクと：hoverの2つの状態になります。タグの色を変更するには、：link疑似クラスの後に：hover疑似クラスを宣言する必要があります;
（ 2）マウスクリック時にアクティブ化aをリンクするときは、link、：hover、：activeの3つの状態を同時に満たします。タグがアクティブ化（：active）されたときにスタイルを表示するには、：activeステートメントは次のようになります。 ：linkと：hoverの後に配置されます。したがって、LVHAオーダーが導出されます。

リンクにアクセスした場合、状況は基本的に上記と同じですが、：linkを：visitedに置き換える必要があります。

---

8. CSS3の新しい疑似クラスは何ですか？

（1）elem：nth-​​child（n）は、親要素の下にあるn番目の子要素を選択し
ます。この子要素のラベルはelemであり、nは特定の値または関数を受け入れることができます。

（2）elem：nth-​​last-child（n）は上記と同じ効果がありますが、後ろから検索します。

（3）elem：last-childは最後の子要素を選択します。

（4）elem：only-child elemが親要素の下の唯一の子要素である場合は、それを選択します。

（5）elem：nth-​​of-type（n）親要素の下にあるn番目のelemタイプ要素を選択します。nは特定の値または関数を受け入れることができます。

（6）elem：first-of-typeは、親要素の下にある最初のelemタイプ要素を選択します。

（7）elem：last-of-typeは、親要素の下にある最後のelemタイプ要素を選択します。

（8）elem：only-of-type親要素の下の子要素にelem型の要素が1つしかない場合は、この要素を選択します。

（9）elem：emptyは、子要素とコンテンツを含まないelemタイプの要素を選択します。

（10）elem：targetは、現在アクティブなelem要素を選択します。

（11）：not（elem）は、非要素要素の各要素を選択します。

（12）：enabledフォームコントロールの無効状態を制御します。

（13）：disabledフォームコントロールの無効状態を制御します。
（14）：チェックされたラジオボタンまたはチェックボックスが選択されています。

---

9. divを中央に配置する方法は？

センタリングのいくつかの一般的な方法は次のとおりです。

幅と高さが固定されている要素の場合

• margin:0 auto要素レベルのセンタリングを実現するために使用できます。
• 絶対位置決めを使用して、4方向の値を0に設定し、マージンを自動に設定します。幅と高さが固定されているため、対応する方向が均等に分割され、水平方向と垂直方向のセンタリングを実現できます。 。
• 絶対配置を使用して、最初に要素の左上隅をページの中心にパスtop:50%してleft:50%配置し、次に要素の中心点を負のマージン値を使用してページの中心に調整します。
• 絶対配置を使用して、最初にtranslate要素の左上隅をページの中央に上：50％と左：50％で配置し、次に要素の中心点をページの中央に調整します。
• フレックスレイアウトを使用すると、コンテナの垂直方向と水平方向が整列されalign-items:centerてjustify-content:center設定され、そのサブ要素も垂直方向と水平方向の中央に配置できます。

幅と高さが可変の要素の場合、上記の後半の2つの方法で、要素の垂直方向と水平方向の中央揃えを実現できます。

---

10.表示の値は何ですか？彼らの役割を説明してください。

blockブロックタイプ。デフォルトの幅は親要素の幅です。幅と高さを設定して、新しい行に表示できます。
none要素は表示されず、ドキュメントフローから削除されます。
inlineインライン要素タイプ。デフォルトの幅はコンテンツの幅です。幅と高さは設定できず、同じ行に表示されます。
inline-blockデフォルトの幅はコンテンツの幅です。幅と高さを設定して、同じ行に表示できます。
list-itemブロックタイプ要素のように表示し、スタイルリストタグを追加します。
tableこの要素は、ブロックレベルのテーブルとして表示されます。
inheritdisplay属性の値を親要素から継承する必要があることを指定します。

---

11.位置値の相対的および絶対的な位置決め原点は何ですか？

相対的に配置された要素は、要素自体の通常の位置を基準にして配置されます。

絶対位置決め要素は、位置値が静的ではない最初の祖先要素のパディングボックスを基準にして配置されます。

この文をこのように理解することができます。最初に、絶対位置の要素の位置値が静的ではない祖先要素を見つけてから、この祖先要素のパディングボックスを基準にして、つまり計算するときにそれを見つける必要があります。位置決め距離、パディング値も含める必要があります。

展開：

• fixed（古いIEはサポートしていません）絶対位置の要素を生成し、ブラウザーウィンドウを基準にして配置します。
• staticデフォルト。位置決めなし、要素は通常の流れで表示されます
• inherit 親要素からposition属性の値を継承することを指定します。

---

継続的に更新しています...