Web フロントエンド筆記試験問題バンク CSS の章

前の記事「Web フロントエンド筆記テストの質問バンク - HTML の章」では、HTML に関するフロントエンド面接の質問をいくつか共有しました。次の記事では、前の記事に続いて、CSS パートの筆記試験問題 (解答付き) を紹介します。何問正解できるか見てみましょう。

#1. Q: CSS プロパティでは大文字と小文字が区別されますか?

 ```
 ul {
     MaRGin: 10px;
 }
 ```

A: 区別はありません。 HTML と CSS は大文字と小文字を区別しませんが、読みやすさとチームの共同作業を容易にするために、通常は小文字にします。XHTML では、要素名と属性は小文字にする必要があります。

2. Q: インライン要素の margin-top と margin-bottom の設定は機能しますか?

#置換要素は、他のコンテンツのプレースホルダーとして使用される要素です。最も一般的なのは img で、画像ファイルを指すだけです。また、入力などのほとんどのフォーム要素も置き換えられます。
非置換要素とは、コンテンツがドキュメントに含まれる要素を指します。たとえば、段落のテキスト コンテンツが要素自体の中に配置されている場合、その段落は非置換要素です。
margin-top と margin-bottom がインライン要素で機能するかどうかを議論するには、インライン置換要素とインライン非置換要素を別々に議論する必要があります。

まず、マージンをインライン要素に適用できることを明確にする必要があります。仕様では許可されています。ただし、マージンはインラインの非置換要素に適用されるため、インライン要素には影響しません。行の高さ。実際は余白が透明なので。したがって、margin-top と margin-bottom の宣言には視覚的な効果はありません。その理由は、インラインの非置換要素のマージンによって要素の行の高さが変更されないためです。これは、インラインの非置換要素の左右のマージンには当てはまらず、影響があります。

置換された要素に設定されたマージンは行の高さに影響し、上下のマージンの値に応じて行の高さが増減する場合があります。インライン置換要素の左マージンと右マージンは、非置換要素の左マージンと右マージンと同じ効果があります。デモを見てみましょう:

http://codepen.io/paddingme/pen/JwCDF

（元の質問は、インライン要素にpadding-topとpadding-bottomを設定すると、その寸法が追加されますか？）

A: 答えはノーです。同じ質問について少し混乱しています。ここでの寸法の意味がよくわかりません。それは脇に置いて、分析してみましょう。インライン要素の場合、左右のパディングを設定すると、左右のパディングが表示されます。上下のパディングを設定する場合、背景色を設定した後にパディング領域が増加することがわかります。インライン非置換要素の場合、行の高さは影響を受けず、親要素は引き伸ばされません。置換された要素の場合、親要素が展開されます。理解を深めるためにデモをご覧ください:

http://codepen.io/paddingme/pen/CnFpa

#A: いいえ。

5. Q: 疑似クラス セレクター: チェックすると、ラジオまたはチェックボックスの入力タイプに作用し、オプションには作用しません。

#A: いいえ。 checked 擬似クラス セレクターの定義は明らかです:

data:application/xhtml+xml,

    
Milk
    
Sausage

ul {color:red;}
li {color:blue;}

    
Milk
    
Sausage

ul {color:red;}
#must-buy {color:blue;}

    
Milk
    
Sausage

.shopping-list .favorite {
    color: red;
}
#must-buy {
    color: blue;
}

    
Milk
    
Sausage

ul#awesome {
    color: red;
}
ul.shopping-list li.favorite span {
    color: blue;
}

    
Milk
    
Sausage

ul#awesome #must-buy {
    color: red;
}
.favorite span {
    color: blue!important;
}

    
Milk
    
Sausage

ul.shopping-list li .highlight {
    color: red;
}
ul.shopping-list li .highlight:nth-of-type(odd) {
    color: blue;
}

    
Milk
    
Sausage

#awesome .favorite:not(#awesome) .highlight {
    color: red;
}
#awesome .highlight:nth-of-type(1):nth-last-of-type(1) {
    color: blue;
}

Hello

#example {margin-bottom: -5px;}

Hello

#example {margin-left: -5px;}

#i-am-useless {background-image: url('mypic.jpg');}

#test2 {
    background-image: url('mypic.jpg');
    display: none;
}

#test1 {
    display: none;
}
#test2 {
    background-image: url('mypic.jpg');
    visibility: hidden;
}

@media only screen and (max-width: 1024px) {argin: 0;}

    
I am floated
    
So am I

div {overflow: hidden;}
p {float: left;}

@media only screen and (max-width: 1024px) {margin: 0;}