もちろん、平均はそれほど興味深いものではありません。 さらに興味深いのは、訪問者の大半が「眠りに落ちた」という質問です。 この記事では、最もよく間違われた3つの問題について説明します。
質問1：行の高さを設定する最良の方法は何ですか？
この質問は、常にテキストを扱う人にとっては簡単なものでなければなりません。
サイト全体に二重の間隔を設定する場合、この目的に最適な行の高さの値は次のうちどれですか？
-200％;
-2em;
-2;
-ダブル;
この質問に正しく答えたのは31％だけでした。 しばらく立ち止まって、自分で答えを選んでください。
まず、 ダブルは注意散漫です。 私はそれを選んだ人はたったの9％だと言ってうれしいです。 他の3つの答えは非常に人気がありました。
ほとんどの人が選んだ答えは2em （39％）です。 確かに、 2emはそれが適用される要素に2倍のスペースを確実に与えますが、200％の値は同じことをしますが、この答えを気に入ったのは21％だけです！
ただし、正しい答えは値2（オプション番号3）です。
これは、CSSを学び始めたばかりの昔に学んだ教訓です。 常にline-heightを無次元数として指定します ; したがって、異なるフォントサイズを使用する子は、固定の行の高さではなく、この数値を継承します。
ページのフォントサイズは12ptですが、フォントサイズが24ptのヘッダーも含まれているとします。 行の高さを設定した場合：2em; （または200％）、文書全体で24 pt（デフォルトサイズの2倍）の行の高さを取得します。 したがって、タイトルは1つの間隔で表示されます。
行の高さ：2 ; フォントサイズが変更された場合でも、フォントサイズと行の高さの比率を1：2に保つようブラウザに指示します。
質問2：重複する要素
この質問はもう少し複雑でした。 ダーティトリックの使用にはある程度の経験が必要です。
単独で使用される次のCSSプロパティのどれが要素をオーバーラップさせることができますか？
-z-index;
-マージン;
-オーバーフロー;
-背景;
答えを選びますか？
当然、すぐに背景を一掃できます 。 テスト参加者の2％だけが正しい答えとしてそれを示しました。
残念ながら、回答者の大半はz-indexを選択しました。 46％の人が彼を好みました。 おそらく彼らは質問を誤解しているか、単にz-indexがどのように機能するかを理解していないのでしょう。 このプロパティ自体は効果がありませんが、このプロパティを別の要素に指定し、各要素の位置を設定する必要がある場合を除きます。 つまり、Zインデックスを使用すると、重複する要素の順序を制御できますが、まず最初に重複する必要があります。
このプロパティを少なくとも数回使用した場合、 オーバーフローはオプションのリストから単純に除外されます。 コンテナ内に収まらないコンテンツの動作を定義します。 要素の動作は、コンテナのサイズと他のプロパティの値に依存します。 繰り返しますが、このプロパティ自体は重複しません。 しかし、何らかの形で、22％が彼を選んだ。
その結果、1つの答え、つまり「 マージン 」が残っています。 エレメントの端からのインデントを制御するプロパティが重複する可能性があることは、奇妙に思えるかもしれません。 答えは簡単です。これには負の値を使用する必要があります。
負のフィールドは、HTML要素を配置するのに非常に役立ちます。
質問3：擬似要素と擬似クラス
最後の質問は少し注意が必要です。
擬似要素を使用して実装されている効果は次のうちどれですか？
-ホバー時に表示されるハイパーリンクに影を追加します。
-チェックボックス要素の選択時に色を変更します。
-テーブルの偶数行と奇数行を異なる色で着色します。
-レスポンシブページの段落の最初の行を常に太字で表示します。
これらの効果のうち3つは、擬似クラスを使用して実現されます。 擬似要素を使用する必要があるのは1つだけです。 どれがわかりますか？
疑似クラスは、要素が最終的に到達できる特定の状態です。 特定の条件下で要素に自動的に適用されるクラスと考えてください。
擬似要素は、実際にはHTML要素ではなくても、CSSでスタイルを使用できるドキュメントの一部です。 これは、HTMLタグで囲まれていませんが、スタイルを作成できる仮想HTML要素のようなものです。
この違いを考えて、正しい答えを見つけてみましょう。
ホバーしたときに表示されるハイパーリンクに影を追加します
ハイパーリンクは既存のHTML要素です。 特定の状況（ポインターがその上にある場合）でのみスタイルを適用するということは、疑似クラスを使用することを意味します。 この場合に使用できる疑似クラス::ホバー。
テスト参加者の22％は、擬似要素であると考えました。
チェックボックス要素の選択時に色を変更する
繰り返しますが、チェックボックスは仮想ではなく、既存のHTML要素です。 チェックボックスがチェックされると、ブラウザはそれに疑似クラス：チェックを適用します。
テスト参加者の20％は、それが疑似要素であると考えました。
偶数と奇数のテーブル行を異なる色で色付けする
これは私たちが本当に人をだましたものですが、実際のHTML要素にスタイルを適用することについてはまだ話しているところです。 TRには奇数と偶数の両方が存在し、それらの状態（偶数/奇数）に応じてスタイルを適用します。
使用：偶数にはnth-child（even）（または：nth-child（2n））、奇数にはnth-child（odd）（または：nth-child（2n + 1））を使用します。
参加者の36％がこのオプションを選択したのは、nth-childおよびpseudo-elementsがかなりあいまいなCSS機能だからだと思います。
レスポンシブページの最初の段落行を常に太字で表示する
擬似クラスと擬似要素の違いを思い出しましょう。
アダプティブレイアウトでは、この要素に最初の行が含まれていると明確に言うことはできません。 その内容は、ビューポートの幅によって異なります。
：first-line-終了位置に関係なく、ブロック内のテキストの最初の行にスタイルを適用できるようにする擬似要素。
Habré読者向けの便利なPaystoソリューション：