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

前の記事「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 がインライン要素で機能するかどうかを議論するには、インライン置換要素とインライン非置換要素を別々に議論する必要があります。

まず、マージンをインライン要素に適用できることを明確にする必要があります。仕様では許可されています。ただし、マージンはインラインの非置換要素に適用されるため、インライン要素には影響しません。行の高さ。実際は余白が透明なので。したがって、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 擬似クラス セレクターは、任意の無線 () を表します。チェックボックス () またはオプション ( 内の ) 要素がチェックされているかオン状態に切り替えられています。ユーザーは要素をクリックすることでこの状態を変更できます。または、別の値を選択します。その場合、:checked 疑似クラスはこの要素には適用されなくなりますが、関連する要素には適用されます。

6、Q: HTML テキストでは、疑似クラスが適用されます。 -class Class:root は常に html 要素を指しますか?

A: いいえ (答えは ==|| です)。以下は Zhihu からの抜粋です: Do root と html は CSS3 の同じ要素を参照しますか?答え: は作成されたルートのみを指します。このルートは html でなくても構いません。フラグメント html でルートが作成されない場合は、フラグメントのルートになります。データ URL をサポートするブラウザ (Firefox、Chrome、Safari、Opera) に以下の URL を入力すると、

data:application/xhtml+xml,<div xmlns="http://www.w3.org/1999/xhtml"><style>:root { background: green; } html { background: red !important; }</style></div>

7 が表示されます。 Q: translation() メソッドは、次の URL の間で要素を移動できます。 Z軸上の位置は？

#A: いいえ。 translation() メソッドは、x 軸と y 軸の変位のみを変更できます。

8. Q: 次のコードのテキスト「ソーセージ」の色は何ですか?

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

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

A: 青。

9. Q: 次のコードのテキスト「ソーセージ」の色は何ですか?

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

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

A: 青。

10. Q: 次のコードのテキスト「ソーセージ」の色は何ですか?

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

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

A: 青。

11、Q: 如下代码中文本“Sausage”的颜色是?

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

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

A: blue。

12、Q: 如下代码中文本“Sausage”的颜色是?

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

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

A: blue。

13、Q: 如下代码中文本“Sausage”的颜色是?

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

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

A: blue。

14、Q: 如下代码中文本“Sausage”的颜色是?

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>

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

A: blue。

15、Q:#example位置如何变化：

<p id="example">Hello</p>

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

A: 向上移动5px。

16、Q: #example位置如何变化：

<p id="example">Hello</p>

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

A: 向左移动5px。

17、#i-am-useless 会被浏览器加载吗？

<div id="test1">
    <span id="test2"></span>
</div>

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

A: 不会

18、mypic.jpg 会被浏览器加载吗？

<div id="test1">
    <span id="test2"></span>
</div>

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

A: 会被下载。

19、mypic.jpg 会被浏览器加载吗？

<div id="test1">
    <span id="test2"></span>
</div>

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

A: 不会被下载。

20、Q: only 选择器的作用是？

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

A：停止旧版本浏览器解析选择器的其余部分。

only 用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query 但却支持Media Type 的设备隐藏样式表的。其主要有：支持媒体特性（Media Queries）的设备，正常调用样式，此时就当only 不存在；对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备，这样就会不读了样式，因为其先读only 而不是screen；另外不支持Media Qqueries 的浏览器，不论是否支持only，样式都不会被采用。

21、Q:overfloa:hidden 是否形成新的块级格式化上下文？

<div>
    <p>I am floated</p>
    <p>So am I</p>
</div>

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

A：会形成。

会触发BFC的条件有：

• float的值不为none。

• overflow的值不为visible。

• display的值为table-cell, table-caption, inline-block 中的任何一个。

• position的值不为relative 和static。

22、Q: screen关键词是指设备物理屏幕的大小还是指浏览器的视窗？

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

A: 浏览器视窗

（学习视频分享：css视频教程）

以上がWeb フロントエンド筆記試験問題バンク CSS の章の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。