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 サイトの他の関連記事を参照してください。

関連ラベル：

css

ソース：github.io

前の記事：CSS 変数について意外と知らないこと！ 次の記事：CSS を使用してかわいい漫画のライオンのアニメーションを段階的に描画します。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事

• NullPointerException とは何ですか?どのように修正すればよいですか?
  2024-10-22 09:46:29
• 初心者からプログラマーへ: 旅は C の基礎から始まります
  2024-10-13 13:53:41
• PHP による Web 開発のロックを解除する: 初心者ガイド
  2024-10-12 12:15:51
• C の謎を解く: 新人プログラマーのための明確でシンプルな道
  2024-10-11 22:47:31
• コーディングの可能性を解き放つ: まったくの初心者のための C プログラミング
  2024-10-11 19:36:51
• 内なるプログラマーを解き放つ: まったくの初心者のための C
  2024-10-11 15:50:41
• C で生活を自動化する: 初心者向けのスクリプトとツール
  2024-10-11 15:07:41
• PHP を簡単に: Web 開発の最初のステップ
  2024-10-11 14:21:21
• Python で何でも構築: 創造性を解き放つための初心者ガイド
  2024-10-11 12:59:11
• コーディングの鍵: 初心者のための Python の力を解き放つ
  2024-10-11 12:17:31

最新の問題

CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア

から 2024-04-16 10:10:18

0

0

1335

ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...

から 2024-04-06 21:58:04

0

1

800

Javafx でインライン CSS スタイルを動的に変更する アプリケーションが最大化されているときにペインの背景画像を変更しようとしています。私の背景はインライン CSS を使用して設定されています。スタイル用に 2 つの異なる変数と if...

から 2024-04-06 20:57:16

0

1

487

CSS でフローティング要素を水平ではなく垂直にスタックするにはどうすればよいですか? 片側にメインコンテンツ、もう一方に追加コンテンツがある 2 つの列を持つ Web ページを作成しようとしています。ただし、float プロパティを使用して追加の列を左に揃えているた...

から 2024-04-06 20:45:26

0

2

386

他の CSS コードに関係なく、フレックスボックス内のテキストを強制的に垂直方向の中央に配置する方法はありますか? 開発中の Web サイトで使用されている大規模な CSS コードの一部である次の CSS コードがあります。 }.card-u{margin:20px;padding:20px;w...

から 2024-04-06 20:41:51

0

1

518

関連トピック

詳細>

• css
• CSS中心
• CSSに画像を挿入する方法
• CSSが表示を超えています...
• CSSフォントの色
• CSSとは何ですか
• CSSで三角形を書く方法
• CSSで文字の色を設定する

人気のおすすめ

• 表示楕円を超えるようにCSSを設定する方法
• CSSでフォントサイズを設定する方法
• CSSでホバーを使う方法
• CSSで文字間隔を設定する方法
• css3の新機能とは何ですか？

人気のチュートリアル

詳細>

関連するチュートリアル

人気のおすすめ

最新のコース

• 
  CSS Flexbox レイアウトで遊ぶ

  25535
• 
  レイアウトを 5G と同じくらい高速に作成: CSS Grid グリッド レイアウト

  29271
• 
  New Dugu Jiijian: CSS3 必須のコンテンツ

  27948
• 
  9日間でわかる一番わかりやすいHTML+CSS講座

  44101
• 
  CSSコード例

  167906

• 
  最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)

  1420013 回の学習
• 
  JAVA 初心者向けビデオチュートリアル

  2505415 回の学習
• 
  Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル

  505452 回の学習
• 
  Web フロントエンド開発の簡単な紹介

  215519 回の学習
• 
  PSビデオチュートリアルをゼロからマスターする

  884023 回の学習

• 
  [Web フロントエンド] Node.js クイック スタート

  6991 回の学習
• 
  海外のWeb開発フルスタックコースの完全なコレクション

  5433 回の学習
• 
  Go言語実践GraphQL

  4581 回の学習
• 
  550W ファンマスターが JavaScript をゼロから段階的に学習します

  659 回の学習
• 
  Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる

  23156 回の学習

最新のダウンロード

詳細>

ウェブエフェクト

公式サイト

サイト素材

フロントエンドテンプレート

• [フォームボタン] jQuery エンタープライズ メッセージ フォームの連絡先コード
• [プレイヤーの特殊効果] HTML5 MP3 オルゴール再生効果
• [メニューナビゲーション] HTML5 クールなパーティクル アニメーション ナビゲーション メニューの特殊効果
• [フォームボタン] jQuery ビジュアル フォームのドラッグ アンド ドロップ編集コード
• [プレイヤーの特殊効果] VUE.JS 模倣 Kugou 音楽プレーヤー コード
• [html5特殊効果] 古典的な HTML5 プッシュ ボックス ゲーム
• [画像の特殊効果] 画像効果を追加または削減するための jQuery スクロール
• [フォトアルバム効果] CSS3 個人アルバム カバー ホバー ズーム効果

• [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート
• [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート
• [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート
• [フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート
• [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します
• [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート

• [PNG素材] かわいい夏の要素のベクター素材 (EPS+PNG)
• [PNG素材] 4 つの赤い 2023 卒業バッジ ベクター素材 (AI+EPS+PNG)
• [バナー画像] 歌う鳥と花がいっぱいのカートデザイン春のバナーベクター素材（AI+EPS）
• [PNG素材] 金色の卒業帽ベクター素材（EPS+PNG）
• [PNG素材] 黒と白のスタイルの山アイコン ベクター素材 (EPS+PNG)
• [PNG素材] 異なる色のマントと異なるポーズを持つスーパーヒーローのシルエットベクター素材（EPS+PNG）
• [バナー画像] フラット スタイルの植樹祭バナー ベクター素材 (AI+EPS)
• [PNG素材] 9つのコミックスタイルの爆発するチャットバブルベクター素材（EPS+PNG）

• [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート
• [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート
• [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート
• [フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート
• [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します
• [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート

福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！

私たちについて 免責事項 Sitemap

© php.cn All rights reserved