CSSを知っている必要があります。あなたのCSSスキルをレベルアップするための私の質問

こんにちはみんな！

CSSは多くのテーマをカバーしており、開発者はすべてを完全に把握できません。すべての知識に習熟する必要はないのは事実ですが、一部のCSS基本知識が不可欠です。私の問題は、これらのコアナレッジポイントを中心に開発することです。

これらの問題は初心者には適していません。特定の経験があるだけで、これらの問題の意図をよりよく理解できます。

GitHubのプロジェクトの開発進捗状況に従うこともできます。

start！

注：「計算値」という用語を使用します。これは、開発者ツール「計算」タブに表示される属性値を指します。

次のセレクターの特性は何ですか？

擬似機能は、ブラウザが指定されたセレクターリストから最高の注目された選択者を選択するのに役立ちます。この例では、最も注目されているセレクターは

です。セレクターの特性は（0、1、0、0）です。これは、全体に適用されます。

<code class="language-css">:is(#container, .content, main) {
  color: red;
}</code>

属性の計算値は:is()です。正しいか間違っていますか？ #container @规则

正しい。

pseudo -pseudo -Functionは特性をゼロにします。したがって、colorセレクターの特性が高くなります。これが、属性の計算値がredである理由です。

<code class="language-css">.container {
  color: red;
}

:where(#container) {
  color: blue;
}</code>

次の例でどのような形状が表示されますか？

:where() .container要素の属性がcolorである場合、redおよび

属性が無効です。広場などは見えません。

<code class="language-css">.container {
  display: inline;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
}</code>

要素の

属性計算値のアルゴリズムは何ですか？ display inline width heightケース1：要素はブロックレベルの要素です。それらの

属性は、親要素の

属性に等しくなります。 .child widthケース2：要素は弾性アイテムです。それらの

属性は、コンテンツに従って計算されます。

<code class="language-html"><div class="parent">
  <div class="child"></div>
</div>
<div class="parent-flex">
  <div class="child"></div>
</div></code>

<code class="language-css">.parent {
  display: block;
}

.parent-flex {
  display: flex;
}</code>

擬似要素の

属性の計算値は何ですか？ .child width width および

。

または値は、子要素の.child属性のwidth属性の値を

>置換値に変換します。

親要素の場合、displayおよび

の場合、子要素のデフォルトの位置の違いは何ですか？

<code class="language-css">.parent {
  display: inline-grid;
}

.parent::before {
  content: "";
  display: inline;  
}

.parent::after {
  content: "";
  display: flex;
}</code>

の親要素の内部では、サブエレメントが順番に表示されます。代わりに、の場合、要素は1つずつ表示されます。 block

要素の属性の計算値は何ですか？ .child width height

要素の

<code class="language-css">:is(#container, .content, main) {
  color: red;
}</code>

属性は、親要素の

<code class="language-css">.container {
  color: red;
}

:where(#container) {
  color: blue;
}</code>

属性に等しくなります。したがって、

属性の計算値は1600pxです。 （ブラウザのデフォルトのフォントサイズが16px、100rem = 100 * 16px = 1600pxであると仮定）.child > 、width属性の親要素の内部は、すべてのスペースを埋めます。親要素に複数のアイテムがある場合、スペースは平均に割り当てられます。したがって、width要素のwidth属性の計算値は20REM / 2 = 10rem、つまり10 * 16 = 160pxです。

要素の境界距離は、すべての場合において親要素を超えます。正しいか間違っていますか？ display: grid height .child heightエラー。

、、

、および.childサブマージー距離は、親要素を超えません。

<code class="language-css">.container {
  display: inline;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
}</code>

境界線は

<code class="language-html"><div class="parent">
  <div class="child"></div>
</div>
<div class="parent-flex">
  <div class="child"></div>
</div></code>

と

の要素の折りたたみですか？ display: flex display: inline-flexいいえ、無効です。 display: grid、、display: inline-grid、

