CSS 面接での 7 つの重要な質問

＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃目次＃＃＃＃＃＃＃＃＃＃＃ #1. CSS3のボックスモデル

2. display:noneとvisibility:hiddenの違い 4.位置の属性値は何ですか?

5.PNG、GIF、JPG、WEBP の違いと選び方は何ですか?

6. CSS セレクターとは何ですか?優先度？

7. フローティング関連

(1) フローティングをクリアする必要があるのはいつですか?
• (2) フロートをクリアするにはどうすればよいですか?
• 特別な推奨事項
:
• 2020 CSS 面接の質問の概要 (最新)
• ##1. CSS3 のボックス モデル
##CSS3 には、標準ボックス モデルと IE ボックス モデルの 2 種類のボックス モデルがあります

#標準ボックス モデルと IE ボックス モデルの違いは次のとおりです。標準ボックス モデルの幅と高さはコンテンツの幅と高さを指しますが、コンテンツの幅と高さはコンテンツの幅と高さを指します。 IE ボックス モデルは、パディングとボーダーの合計であるコンテンツを参照します。

CSS3 では、box-sizing:border-box を使用して、通常のボックス モデルを IE ボックス モデルに変換できます。ボックスの幅と高さを設定することがありますが、

border

を変更してボックスのサイズを変更したい場合は、変更せずに IE ボックス モデルに変換できます。毎回、ボックスの中身のサイズを計算します。

ボックス モデル内

box-sizing:content-box

標準のボックス モデルを表します (デフォルト値)

• box-sizing:border-box

  IE ボックス モデル (つまり、奇妙なボックス モデル) を表します

• さらに、 :Flex Flexible Box Model

• ##2. display:none と Visibility:hidden

  の違いは、これら 2 つの属性により、要素を非表示にします
  • 違い:
  • (1)レンダリング ツリー内で
display:none

を作成します。要素はレンダリング ツリーから完全に消え、レンダリング時にスペースを占有しません。

visibility:hidden

によって要素がレンダリング ツリーから消えることはなく、レンダリングされた要素はそのまま残ります。対応するスペースを占有します。スペースはありますが、コンテンツは表示されません

(2) 継承

display:none

は非継承属性ですとなり、その子孫ノードは親ノードに従います。レンダリング ツリーから消えてしまい、子孫ノードのプロパティを変更しても表示できなくなります。

visibility:hidden

は継承された属性です。子孫ノードは

hidden

を継承するため消えます。
• visibility:visible を設定すると、子孫ノードは消えます。表示できます。
• (3) 通常のドキュメント フロー内の要素の display を変更すると、通常、ドキュメントが再配置されますが、
visibility

属性を変更すると、要素が再描画されるようにするだけです

(4) スクリーン リーダーが使用されている場合、

display:none
• に設定されたコンテンツは読み取られず、visibility に設定されたコンテンツは読み取られません。 :hidden が読み取られます。
visibility:hidden
• 3. CSS スプライトについて話しましょう コンセプト:

スプライトは、複数の小さな画像をつなぎ合わせたものです使用する際は、

background-position要素のサイズで表示する背景パターンを調整してください。 利点:

HTTP リクエストの数を減らし、ページの読み込み速度をある程度向上させますサイズを削減します各画像にはヘッダー情報があるため、複数の画像をまとめると、同じヘッダー情報が共有され、画像のバイト数が減ります。 スタイルを変更すると便利です。画像を 1 つまたは複数追加するだけで、画像の色やスタイルを変更することで、Web ページ全体のスタイルを変更できます。

画像に名前を付ける手間が軽減され、1 つまたは複数の画像に名前を付けるだけです。

欠点:

• メンテナンスが面倒です。ページの背景が少し変わると、結合した画像全体を修正する必要があります。
• 結合が面倒です。複数の画像を順番に 1 つの画像に結合する必要があります。不必要な背景を防ぐために、一定量のスペースも確保する必要があります。
• ワイドスクリーンまたは高解像度の画面下のアダプティブ ページでは、画像の幅が十分でない場合、背景が壊れる可能性があります

4. 位置の属性値とは何ですか?

#属性値概要##absoluterelativefixedstatic#inheritposition 属性の値が親要素から継承されることを指定します#5.PNG、GIF、JPG、WEBP の違いと選び方は何ですか?

