CSS に関する面接での質問

この記事は主に CSS に関するインタビューの質問を共有するものであり、非常に参考になるものです。編集者をフォローして見てみましょう。

1 上下のマージンの重なりの問題

重なり合う要素の周囲にコンテナをラップし、コンテナをトリガーして BFC を生成します。
例:

<p class="aside"></p>
<p class="text">
    <p class="main"></p>
</p>
<!--下面是css代码-->
 .aside {
            margin-bottom: 100px;  
            width: 100px;
            height: 150px;
            background: #f66;
        }
        .main {
            margin-top: 100px;
            height: 200px;
            background: #fcc;
        }
         .text{
            /*盒子main的外面包一个p，通过改变此p的属性使两个盒子分属于两个不同的BFC，以此来阻止margin重叠*/
            overflow: hidden;  //此时已经触发了BFC属性。
        }

トピックの推奨事項: 2020年CSS面接質問まとめ(最新)

2 要素をfloatに設定した後、要素の表示値は何ですか?

は自動的にdisplay:blockに変更されます

3 モバイルレイアウトにメディアクエリを使用したことがありますか?

メディアクエリを通じて、異なるサイズや寸法のメディアに異なるCSSを定義して、対応するデバイスのディスプレイに適応させることができます。

1. 93f0f5c25f18dab9d176bd4f6de5d30eInside06b18d9ec798583621af1e89486196de代码全部写在一排

2. 浮动li中float：left

3. 在ul中用font-size：0（谷歌不支持）；可以使用letter-space：-3px

20 display:inline-block 什么时候会显示间隙？

1. 有空格时候会有间隙 解决：移除空格

2. マージンが正の場合の解決策: margin に負の値を使用します

3. font-size を使用する場合の解決策: font-size:0、letter-spacing、word-spacing

21 はい高さ適応型の p 。内部に 2 つの ps があり、1 つは高さ 100px で、もう 1 つは残りの高さを埋めることが期待されます

外側の p は、position:relative を使用し、適応高さの要件を持つ p は、position:absolute を使用します。 ; 上: 100px; 下: 0; 左: 0

22 これらの画像形式と、それらを使用する場合について説明します。 WebP について学んだことがありますか?

1. png は、可逆データ圧縮ビットマップ ファイル形式であるポータブル ネットワーク グラフィックスであり、その利点は、高い圧縮率と優れた色です。 ほとんどの場所でご利用いただけます。

2. jpg は、写真に使用される歪み圧縮方法で、トーンと色の滑らかな変化に優れた効果を発揮します。 www で写真を保存および送信するために使用される形式。

3. gif は、8 ビット カラーの True Color 画像を再現するビットマップ ファイル形式です。アニメーション効果を実現できます

4. webp 形式は、2010 年に Google によって開始された画像形式です。圧縮率は jpg のわずか 2/3 で、サイズは png より 45% 小さくなります。デメリットとしては、圧縮に時間がかかることと、現時点ではGoogleとOperaが対応していることです。

23 ボディの後に書かれるスタイルタグとボディの前に書かれるスタイルタグの違いは何ですか？

もちろん、ページは上から下に読み込まれます。
body タグの後に記述されます。ブラウザは HTML ドキュメントを 1 行ずつ解析するため、最後に記述されたスタイル シート (アウトラインまたはスタイル タグ内に記述されたもの) を解析すると、ブラウザは前のレンダリングを停止し、読み込みと解析を待機します。 . スタイルシートが再レンダリングされた後、Windows IE で FOUC 現象が発生する可能性があります (つまり、スタイルの失敗によって引き起こされるページのちらつきの問題)

24 CSS 属性オーバーフロー属性は、コンテンツ領域のコンテンツの処理方法を定義します。オーバーフロー要素の?

パラメータがscrollの場合、必ずスクロールバーが表示されます。
パラメータがautoの場合、子要素の内容が親要素より大きい場合にスクロールバーが表示されます。
パラメータが表示されると、オーバーフローコンテンツが親要素の外側に表示されます。
パラメータを非表示にすると、オーバーフローも非表示になります。

25 CSS スプライトについて説明します

ページに含まれるすべての画像を 1 つの大きな画像に含めて、CSS の背景画像、背景繰り返し、背景位置の組み合わせを使用します。 CSS スプライトを使用すると、Web ページの http リクエストが大幅に削減され、ページのパフォーマンスが大幅に向上し、画像のバイト数が削減されます。

関連チュートリアルの推奨事項: CSS ビデオチュートリアル

以上がCSS に関する面接での質問の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。