私の一番上のCSS質問

12436 ワード

Q .親要素に次のように設定できますかa エレメント受信フォーカス?

<div class="parent">
  <a href="https://dev.to">Some text</a>
</div>

アンサー
私たちは:focus-within 擬似クラスは、フォーカスを受信した要素を持つ親要素をスタイルします.

.parent:focus-within {
  outline: 2px solid purple;
  outline-offset: 5px;
}

Q .次のコードが有効ですか?trueまたはfalse?

.parent {
  background-position: right 8px top;
}

アンサー
本当です.我々は2つの方法を使用してエッジからオフセットを設定することができます.
最初の方法は3値構文です.つの値がキーワード値で、3番目が前の値のオフセットです.

.parent {
  background-position: right 8px top;
}

/* or */

.parent {
  background-position: right top 5px;
}

つ目の方法は4値構文です.第1および第3の値はxとyを定義するキーワード値です.2番目と4番目の値は前のxとyのキーワード値のオフセットです.

.parent {
  background-position: right 8px top 5px;
}

Q .次のコードを書き換える方法はありますかbackground-color 値はcolor 値を変更する?

.link {
  color: #222;
}

.link::before {
  background-color: #222;
}

アンサー
はい.The currentColor key要素の値を表すcolor プロパティ.この例では、.link 要素.

.link {
  color: #222;
}

.link::before {
  background-color: currentColor;
}

Q . Calc ()関数の目標は何ですか?
アンサー
calc ()関数は、加算(+)、減算(-)、乗算(*)、除算(/)の数式を使用します.
Q .のピクセルの計算値ですpadding プロパティの例です.

.button {
  font-size: 16px;
  padding: 0.5em;
}

アンサー
16を0.5倍してください.ピクセルで計算された値として8 pxを取得します.
Q .次の例ではpadding-left プロパティには10 Vwの値があります.ユーザーが480 x 320 pxディスプレイでデバイスを使用してウェブサイトを訪問する場合、PXの計算値は?

.parent {
  padding-left: 10vw;
}

アンサー
ビューポート幅(VW)は、フルビューポート幅のパーセンテージです.10 Vwは現在のビューポート幅の10 %に解決します.我々のケースでは、それは480 pxです.10 vwは48 pxである.しかし、ユーザーがデバイスを回転させるなら、ViewPort幅が320 pxであるので、それは32 pxです.
Q.child 要素は、次の例の列に表示されます.trueまたはfalse?

<body>
  <div class="child">element 1</div>
  <div class="child">element 2</div>
</body>

アンサー
本当です.The .child 要素はブロックレベルの要素です.これらの型の要素は、デフォルトで列に表示されます.
これはwidth 計算値.child エレメント?

<body>
  <div class="parent">
    <div class="child">child element</div>
  </div>
</body>

.parent {
  width: 1000px;
}

アンサー
The .child 要素はブロックレベル要素です.したがって、幅は、それがあるならば、親要素の上で左右の水平なスペースを埋めます.それで.子要素の幅は計算された値が1000 pxである.
Q.child 要素は次の例の行に表示されます.trueまたはfalse?

<body>
  <span class="child">element 1</span>
  <span class="child">element 2</span>
</body>

アンサー
本当です.スペースがあるならば、スパン要素は同じ線にあります.スペースがない場合、ブラウザは新しい行の要素を移動します.
Q . 196 pxはwidth and height 計算値.child 要素.trueまたはfalse?

<body>
  <span class="child">element</span>
</body>

.child {
  width: 196px;
  height: 196px;
}

アンサー
偽だからwidth and height インライン要素のプロパティは、コンテンツの量に応じて計算されます.
問.display 計算値.child 以下の例の要素ですか?

.child {
  display: inline-block;
  position: absolute;
}

アンサー
、position: absolute the display プロパティはblock 値.So display: inline-block は無視される.
Qheight 計算値.parent 要素は0です.偽りの真実?

<body>
  <div class="parent">
    <div class="child">some content</div>
  </div>
</body>

.child {
  position: absolute;
}

アンサー
本当です.絶対位置の要素は、通常のドキュメントフローから削除されます.例では.parent が絶対位置にある子要素だけを持つ.親の高さは0です.
問.display 計算値.child 以下の例の要素ですか?

.child {
  display: inline-block;
  position: relative;
}

アンサー
、position: relative ブラウザーは、変化しませんdisplay 計算値.だからdisplay 計算値inline-block .
Qdisplay 計算値.child 要素はinline-block . 偽りの真実?

<div class="parent">
  <span class="child">some content</span>
</div>

.parent {
  display: flex;
}

.child {
  display: inline-block;
}

アンサー
false.フレックスコンテナの中のすべての子要素は常にブロックフィールドです.だから計算display 値.child is block .
何ですかwidth 計算値.child 以下の例の要素ですか?

<div class="parent">
  <span class="child">some content</span>
</div>


.parent {
  display: flex;
}

.child {
  flex-basis: 250px;
  width: 100px;
  height: 200px;
  min-width: 150px;
  max-width: 225px;
}

アンサー
225 pxThe flex-basis プロパティはwidth and height プロパティ.また、値の値はmin-width ( 100 px )max-width (225 Px)特性我々の場合、250 pxmax-width 値( 225 px ).それで、それは225 pxによって制限されます.
ピーエス
❤ 私のスポンサーに感謝します:ベンRinehart、Sergio Kagiema、ジェシーウィラード、Tanyaテン、Konstantinos Kapenekais、Spiridon Konofaos.
💪 Get more things from me

Reference

この問題について(私の一番上のCSS質問), 我々は、より多くの情報をここで見つけました https://dev.to/melnik909/my-top-css-questions-with-detailed-answers-l74

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

Activityユニットテストエラー

Activityのfinish()メソッドの上書き