絶対的に生成配置された要素は、静的配置以外の親要素に対して相対的に配置されます。
元の位置を基準にして相対的に配置された要素を生成します
ブラウザ ウィンドウを基準にして絶対配置された要素を生成します
デフォルト値、配置なし、要素通常のドキュメント フローに表示されます

(1)GIF

GIF 画像は 8 ビット インデックスのみを保存し、最大 256 色をサポートします。

は可逆圧縮を使用し、サイズが小さくなります
• 透明でシンプルなアニメーションをサポート
• 次の用途に適しています:シンプルな色のロゴ、アイコン、ワイヤーフレーム、シンプルなアニメーション

(2)JPG

非可逆圧縮を使用すると、圧縮の品質を制御できます

直接色、豊富な色を使用します

• 透明度はサポートしません
• # #適用対象
• : カラフルな画像、グラデーション画像

(3) PNG

png-8 は可逆圧縮を使用し、8 ビットのインデックスに基づくビットマップ形式です。 GIF は、同じ品質で透明性と小さいサイズのサポートが優れていますが、アニメーションはサポートしていません。アイコン、背景、ボタンに適しています。

png-24 は、可逆圧縮を採用した直接カラーベースのビットマップ形式で、上記に比べサイズは大きくなりますが、画質が高く、ソースファイルや画像形式を必要とするファイルの保存に適しています。二次編集。

• (4)WEBP
• Google が開発、サイズは小さい

非可逆圧縮と可逆圧縮をサポート

透明性をサポートし、アニメーション
• 適用先
: webpをサポートするアプリまたはWebページ

形式##利点

欠点該当するシナリオ256 色のみをサポートロゴ、アイコン、アニメーション用のシンプルな色カラフルな画像/グラデーション画像#アニメーションはサポートされていません。カラフルな画像はサイズが大きくなります。#webp #webp 形式のアプリと Web ビューをサポート6. CSS セレクターとは何ですか?優先度？ ##タグセレクター

		gif	ファイルサイズが小さい、アニメーション、透明性をサポート、互換性なし 問題
	jpg	豊富な色、ファイルは小さい	非可逆圧縮、画像の保存を繰り返すと明らかに品質が低下します
	png	可逆圧縮、透明性のサポート、単純な画像はサイズが小さいです。	#ロゴ/アイコン/透明画像
小さなファイル、非可逆圧縮と可逆圧縮をサポート、アニメーションと透明性をサポート	ブラウザの互換性は良くありません
	#セレクター	形式

p

##クラス セレクター##id ​​セレクター#myid隣接兄弟セレクターh1 p子セレクターul>li子孫セレクターli aワイルドカード セレクター*属性セレクターa [ref="eee"]疑似クラス セレクターli:last-child

別の要素の直後にある要素を選択する必要があり、両方の要素が同じ親要素を持つ場合は、隣接する兄弟セレクターを使用できます。たとえば、 h1 要素の場合、次のように記述できます:

h1 + p {margin-top:50px;}

セレクターの 優先度については :

• 要素セレクター: 1
• クラス セレクター: 10
• id ​​セレクター: 100
• 要素タグ: 1000

次の点に注意してください:

• !重要な宣言されたスタイル最も高い優先順位
• 優先順位が同じ場合、最後に表示されたスタイルが有効になります
• 継承されたスタイルの優先順位が最も低くなります

属性の継承:

• 継承可能な属性: font-size、font-family、color
• 継承できないスタイル: border、padding、margin、width、height

7.フローティング関連の

要素をフロートに設定すると、表示は自動的にブロックになります。

(1) フロートをクリアする必要があるのはいつですか?

フローティングによって引き起こされる問題は次のとおりです:

• 親要素の高さを拡張できないため、親と同じレベルの要素に影響します
• フローティング要素と同じレベルの非レベル要素 フローティング要素がそれに続きます
• 要素がフローティングの場合、その前の要素もフローティングにする必要があります。そうしないと、ページの構造に影響します

(2) フロートをクリアするにはどうすればよいですか?

フロートをクリアする方法は次のとおりです。