の要素の内部では、境界距離が蓄積されます。

display: inline-flex擬似要素の位置は水平で垂直です。正しいか間違っていますか？ display: inline-grid

正しい。ブラウザは、サブエレメントと親要素の間のすべてのスペースを割り当てます。 display: flex display: inline-flex属性の計算値は何ですか？ display: grid display: inline-grid

の初期値は

です。したがって、要素の計算値は

<code class="language-css">.parent {
  display: block;
}

.parent-flex {
  display: flex;
}</code>

です。

ただし、

、

、min-width、

、

<code class="language-css">.parent {
  display: inline-grid;
}

.parent::before {
  content: "";
  display: inline;  
}

.parent::after {
  content: "";
  display: flex;
}</code>

、

<code class="language-html"><div class="parent">
  <div class="child"></div>
</div></code>

、または

値が要素に対して定義されている場合、そのサブエレメントのmin-width計算値は0です。 auto .child属性をどのように使用してmin-width属性を置き換えますか？ auto

要素のblock属性を定義する必要があります。 inline inline-block属性の計算値はtableです。正しいか間違っていますか？ table-* min-width

正しい。 または

値が定義されている場合、ブラウザはgap属性のすべてのmargin値を代替値に変換します。

<code class="language-css">.parent { 
  display: grid; 
  width: 100rem; 
  height: 20rem; 
}</code>

要素の属性の計算値がなぜですか？ .parent gap

または

の要素は、通常のドキュメントストリームから削除されます。したがって、親要素はそれを見ることができません。これが、属性の計算値が0である理由です。 display

次の例では、isolation属性の役割は何ですか？

<code class="language-css">:is(#container, .content, main) {
  color: red;
}</code>

<code class="language-css">.container {
  color: red;
}

:where(#container) {
  color: blue;
}</code>

z-index属性が使用されるとき、ブラウザが使用するものを積み重ねるものを覚えておく必要があります。

デフォルトでは、ルートスタッキングコンテキストはhtml要素です。これが、擬似要素がなしでisolation: isolate要素の背後にある理由です。 .parent

要素の前に表示されます。 isolation .child擬似要素の位置は何ですか？ .parent まず、まず、

、擬似要素が中央に表示されるためです。

<code class="language-css">.container {
  display: inline;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
}</code>

アプリケーションの後、および

の後、y軸に沿って親要素の下部の境界に移動します。これは、place-items: center、

、

、position: absolute属性の優先度があるためプロパティよりも高くなっています。 bottom: 0 top属性の計算値は何ですか？ right bottom left属性の優先度はplace-items属性よりも高くなりますが、その値はまた

および

属性の範囲内でなければなりません。答えは225pxです。 width

属性の計算値は何ですか？

<code class="language-html"><div class="parent">
  <div class="child"></div>
</div>
<div class="parent-flex">
  <div class="child"></div>
</div></code>

flex-basis CSSカスタム属性を使用する場合、すべての短縮部品を定義する必要があります。これを行わないと、ブラウザを使用できません。 width min-widthこれは私たちの例で起こりました。 max-width略語には4つの値が必要ですが、3つの開発者のみが定義されています。ブラウザをセットアップできません。したがって、計算値は0です。

なぜ要素のpadding属性の計算値があるのですか？

<code class="language-css">.parent {
  display: block;
}

.parent-flex {
  display: flex;
}</code>

CSSカスタム属性は、親要素によって定義された同じカスタム属性継承値からなります。カスタム属性が省略されている場合、ブラウザは返品値を使用します。

私たちの例では、親要素からpadding属性が省略されています。したがって、ブラウザは払い戻し値、つまり

キーワードを使用します。

要素の属性のキーワードは、グリーン値を継承しました。 p background-colorこの復活した出力は、元の画像のフォーマットを維持し、テキストをより簡潔で組織化した方法で提示します

以上がCSSを知っている必要があります。あなたのCSSスキルをレベルアップするための私の質問の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。