前の記事「Web フロントエンド筆記テストの質問バンク - HTML の章」では、HTML に関するフロントエンド面接の質問をいくつか共有しました。次の記事では、前の記事に続いて、CSS パートの筆記試験問題 (解答付き) を紹介します。何問正解できるか見てみましょう。
#1. Q: CSS プロパティでは大文字と小文字が区別されますか?
``` ul { MaRGin: 10px; } ```
ログイン後にコピー
A: 区別はありません。 HTML と CSS は大文字と小文字を区別しませんが、読みやすさとチームの共同作業を容易にするために、通常は小文字にします。XHTML では、要素名と属性は小文字にする必要があります。
2. Q: インライン要素の margin-top と margin-bottom の設定は機能しますか?
#A: 機能しません。 （答えは「動く」ですが、個人的には違うと思っています。）
html内の要素は、置換される要素と置換されない要素に分かれています。
#置換要素は、他のコンテンツのプレースホルダーとして使用される要素です。最も一般的なのは img で、画像ファイルを指すだけです。また、入力などのほとんどのフォーム要素も置き換えられます。
まず、マージンをインライン要素に適用できることを明確にする必要があります。仕様では許可されています。ただし、マージンはインラインの非置換要素に適用されるため、インライン要素には影響しません。行の高さ。実際は余白が透明なので。したがって、margin-top と margin-bottom の宣言には視覚的な効果はありません。その理由は、インラインの非置換要素のマージンによって要素の行の高さが変更されないためです。これは、インラインの非置換要素の左右のマージンには当てはまらず、影響があります。
置換された要素に設定されたマージンは行の高さに影響し、上下のマージンの値に応じて行の高さが増減する場合があります。インライン置換要素の左マージンと右マージンは、非置換要素の左マージンと右マージンと同じ効果があります。デモを見てみましょう:
http://codepen.io/paddingme/pen/JwCDF
3. Q: padding-top と padding を設定することは可能ですか?インライン要素の -bottom? 高さは増加しますか?
（元の質問は、インライン要素にpadding-topとpadding-bottomを設定すると、その寸法が追加されますか？）
A: 答えはノーです。同じ質問について少し混乱しています。ここでの寸法の意味がよくわかりません。それは脇に置いて、分析してみましょう。インライン要素の場合、左右のパディングを設定すると、左右のパディングが表示されます。上下のパディングを設定する場合、背景色を設定した後にパディング領域が増加することがわかります。インライン非置換要素の場合、行の高さは影響を受けず、親要素は引き伸ばされません。置換された要素の場合、親要素が展開されます。理解を深めるためにデモをご覧ください:
http://codepen.io/paddingme/pen/CnFpa
4. Q: p のフォント サイズを設定します。 : 10rem 、ユーザーがブラウザ ウィンドウをリセットまたはドラッグすると、テキスト サイズは変わりますか?
#A: いいえ。
rem は、HTML ルート要素の font-size のサイズに基づく相対的な測定単位です。ウィンドウのサイズが変わっても、テキストのサイズは変わりません。
5. Q: 疑似クラス セレクター: チェックすると、ラジオまたはチェックボックスの入力タイプに作用し、オプションには作用しません。
#A: いいえ。checked 擬似クラス セレクターの定義は明らかです:
:checked CSS 擬似クラス セレクターは、任意の無線 (
) を表します。チェックボックス (
) またはオプション (