• 親 p の height 属性を定義します。
• フロートの後に空の p を追加します。最後のフローティング要素タグを追加し、clear:both style
• フローティング要素を含む親タグに overflow:hidden または overflow:auto を追加します。 ＃＃＃ ＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃目次＃＃＃＃＃＃＃＃＃＃＃＃
1 . CSS3のボックスモデル

2. display:noneとvisibility:hiddenの違い

5.PNG、GIF、JPG、WEBP の違いと選び方は何ですか?

6. CSS セレクターとは何ですか?優先度？

7. フローティング関連

(1) フローティングをクリアする必要があるのはいつですか?
• (2) フロートをクリアするにはどうすればよいですか?
• #1. CSS3 のボックス モデル
• CSS3 のボックス モデルには、標準ボックス モデルと IE ボックス モデルの 2 種類があります
• • 標準ボックス モデルと IE ボックス モデルの違いは次のとおりです。標準ボックス モデルの幅と高さについては、コンテンツの幅と高さ: IE ボックス モデルの幅と高さは、コンテンツ、パディング、境界線の合計を指します。
CSS3 では、

box-sizing:border-box

を使用して、通常のボックス モデルを IE ボックス モデルに変換できます。ボックスの幅と高さを設定することがありますが、

border

を変更してボックスのサイズを変更したい場合は、変更せずに IE ボックス モデルに変換できます。毎回、ボックスの中身のサイズを計算します。

ボックス モデル内

• box-sizing:content-box

  標準のボックス モデルを表します (デフォルト値)

• box-sizing:border-box

  IE ボックス モデル (つまり、奇妙なボックス モデル) を表します

  さらに、 :
Flex Flexible Box Model

• • ##2. display:none と Visibility:hidden の違いは、これら 2 つの属性により、要素を非表示にします
  • 違い:
  (1)レンダリング ツリー内で

display:none を作成します。要素はレンダリング ツリーから完全に消え、レンダリング時にスペースを占有しません。

visibility:hidden

によって要素がレンダリング ツリーから消えることはなく、レンダリングされた要素はそのまま残ります。対応するスペースを占有します。スペースはありますが、コンテンツは表示されません

(2) 継承

display:none

は非継承属性ですとなり、その子孫ノードは親ノードに従います。レンダリング ツリーから消えてしまい、子孫ノードのプロパティを変更しても表示できなくなります。

visibility:hidden
• は継承された属性です。子孫ノードは hidden を継承するため消えます。
visibility:visible
• を設定すると、子孫ノードは消えます。表示できます。
(3) 通常のドキュメント フロー内の要素の

display

を変更すると、通常、ドキュメントが再配置されますが、

visibility

属性を変更すると、要素が再描画されるようにするだけです
• (4) スクリーン リーダーが使用されている場合、display:none
に設定されたコンテンツは読み取られず、
• visibility に設定されたコンテンツは読み取られません。 :hidden が読み取られます。 visibility:hidden3. CSS スプライトについて話しましょう

コンセプト:

<p>精灵图就是将多个小图片拼接在一个图片中，使用的时候通过<code>background-position元素尺寸调节需要显示的背景图案。

优点：

• 减少HTTP请求数，在一定程度上提高了页面的加载速度
• 减少图片的体积，因为每个图片都有一个头信息，把多个图片放在一起，会共用一个头信息，较少了图片的字节数
• 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。
• 减少了图片命名的困扰，只要给一张或几张图片命名即可

缺点：

• メンテナンスが面倒です。ページの背景が少し変わると、結合した画像全体を修正する必要があります。
• 結合が面倒です。複数の画像を順番に 1 つの画像に結合する必要があります。不必要な背景を防ぐために、一定量のスペースも確保する必要があります。
• ワイドスクリーンまたは高解像度の画面下のアダプティブ ページでは、画像の幅が十分でない場合、背景が壊れる可能性があります

4. 位置の属性値とは何ですか?

#myclassname

#属性値概要##absoluterelativefixedstatic#inheritposition 属性の値が親要素から継承されることを指定します#5.PNG、GIF、JPG、WEBP の違いと選び方は何ですか?

絶対的に生成配置された要素は、静的配置以外の親要素に対して相対的に配置されます。
元の位置を基準にして相対的に配置された要素を生成します
ブラウザ ウィンドウを基準にして絶対配置された要素を生成します
デフォルト値、配置なし、要素通常のドキュメント フローに表示されます

(1)GIF

GIF 画像は 8 ビット インデックスのみを保存し、最大 256 色をサポートします。

は可逆圧縮を使用し、サイズが小さくなります
• 透明でシンプルなアニメーションをサポート
• 次の用途に適しています:シンプルな色のロゴ、アイコン、ワイヤーフレーム、シンプルなアニメーション

(2)JPG

非可逆圧縮を使用すると、圧縮の品質を制御できます

直接色、豊富な色を使用します

• 透明度はサポートしません
• # #適用対象
• : カラフルな画像、グラデーション画像

(3) PNG

png-8 は可逆圧縮を使用し、8 ビットのインデックスに基づくビットマップ形式です。 GIF は、同じ品質で透明性と小さいサイズのサポートが優れていますが、アニメーションはサポートしていません。アイコン、背景、ボタンに適しています。

png-24 は、可逆圧縮を採用した直接カラーベースのビットマップ形式で、上記に比べサイズは大きくなりますが、画質が高く、ソースファイルや画像形式を必要とするファイルの保存に適しています。二次編集。

• (4)WEBP
• Google が開発、サイズは小さい

非可逆圧縮と可逆圧縮をサポート

透明性をサポートし、アニメーション
• 適用先
: webpをサポートするアプリまたはWebページ

形式##利点

欠点該当するシナリオ256 色のみをサポートロゴ、アイコン、アニメーション用のシンプルな色カラフルな画像/グラデーション画像#アニメーションはサポートされていません。カラフルな画像はサイズが大きくなります。#webp #webp 形式のアプリと Web ビューをサポート6. CSS セレクターとは何ですか?優先度？ ##タグセレクター

		gif	ファイルサイズが小さい、アニメーション、透明性をサポート、互換性なし 問題
	jpg	豊富な色、ファイルは小さい	非可逆圧縮、画像の保存を繰り返すと明らかに品質が低下します
	png	可逆圧縮、透明性のサポート、単純な画像はサイズが小さいです。	#ロゴ/アイコン/透明画像
小さなファイル、非可逆圧縮と可逆圧縮をサポート、アニメーションと透明性をサポート	ブラウザの互換性は良くありません
	#セレクター	形式

p

##クラス セレクター##id ​​セレクター#myid隣接兄弟セレクターh1 p子セレクターul>li子孫セレクターli aワイルドカード セレクター*属性セレクターa [ref="eee"]疑似クラス セレクターli:last-child

別の要素の直後にある要素を選択する必要があり、両方の要素が同じ親要素を持つ場合は、隣接する兄弟セレクターを使用できます。たとえば、次の要素の直後に表示される段落の上マージンを増やしたい場合です。 h1 要素の場合、次のように記述できます。

h1 + p {margin-top:50px;}

セレクターの 優先度については、:

• 要素セレクター: 1
• クラス セレクター: 10
• id ​​セレクター: 100
• 要素タグ: 1000

次のことに注意してください:

• !重要な宣言されたスタイル最も高い優先順位
• 優先順位が同じ場合、最後に表示されたスタイルが有効になります
• 継承されたスタイルの優先順位が最も低くなります

属性の継承:

• 継承可能な属性: font-size、font-family、color
• 継承できないスタイル: border、padding、margin、width、height

7.フローティング関連の

要素をフロートに設定すると、表示は自動的にブロックになります。

(1) フロートをクリアする必要があるのはいつですか?

フローティングによって発生する問題は次のとおりです。

• 親要素の高さを拡張できないため、親と同じレベルの要素に影響します
• フローティング要素と同じレベルの非レベル要素 フローティング要素がそれに続きます
• 要素がフローティングの場合、その前の要素もフローティングにする必要があります。そうしないと、ページの構造に影響します

(2) フロートをクリアするにはどうすればよいですか?

フロートをクリアする方法は次のとおりです。

• 親 p の height 属性を定義します。
• フロートの後に空の p を追加します。最後のフローティング要素タグを追加し、clear:both style
• フローティング要素を含む親タグに overflow:hidden または overflow:auto を追加します。

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

#myclassname

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